Want me to debug your D3.js code for you?

Click here to learn more...

(https://www.dashingd3js.com/debug-my-d3-code)

Why build Data Visualizations

with D3.js

What is D3.js
From the D3.js website => d3js.org
(http://www.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 (http://bost.ocks.org/mike/) wrote D3.js
based on his work during his PhD studies at the
Stanford Visualization Group (http://vis.stanford.edu/).
Mike now works at The New York Times
(http://www.nytimes.com/) who sponsors his open
source work. You can find Mike's github
(https://github.com/) profile here => Mike Bostock
Github Profile (https://github.com/mbostock). While
he wrote the library, there are many contributors that
are adding a diverse set of components
(https://github.com/mbostock/d3/wiki/API-Reference)
and plugins (https://github.com/d3/d3-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 it's 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.

If you found this D3 Tutorial helpful, you'll enjoy these FREE videos:

Static and Dynamic Data and Web Pages

(https://www.dashingd3js.com/lessons/static-and-dynamic-data-
and-web-pages)
D3 and JSON (https://www.dashingd3js.com/lessons/d3-and-json)
Dynamic SVG Coordinate Space
(https://www.dashingd3js.com/lessons/dynamic-svg-coordinate-
space)

← Why Data Visualizations (https://www.dashingd3js.com/why-data-

visualizations)
The Data Visualization Process →
(https://www.dashingd3js.com/the-data-
visualization-process)

Learn D3.js
D3 Tutorial (https://www.dashingd3js.com/table-of-contents)
D3 Screencasts (https://www.dashingd3js.com/lessons)

D3 Training Series
D3 Introductory Training (https://www.dashingd3js.com/introductory-d3-course)
D3 Intermediate Training (https://www.dashingd3js.com/intermediate-d3-course)
D3 Mapping Training (https://www.dashingd3js.com/mapping-d3-course)
D3 Data Manipulation Training (https://www.dashingd3js.com/d3-data-manipulation)
D3 Corporate Training (https://www.dashingd3js.com/d3-training/corporate-data-
visualization-and-d3-js-training)

DashingD3js.com
Blog (https://www.dashingd3js.com/blog)
About (https://www.dashingd3js.com/about)
Hire Me (https://www.dashingd3js.com/d3-data-visualization-freelancer-and-consultant)
D3 Examples (https://www.dashingd3js.com/d3-examples)
D3 Resources (https://www.dashingd3js.com/d3-resources)
D3 & Data Viz Newsletter Archive (https://www.dashingd3js.com/data-visualization-and-
d3-newsletter)
Data Visualization & D3.js Weekly Newsletter

Get D3.js and Data Visualization

news, articles, jobs and more
delivered to your inbox every Tuesday:

E-mail

Get the Newsletter

Did you sign up for the newsletter? :) © 2012-2016 DashingD3js.com. All rights reserved.