D3: Taking a dip

D3 is a “newish” visualization library that has been getting a lot of attention recently. The New York Times has been using it extensively to create visualizations, and in fact its creator is currently employed by the NYT. I’d been meaning to take D3 for a spin for a while but couldn’t find a dataset I wanted to play with until a few weeks ago.

At the end of November, the LA Times published a dataset titled Capital appreciation bonds which highlighted how various California school districts were funding various projects with extremely high interest rate bonds. The LA Times described the data as:

Hun­dreds of Cali­for­nia school and com­munity col­lege dis­tricts have fin­anced con­struc­tion pro­jects with cap­it­al ap­pre­ci­ation bonds that push re­pay­ment far in­to the fu­ture and ul­ti­mately cost many times what the dis­trict bor­rowed. Gov­ern­ment fin­ance ex­perts con­sider bonds im­prudent if the total cost is more than four times the money bor­rowed or the ma­tur­ity peri­od is great­er than 25 years.

Anyway, you can check out my attempt at a visualization here.

Posted In: Demo, Javascript

Tags: , ,

  • Neat visualization! I’ve been learning d3 as well and am having a hard time landing on the right way to filter data. In your project, how do you apply the filter? Do you do it from within a chart object, or do you filter the data outside the object, then pass the smaller dataset in?

  • Thanks. The way the filtering works on this one is actually using Underscore.js’s “filter” method. See https://github.com/Setfive/setfive.github.com/blob/master/d3_latimes_bonds/index.php#L177 it basically filters out only the objects that should be visible and then passes it to d3.

  • Got it, thanks. I believe d3 has a filter method as well (https://github.com/mbostock/d3/wiki/Selections#wiki-filter). I’ve found it challenging to decide when to filter on the client-side vs. the server-side, especially with large time-series datasets.

  • Good call. I’ve been pushing as much as I can towards the client at least to prototype since it makes the iteration time much faster.