Introduction To D3
This tutorial teaches data visualization with D3.js from the ground up. After watching this, you will know how to make a scatter plot, bar chart, and line chart...

Data Visualization Reading and Videos

Here, Have My Journalism Skills Cheat Sheet
I’ve been noting tried-and-true techniques for news-gathering, multi-platform storytelling, writing and editing for several months now in a Google Doc, but here they are for your benefit as well. They’re pretty basic, overall, but that’s the point...

Locals & Tourists
With the power of MapBox and Twitter data from Gnip, data artist Eric Fischer worked with the Gnip team to create a fully-browsable worldwide map of local allegiances...Blue points on the map are Tweets posted by “Locals”...Red points are Tweets posted by “Tourists”...

The Power Of Categorization
As I was perusing the wine list, I was reminded of the importance of categorization (yes, apparently my data-brain is on even at dinnertime). Let's take a quick look at how categories help us make sense of things: both in life and in data visualization...

Comparea
Comparea lets you compare the area of two geographic features (continents, countries, states). Because of the projection that Comparea uses, this comparison is valid (the size of the features is proportional to their area) and suffers from minimal distortion. This lets you see just how big Greenland or Alaska really is...

US Code Explorer 2 - Force Directed Graph
This is an experimental visualization of US Law using a Force Directed Graph. The chart uses a "hub and spoke" layout to represent the hierarchy of a given Title of the U.S. Code such as Title 17 (Copyright). The center circle represents a "parent" portion of the code - a portion with sub-portions under it (e.g. Chapter 10) and the surrounding circles on the edge represent the "child" portions that belong to that parent (Section 100, Section 101, Section 103..)...

D3.js Reading and Videos

Customize Rickshaw Graphs For Fun And Profit
If you have the need for graphs within your app there’s a few options open to you: D3 or Rickshaw being two of them. We went with Rickshaw because this actually takes D3 and builds on top of it to offer additional features that wrap and hide some of the complexity. However we wanted something more custom, so we extended it. Here’s how...

Linked Highlighting With React, D3.js, And Reflux
One of the best interaction techniques for data vis is to have linked highlighting between related visualizations. In this post, I share a method for implementing linked highlighting using React, D3.js and Reflux...

Vintage Visualization Restoration - Bump Chart Edition
As a side project, I decided to reimplement a classic bump chart visualization using JavaScript and D3...This bizarre but majestic visualization was originally created for the 1890 US Statistical Atlas by the wonderfully talented Henry Gannett. It provides a look at the most populated cities during each census, showing over 100 years of data...

Animated Orbiting Particles In D3
Let's say I wanted to build an SVG atom in D3...Suppose I wanted to digram any combination of these particles, like other types of atoms. Since it only takes three particles to make an atom (protons, neutrons, and electrons) this is a good use case for some object-oriented javascript...

Listen To Wikipedia (warning: sound)
Listen to the sound of Wikipedia's recent changes feed. Bells indicate additions and string plucks indicate subtractions. Pitch changes according to the size of the edit; the larger the edit, the deeper the note. Green circles show edits from unregistered contributors, and purple circles mark edits performed by automated bots...This project is built using D3 and HowlerJS...

Hope that you had a great past week and that next week is even better!