Introduction to D3.js for the 2017 Brown Datathon.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Brown Datathon 2017

Introduction to D3.js workshop for the 2017 Brown Datathon.

What is D3.js?

"D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction."

Setting Up D3

There are two ways you can setup D3.js for your visualization. Please note that version 4 of D3.js was released this past summer. My introduction uses version 3. Keep this in mind if you decide to use my example as source code.

  • Download D3.js and add it directly (as in my example)

  • Serve your project locally and use CDNJS


D3.js is extremely well documented (for both version 3 and 4). This should be the first place you turn if you need help:

Helpful Resources

Mike Bosotock's open source examples

Scott Murray's D3 Tutorials

Mike Bostock's D3 Workshop

D3 Tool Tip

What's New with D3 V4