This is my scatterplot excercise where I use two circles for each item to show the difference in radius between the 100% of the budgets and the percentage left in them at the end of the year.
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Transition Delays</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { backgchop-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { backgchop-color: white; } circle { } circle:hover { fill: rgba(255,0,0,0.5); } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <h1>How The Treasury Cuts The Budget (in retrospect)</h1> <p>This scatterplot shows the greatest cuts made to Israeli budgets through the budget year after being approved in parliament since 2013. All these budgets saw more than 100,000,000₪ cuts with some losing as much as 2/3 of their originally allocated funding even though they were not officially designated as reserve items. Some of them might actually be hidden reserves. Source: <a href="https://data.obudget.org/queries/53/source">oBudget.org</a>, 2015</p> <script type="text/javascript"> var w = 750; var h = 700; var padding = [ 20, 10, 100, 100 ]; //Top, right, bottom, left var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(5) .tickFormat(function(d) { return d/1000000000 + "bil ₪"; }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickFormat(function(d) { return d/1000000000 + "bil ₪"; }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); var comma = d3.format("0,000"); var chop = d3.format(".1f"); var cr = 1; //circles 100% size d3.csv("budget_cuts.csv", function(data) { xScale.domain([ d3.min(data, function(d) { return +d.net_allocated; }), d3.max(data, function(d) { return +d.net_allocated; }) ]); yScale.domain([ d3.min(data, function(d) { return +d.net_changes; }), d3.max(data, function(d) { return +d.net_changes; }) ]); var before = svg.selectAll("circle.before") .data(data) .enter() .append("circle") .attr("class", "before"); var after = svg.selectAll("circle.after") .data(data) .enter() .append("circle") .attr("class", "after"); before.attr("cx", function(d) { return xScale(d.net_allocated); }) .attr("cy", function(d) { return yScale(d.net_changes); }) .attr("r", cr*3) .attr("opacity", 0) .attr("stroke-width", 1) .attr("stroke", "rgba(255,0,0,0.8)") .attr("stroke-dasharray", "4,2") .append("title") .text(function(d) { return "In " + d.year + " item #" + d.num + " was budgeted for " + comma(d.net_allocated) + "NIS, but after " + +d.transfers + " transfers only " + comma(d.net_revised) + "NIS were left, which are a only " + chop(d.perc) + "% of the original budget"; }); after.attr("cx", function(d) { return xScale(d.net_allocated); }) .attr("cy", function(d) { return yScale(d.net_changes); }) .attr("r", cr*10) .attr("stroke-width", 0) .attr("fill", "red") .attr("opacity", 0) .append("title") .text(function(d) { return "In " + d.year + " item #" + d.num + " was budgeted for " + comma(d.net_allocated) + "NIS, but after " + +d.transfers + " transfers only " + comma(d.net_revised) + "NIS were left, which are a only " + chop(d.perc) + "% of the original budget"; }); before.sort(function(a, b) { return d3.ascending(+a.net_allocated, +b.net_allocated); }) .transition() .delay(function(d, i) { return i * 250; }) .duration(250) .attr("opacity", 1) .attr("fill", "transparent") .attr("r", cr*10+1) after.sort(function(a, b) { return d3.ascending(+a.net_allocated, +b.net_allocated); }) .transition() .delay(function(d, i) { return i * 250 + 5000; }) .attr("opacity", 0.8) .duration(1000) .attr("r", function(d) { return cr*Math.sqrt(d.perc) ; }) svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 10) + ",0)") .call(yAxis); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js