roadtolarissa

Adam Pearce

Twisters

Interactive tornado map

This is a remake of a map John Nelson made over the summer:

Seeing Nelson’s map for the first time, I was struck at how well its combination of two intuitive ideas – transforming starting/ending locations into direction and displaying those directions with a polar histogram – created an instantly understandable visualization. It does a wonderful job of clearly communicating an idea to a wide audience. Sharing what I’ve learned from looking at this map with a sentence: “Most tornadoes in the US travel Northeast and typically occur in the East” isn’t nearly as impactful (a week after hearing that I probably wouldn’t remember the direction) or informative (what do ‘most’ and ‘typically’ mean?) as looking at the map.

I’ve tried to emulate the aesthetic of Nelson’s map while attaching one more simple idea – crossfilter - to it. Some things I’m happy with:

• Click to Zoom
  
  d3′s built in zoom is nice, but it is tricky to use on devices without a scroll wheel. Putting an onclick zoom event on each state avoids this difficulty and has the huge add bonus of playing very nicely with crossfilter. The state to state transitions are my favorite part of this map. Getting multistate tornadoes to behave correctly took a little bit of data wrangling and tinkering with crossfilter; I really like the result.
• Brushable Arc
  
  Not the most useful or impressive thing in the world, but I don’t think anyone has done this before in d3 and after another struggle with trigonometry, I’m trilled that it actually works. I’d like to make it more accessible - it might work well in dc.js - but the code needs a lot of polishing first.

Some ‘Todos’ without a checkmark:

• Responsive Design Most screens will have some empty horizontal space and not enough vertical space to view the entire display at once. Resizable charts with D3 aren’t actually that difficult to create – if the drawing of the chart is correctly decoupled from its other functions you essentially get that behavior for free by redrawing after window.onresize - but (attractively) laying out 9 differently sized charts is.
• Adjustable Color Setting the attributes of the lines so they matched the actual tornadoes was fun – direction, start, stop, width, and length clearly apply to both – but color, more than anything else, is the most visible property of the lines. Nelson colors according to direction to hammer home the point of his chart. I went with wind speed since it seemed more meteorological and less morbid than deaths; I would have liked to avoid imposing that decision on the viewer. I’m hoping the graphs on this blog share the sense of playfulness I have exploring data and adjustable colors would have done a good job of that.
• Tracking Dollar Damage eh… Probably too many charts on the page already.
• Mouse Over Effects Unlike the my last three projects, there wasn’t an easy way to find images of the focused items. In lieu of a tooltip, it would have been cool to highlight each bar that the moused over tornado was a member of and possibly display text on the bar showing the corresponding exact value. Currently the only way to find out more about a given tornado on the map is to fiddle with the bars, which is pretty dorky (or with d3.select($0).data(), which is pretty obscure).

But! I haven’t posted anything for four months and I’m looking forward to starting something new and applying some of what I’ve learned working full time with d3 over the the last two months.