var svg = d3.select('#' + chart_id) .append('svg:svg') .attr('width', width) .attr('height', height) .attr('viewBox', '0 0 ' + width + ' ' + height) .attr('perserveAspectRatio', 'xMinYMid') .attr('id', chart_id + '-chart') .attr('class', chart_id + '-chart');

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("/wp-content/uploads/custom/15/0318-depts-3.csv", function (links) { var nodesByName = {}, nodesByamount = {};

// Create nodes for each unique source and target. links.forEach(function(link) { var parent = link.source = nodeByName(link.source), child = link.target = nodeByName(link.target);

link.amount = nodeByamount(link.amount) child.amount = link.amount;

if (parent.children) parent.children.push(child); else parent.children = [child]; });

// Extract the root node and compute the layout. var nodes = tree.nodes(links[0].source);

// Create the link lines. var link = svg.selectAll("path.link") .data(links);

link.enter().insert("path", "g") .attr("class", "link") .attr("d", diagonal);

// Create the node circles. var node = svg.selectAll("g.node") .data(nodes);

var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function (d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeEnter.append("circle") .attr("r", function(d,i) { if (d.amount) { return scale(+d.amount.amount)/4; } }) .attr("opacity", 0.3) .attr("fill", function (d, i) { if (d.amount) { if (+d.amount.amount <= 0) { return "#ffffff"; } else { return "#0098da"; }}; }) .on("mouseover", mouseover) .on("mouseout", mouseout); function mouseover(d) { // show tooltip fade in if (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.name+ ": " + "£" + format(d.amount.amount)+ "m" +"

"); tooltip.style("left", (d3.event.pageX - 50) + "px") .style("top", (d3.event.pageY + 10) + "px"); } } function mouseout(p) { tooltip.transition().duration(200).style("opacity", .7); tooltip.transition().duration(500).style("opacity", 0); }

var g = svg.append("g"); var textgroup = g.append("g").attr("id","#DeptText"); var texts = textgroup.selectAll("text") .data(nodes) .enter()

nodeEnter.append("text") .attr("class", "text") .attr("y","3") .attr("x",function(d,i) { if (d.depth == 1) { return "-170"; } else { return "7" } }) .text(function (d, i) { if (d.amount) { return d.name + " (" + "£" + format(d.amount.amount) + "m" + ")"; } else { return ("") }}) .style("fill", function (d, i) { if (d.amount) { if (d.amount.amount < 0) { return "#238b45"; } else { return "#525252"; } }}); svg.append("text") .attr("x", 50) .attr("y", 50) .attr("class", "legend") .style("fill", "#000000") .style ("font-family", "source sans pro") .style ("font-size", "18px") .on("click", function(){ jQuery('.text').toggle(); }) .text("Click here to show/hide labels"); function nodeByName(name) { return nodesByName[name] || (nodesByName[name] = {name: name}); }; function nodeByamount(amount) { return nodesByamount[amount] || (nodesByamount[amount] = {amount: amount}); }; }); var the_chart = jQuery("#" + chart_id + '-chart'), aspect = the_chart.width() / the_chart.height(), container = the_chart.parent(); jQuery(window).on("resize", function() { var targetWidth = container.width(); the_chart.attr("width", targetWidth); the_chart.attr("height", Math.round(targetWidth / aspect)); }).trigger("resize");

All data from the Cabinet Office.