D3 Nights

Data Visualization Overview

Why visualize data?

• Anscombes Quartet
• Marks and Channels (pg 67+)

Develop a chart in D3 using examples here:

• https://bl.ocks.org/
• http://blockbuilder.org/search

Use this bookmark to quickly edit bl.ocks:

• http://bl.ocks.org/enjalot/c0e1634fb919c37575b8

Review Mike Bostock’s Bar Chart Tutorial

• https://bost.ocks.org/mike/bar/
• Open chart that you want to modify and click on you Block Builder Bookmark

Let’s look at an example from our very own maptimer and the guy who got me started with d3

• http://www.latimes.com/projects/la-pol-ca-california-neighborhood-election-results/
• https://github.com/datadesk/california-2016-election-precinct-maps

Now we can make our own bar chart using an example from Stamen

• https://bl.ocks.org/brandonhaydu/43b8d26c21c091363a27af70095d744d
• V1: https://bl.ocks.org/brandonhaydu/05c88e6f0c06657923f5902841942c0b
• V2: https://bl.ocks.org/brandonhaydu/bad525a6555b4fd2c35317c77e7c779d
• V3: https://bl.ocks.org/brandonhaydu/505094d7f9245b0992c2787fb8e22e9a

Since this is Maptime, let’s add a map (http://mapshaper.org/ )

• http://bl.ocks.org/brandonhaydu/57a6b93ed6dd7335ba45c34959a99777
• V1: http://bl.ocks.org/brandonhaydu/05570e547f640e3de412e65e1f5c3bfd
• V2: http://bl.ocks.org/brandonhaydu/191e56a601a6bb0553bec1a153b19828

Finally, we’ll put it all together

• V3: http://bl.ocks.org/brandonhaydu/2eb8987cdb19c1826c7a5e55179de9fe
• V4: http://bl.ocks.org/brandonhaydu/bbac735600b1de910243f41d38857c94/d85eec49c865aa569d2ede761efd9564cba40e61

Additional Resources

• D3 Mike Bostock (creator of D3) has collected a list of D3 tutorials many written by him. They include links to talks and video examples
• D3 Tutorials by Scott Murray
• maptimeLA tutorial Turning food bank data into a D3 map made by maptimer Jon Schleuss!