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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Transition Delays</title>
<script type="text/javascript" src="//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="//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>
year,num,budget_title,net_allocated,transfers,throughput,net_changes,perc,net_revised,link
2014,130105,הוצאות שונות,134084022000.0, 41,2782108000.0,-2637006000.0,1.966681757204449,25966776000.0,http://obudget.org/#budget/130105/2014/
2014,830401,השקעות שונות,45244888000.0, 34,1409018000.0,-1268588000.0,2.8038261471660624,2112896000.0,http://obudget.org/#budget/830401/2014/
2014,795002,תחבורה ציבורית והסעת המונים,36803280000.0, 15,1433143000.0,-1263837000.0,3.4340335970054845,17845725000.0,http://obudget.org/#budget/795002/2014/
2014,733301,מענקים לתאגידי מים וביוב,4974892000.0, 13,228951000.0,-225169000.0,4.526108305466732,2047695000.0,http://obudget.org/#budget/733301/2014/
2014,364202,האוכלוסיה הערבית-עידוד תעסוקה,2006719000.0, 13,146636000.0,-96864000.0,4.826983748098264,747487000.0,http://obudget.org/#budget/364202/2014/
2014,364204,"אוכלוסיות ייעודיות- עידוד תעסוקת אוכלוסיות תושבי פריפריה, עולים, מבוגרים ואוכלוסיות המטופלות במסגרת תכניות תב""ת (תנופה בתעסוקה)",1244148000.0, 12,102423000.0,-67445000.0,5.420978854605722,434808000.0,http://obudget.org/#budget/364204/2014/
2014,733101,פיתוח מפעלי קולחין,4634184000.0, 12,303962000.0,-271618000.0,5.861182896492672,1374768000.0,http://obudget.org/#budget/733101/2014/
2014,830701,מימון תוכניות הבראה גופים במשבר,7850169000.0, 9,1063576000.0,-500586000.0,6.376754436751616,3344895000.0,http://obudget.org/#budget/830701/2014/
2014,600601,חידוש מבנים במערכת,3514056000.0, 8,267694000.0,-264694000.0,7.532435453504441,1396504000.0,http://obudget.org/#budget/600601/2014/
2014,231040,השרות לילד ולנוער - תכנון וניהול,1929996000.0, 9,264350000.0,-159678000.0,8.27348864971741,492894000.0,http://obudget.org/#budget/231040/2014/
2014,600210,בניית כיתות לימוד,10717144000.0, 8,1175245000.0,-1175245000.0,10.96602788951982,1315184000.0,http://obudget.org/#budget/600210/2014/
2014,780303,קציר ים המלח,1330000000.0, 7,192301000.0,-179819000.0,13.520225563909774,71267000.0,http://obudget.org/#budget/780303/2014/
2014,364501,עתודה ליישום מדיניות הממשלה לעידוד תעסוקה,1336398000.0, 7,190914000.0,-190914000.0,14.285714285714286,0.0,http://obudget.org/#budget/364501/2014/
2014,982207,הנחות בקרקע,3000000000.0, 3,551646000.0,-551646000.0,18.3882,1345062000.0,http://obudget.org/#budget/982207/2014/
2014,202620,גידול טבעי במערכת החינוך,1276622000.0, 2,638311000.0,-638311000.0,50.0,0.0,http://obudget.org/#budget/202620/2014/
2013,130105,הוצאות שונות,123962065000.0, 41,2176775000.0,-2079581000.0,1.677594673822189,38699244000.0,http://obudget.org/#budget/130105/2014/
2013,830401,השקעות שונות,21340700000.0, 20,1032625000.0,-984835000.0,4.614820507293575,1644000000.0,http://obudget.org/#budget/830401/2014/
2013,830701,מימון תוכניות הבראה גופים במשבר,6450376000.0, 8,952315000.0,-476279000.0,7.383740110654014,2640144000.0,http://obudget.org/#budget/830701/2014/
2013,733101,פיתוח מפעלי קולחין,1163046000.0, 3,204250000.0,-204250000.0,17.561644165407042,550296000.0,http://obudget.org/#budget/733101/2014/
2013,840602,"מלוות באמצעות ערבויות ממשלת ארה""ב",3430000000.0, 1,2211000000.0,-2211000000.0,64.46064139941691,1219000000.0,http://obudget.org/#budget/840602/2014/