var tooltip = d3.select("body") .append("div") // declare the tooltip div .attr("class", "tooltip") // apply the 'tooltip' class .style("opacity", 0); // set the opacity to nil

d3.csv("https://www.cityam.com/wp-content/uploads/custom/15/0305-data.csv", function(error, data) { color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

data.forEach(function(d) { d.ages = color.domain().map(function(terry) { return {party: terry, percent: +d[terry]}; }); });

var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.percent; });

var legend = d3.select("#cam-donuts").append("svg") .attr("class", "legend") .attr("width", radius * 2) .attr("height", radius * 2) .selectAll("g") .data(color.domain().slice().reverse()) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect") .attr("width", 18) .attr("height", 18) .style("fill", color);

legend.append("text") .attr("x", 24) .attr("y", 9) .attr("dy", ".35em") .text(function(d) { return d; });

var svg = d3.select("#cam-donuts").selectAll(".pie") .data(data) .enter().append("svg") .attr("class", "pie") .attr("width", radius * 2) .attr("height", radius * 2) .append("g") .attr("transform", "translate(" + radius + "," + radius + ")");

svg.selectAll(".arc") .data(function(d) { return pie(d.ages); }) .enter().append("path") .attr("class", "arc") .attr("d", arc) .style("fill", function(d) { return color(d.data.party); }) .on("mouseover", mouseover) .on("mouseout", mouseout);

svg.append("text") .attr("class", "text") .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d.State; });

function mouseover(d) { tooltip.transition() .duration(500) .style("opacity", 0) .style("stroke-width", 9); tooltip.transition() .duration(200) .style("opacity", .9) .style("stroke-width", 3); tooltip.html("

" + d.data.party + "
" + d.data.percent + "%" +"

"); tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY) + "px"); }

function mouseout(p) { tooltip.transition().duration(200).style("opacity", .9); tooltip.transition().duration(500).style("opacity", 0); }

});

Overall, the Conservative party has 24 per cent of the total 2.2m "votes", with 541,000 – 122,000 ahead of Labour, using followers or likes as a measure. Obviously the data comes with caveats – people can, after all, like more than one party, subscribing to receive information rather than to pledge undying allegiance. There is a fair amount of variation across the various media.

LinkedIn is a haven for Conservative supporters, most likely because it attracts a business-oriented clientele. Facebook is also the domain of the Conservatives, but here they lead Ukip by a solitary point. Labour all but holds dominion over Twitter, leading the Tories by seven percentage points, while the only place the Liberal Democrats gain much ground is on the much-maligned Google+.