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])
.html(function(d){
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 + ")");
});

svg.call(tip);

svg.selectAll(".chart")
//...
.on('mouseover', function(d){
tip.show(d);
})
.on('mouseout', function(d){
tip.hide(d);
});

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s