I’ve been spending a lot of time with React (and it’s even better clojurescript wrapper, om) lately, and it’s pretty great. This isn’t a React tutorial persay, so if you’re not familiar with it, I suggest you check it out first. Same goes for d3.js.
D3 selections are a nice idea, but the chained approach to DOM creation get increasingly messy and confusing as the complexity of the rendered material increases. I’ll save expounding on the benefit of React to another post, but by substituting React for DOM management, we can continue to use d3’s powerful visualization creation functions (projections, paths, scales, interpolators, colors, etc.) within a flexible component context.
First, I’d like to port the d3 choropleth example to React. I’m going to try to stay as close to the d3 code as possible.
If you’re the type that just wants to see something that works, the finished port is here
Let’s start by creating an empty React component and rendering it into the DOM.
glossing over include statements, pick your poison
in our index.html
in our js file
instead of a div, the component should output an svg of the correct size
next we’ll load the map features and save the features as component stateIsoCodes
let’s draw our map
to create the choropleth colors, we’ll first load the county unemployment data from tsv, and use it to create a hashmap that we can later access by countyId
next, we need to add a quantize function to add county color classes
In the next post we’ll make a zooming and panning map using state transitions