Skip to content

Instantly share code, notes, and snippets.

@asuozzo
Last active October 6, 2015 23:17
Show Gist options
  • Save asuozzo/f3e3d3e508c78ecee4b2 to your computer and use it in GitHub Desktop.
Save asuozzo/f3e3d3e508c78ecee4b2 to your computer and use it in GitHub Desktop.
D3 Scatterplot with Transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scatterplot: Vermont Salary Spending by Department, 2009 vs 2014</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family:Helvetica, Arial, sans-serif;
}
h1 {
font-size:24px;
margin:0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill:#add8e6;
}
.axis path,
.axis line {
fill:none;
stroke:black;
shape-rendering:crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px
}
</style>
</head>
<body>
<h1>Scatterplot: Vermont Salary Spending by Department, 2009 vs 2014</h1>
<p>State of Vermont salary spending, by department, from fiscal years 2009 and 2014. Source: <a href="http://data.vermont.gov">data.vermont.gov</a>
<script type="text/javascript">
var w=900;
var h=500;
var padding = [10, 10, 30, 90]
var commasFormatter = d3.format(",.0f")
var xScale = d3.scale.linear()
.range([padding[3],w - padding[1] ]);
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 "$" + commasFormatter(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickFormat(function(d){
return "$" + commasFormatter(d);
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("VTSalaryData20092014.csv", function(data) {
xScale.domain([
d3.min(data, function(d){
return +d.y2009;
}),
d3.max(data, function(d){
return +d.y2009;
}) ]);
yScale.domain([
d3.max(data, function(d){
return +d.y2014;
}),
d3.min(data, function(d){
return +d.y2014;
}) ]);
var circles= svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
circles.attr("cx", function(d){
return xScale(d.y2009);
})
.attr("cy", function(d) {
return yScale(d.y2014);
})
.attr("r", 0.1)
.attr("fill", "#663366")
.append("title")
.text(function(d) {
return d.Department + " spent $" + d.y2009 + " on salaries in 2009 and $" + d.y2014+ " in 2014."
;
});
circles.sort(function(a,b){
return d3.ascending(+a.y2009, +b.y2009);
})
.transition()
.delay(function(d,i){
return i*50;
})
.duration(2000)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform","translate(0," + (h-padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform","translate(" + (padding[3]) + "," + "0)")
.call(yAxis);
});
</script>
</body>
</html>
Department y2009 y2010 y2011 y2012 y2013 y2014
Administration 517082.41 444531.98 420472.7 552826.66 551458.18 2478554.18
Agriculture 5252889.2 4921034.6 4887326.59 4734889.24 5364325.41 5809201.23
Attorney General 4546406.16 4568744.45 4669888.88 4769927.11 5085669.7 5264829.65
Auditor 954234.26 988680.96 1046529.54 1032706.41 1081290.45 1137847.9
Buildings & Gen. Services 17354008.95 15854477.67 16008714.91 15182672.76 15691697.22 14577891.55
House Clerk 241282.05 245943.77 262990.61 267954.22 291607.77 289839.36
Commerce 5472059.97 4875442.9 4906046.75 4640734.92 5060504.03 5717673.8
Corrections 55786501.56 53891477.24 54002007.3 52255815.88 56399508.6 57978276.23
Court Administrator 18786732.71 18464358.16 19489262.56 19132129.05 20270036.51 20536677.26
Criminal Justice Training Council 685841.01 595100.13 467074.32 622835.32 762900.44 761435.14
DAIL 16255639.55 15098550.37 15179803.52 14704159.36 15926574.58 16673609.71
Defender General 3427395.02 3429466.92 3646011.02 3622131.2 4041349.49 4307224.21
Human Resources 2790417.67 2374965.9 4191568.48 4125654.42 4906899.73 5211614.14
Children & Families 52190960.86 51911733.07 52547090.85 49499461.16 54475730.34 59213987.59
Financial Regulation 7355280.88 7323602.15 7403182.74 7085915.74 7576832.74 7416701.67
Mental Health 14274271.52 15009057.28 14845025.25 14222783.74 9836706.39 11253894.43
Education 10462572.85 9562114.91 9051087.81 8702160.76 9479643.7 9465076.08
Enhanced 911 0 0 0 666758.14 664154.02 708486.38
Environmental Conservation 15807512.89 15721770.73 15820841.75 15177541.7 16166889.71 17222632.79
Executive Office 1054509.65 859266.89 892555.73 920172.13 910386.88 961766.75
Finance & Management 2705241.99 2039989.2 2113685.48 2176316.01 2483596.81 2383948.72
Fish&Wildlife 8223052.94 8180897.77 8268954.5 7858961.91 8241590.81 8760450.54
Forests Parks & Recreation 8315234.92 8047742.73 8320042.37 8102153.13 8577090.6 8987010.03
Green Mountain Care Board 0 0 0 746160.5 1410839.93 1917035.28
Health 26772556.93 24741532.31 24586302.43 23595120.06 26238288.05 28019450.68
House of Representatives 2963951.97 3240212.51 3051484.16 3157939.33 3281873.83 3247586.67
Human Rights Commission 266325.28 266296.96 277923.48 262367.75 266679.92 295346.25
Human Services 5912267.54 6687360.82 5781872.54 6297370.16 7051831.18 6782268.3
Information & Innovation 3404103.67 4497882.77 4624932.76 4438401.98 5304160.84 7546490.68
Joint Fiscal Committee 808055.02 790096.5 844761.18 753554.79 831313.71 886920.16
Labor Relations Board 107195.53 95470.37 95021.22 91953.4 96772.92 101317.28
Labor 13817273.06 14474323.21 14011934.15 12890702.51 13534708.07 13666619.41
Legislative Council 2360235.79 2385054.82 2337083.66 2117232.97 2197367.15 2456455.37
Libraries 1439531.96 1218355.12 1294789.98 1200313.92 1290232.6 1321754.45
Liquor Control 2980545.45 2999972.47 2880615.3 2810200.62 2807087.95 2895731.61
Lottery Commission 985484.87 1020620.24 1021940.56 974716.26 1028638.06 1016049.28
Lt Governor 116574.4 115003.2 121165.36 120009.02 120521.48 121258.41
Military 6010735.16 5813751.45 6125845.39 5856397.48 6109924.67 5914359.97
Natural Resources Board 1802769.92 1667412.93 1646681.63 1510214.22 1594086.06 1642168.1
Natural Resources 3592906.46 2494653.13 1820849.07 1868120.41 2095390.01 2177012.53
Public Safety 39462489.05 39395985.78 39315973.1 39171236.03 41707129.4 43903473.67
Public Service Board 1661954.47 1514966.11 1677909.39 1624251.78 1656038.24 1864905.03
Public Service 3184926.06 3304741.14 3635581.81 3005883.32 3021374.62 3155500.94
Secretary of State 3438116.48 3283291.42 3422261.83 3449257.87 3587495.09 3634472.52
Secretary of the Senate 217677.66 216377.97 213330.21 222462.73 245775.23 256229.77
Senate 653570.92 707845.23 644043.25 659092.88 693418.74 691920.12
Sgt. At Arms 391047.96 358707.38 329904.94 366892.54 386701.97 401980.11
State Treasurer 2167460.85 2117095.26 2087820 1954419.08 2214741.29 2288439.63
States Attorneys 5432378.71 5282833.65 5238337.6 4863125.33 5233775.17 5546350.65
States Attorneys Dept. 2862563.8 2919287.45 2986475.11 2828874.07 2992904.74 3175282.92
Taxes 8643626.47 7927345.28 8107289.24 7712225.42 8403662.35 8660439.09
Transportation 62825173.63 63433624.13 64816878.55 64055953.68 67411747.78 70938509.06
Commission on Women 180146.12 168688.9 168830.16 162479.25 160362.83 174324.85
Vermont Health Access 5080192.76 4795846.92 6209003.54 6617847.77 8817422.99 11608635.59
Veterans Home 9125534.55 9262772.7 9044897.18 8849198.55 8854881.85 9032392.96
VOSHA Review Board 18633.24 15809.6 2607.28 13892.34 16405.77 15584.52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment