Philadelphia City Council, programming

Philadelphia City Council: Timelines (11/12)

Bar charts and pie charts are cool but I wanted to show terms on a timeline too, to show how much turnover there was per district. For this I turned to a javascript timeline library available on github. The documentation is pretty clear but I had to tweak a few things – the biggest being how to get tooltips to show on mouse hover.

This is what I ended up doing:

//define what goes in the tooltip and call it to the svg
tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
var formatDate = d3.time.format("%x");
return (d.councilperson_id_id__first_name + " " +
d.councilperson_id_id__last_name + ": " +
formatDate(d.actual_start_date) + " to " +
formatDate(d.actual_end_date) +
" (" + d.departed + ")");

.on('mouseover', function(d){;
.on('mouseout', function(d){


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s