What is D3.js? - Visualizations & Examples

Instructor: David Gloag

David has over 40 years of industry experience in software development and information technology and a bachelor of computer science

Visuals are important. They affect our lives in many ways. In this lesson, we'll take a look at D3.js, what it is, how it relates to data visualization, and some examples.

The Power of Visuals

Visuals have a profound effect on our lives. Do you remember the other day when your favorite sports team won the game they were playing, and you saw the summary on the television? When you saw your favorite actress or actor in a poster for their latest movie? Or when you saw the brightly colored advertisements in the store windows of the mall as you walked by? Visuals elicit various emotions, and make us think in particular ways. But above all, they teach us something. This doesn't happen by chance; it is carefully crafted by the designers. And the area that focuses on presenting visuals in this fashion is data visualization.

What is Data Visualization?

Data visualization, interestingly enough, is about visuals. Or to be more exact, it is about creating visuals that provide us with information that can be quickly and easily understood. At times, they are very simple, such as a 2-dimensional chart or graph. At other times, they are incredibly complex, with intricate 3-dimensional moving designs that could almost be considered art. For example, think about the visuals you see on the Internet, such as the simple charts that appear on various websites like www.pgatour.com, or the digital characters you see on video game websites like www.epicgames.com/paragon. These websites are just the tip of the iceberg. Data visualization influences how we see many aspects of our world.

What is D3.js?

D3.js is a data visualization tool for the Internet. Specifically, it is a JavaScript library that can be used with Hypertext Markup Language (HTML), Scalable Vector Graphics (SVG), and Cascading Style Sheets (CSS) to bring a significant level of visual capability to a Document Object Model (DOM). JavaScript is a subset of the full Java programming language. A library is a collection of programmatic features grouped together that can be used to solve a particular problem or set of problems. And DOM is a programming interface for HTML and the Extensible Markup Language (XML) that allows web pages to be treated as documents. Each piece of the document (headers, footers, paragraphs, etc.) can be programmatically affected.

How Can D3.js Be Used to Generate Visualizations?

D3.js binds information to a DOM, which means that information is associated with the DOM. Think of it like tacking some information to a cork board; that information now becomes available for someone to pick up and use. From there, the information can be manipulated by the capabilities of D3.js. For example, the information could be used to generate a table on the page, a graph of the information, or both. You are only limited by the information you provide and the transformations D3.js includes. It is important to note that these visualizations are generated on the fly, attesting to D3.js speed and power.

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account