Why build Data Visualizations with D3.js

Why build Data Visualizations with D3.js

What is D3.js

From the D3.js website => d3js.org

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3.js helps you attach your data to DOM (Document Object Model) elements.

Then you can use CSS3, HTML, and/or SVG showcase this data.

Finally, you can make the data interactive through the use of D3.js data-driven transformations and transitions.

Who develops D3.js

Mike Bostock wrote D3.js based on his work during his PhD studies at the Stanford Visualization Group.

Mike worked at the The New York Times for a while and is now independently working on D3.js while working at Observable.

You can find Mike's GitHub profile here => Mike Bostock Github Profile.

While he wrote the library, there have been and continue to be many active contributors adding a diverse set of D3.js components and plugins.

Why use D3.js

You should use D3.js because it lets you build the data visualization framework that you want.

Graphic / Data Visualization frameworks make a great deal of decisions to make the framework easy to use.

D3.js focuses on binding data to DOM elements.

D3.js is written in JavaScript and uses a functional style which means you can reuse code and add specific functions to your heart's content.

Which means it is as powerful as you want to make it.

How you chose to style, manipulate, and make interactive the data is up to you.

When you should use D3.js

You should use D3.js when your webpage is interacting with data.

D3 stands for Data Driven Documents.

We will explore D3.js for its graphing capabilities.

We will not explore the myriad ways you can use data to in your webpages in non-graphical ways.

Where is D3.js used

D3.js is a javascript library added to the front-end of your web application.

Your back-end (the server) will generate the necessary data.

The part of the application the users interact with (the front-end) will use D3.js.