|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset=utf-8 /> |
|
<style> |
|
|
|
body { |
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
font-size: 0.75em; |
|
} |
|
|
|
.y.axis .tick { |
|
stroke-width: 1; |
|
stroke: grey; |
|
stroke-opacity: 0.1; |
|
shape-rendering: crispEdges; |
|
fill: none; |
|
} |
|
.y.axis .domain { |
|
stroke-width: 0; |
|
fill: none; |
|
} |
|
.y.axis text { |
|
font-size: 11px; |
|
fill: grey; |
|
fill-opacity: 0.33; |
|
} |
|
.y.axis text.label { |
|
font-size: 18px; |
|
font-weight: bold; |
|
fill-opacity: 0.8; |
|
} |
|
|
|
.bill rect { |
|
fill-opacity: 0.75; |
|
} |
|
.bill:hover rect { |
|
fill-opacity: 1; |
|
} |
|
.bill .nb_bills { |
|
fill: hsl(100, 30%, 60%); |
|
fill-opacity: 0.75; |
|
} |
|
.bill:hover .nb_bills { |
|
font-weight: bold; |
|
} |
|
.placeholder { |
|
fill: hsl(100, 30%, 90%); |
|
} |
|
|
|
.year-label { |
|
fill: grey; |
|
fill-opacity: 0.5; |
|
font-size: 1.33em; |
|
} |
|
|
|
.dial .arc { |
|
fill: yellow; |
|
fill-opacity: 0.25; |
|
} |
|
.dial:hover .arc { |
|
fill-opacity: 0.35; |
|
} |
|
.dial .btn path { |
|
fill: grey; |
|
fill-opacity: 0.75; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://cloud.github.com/downloads/misoproject/dataset/miso.ds.deps.min.0.4.0.js"></script> |
|
<script src="https://rawgithub.com/dechov/6523886/raw/a4eca2da77df1e49832e9201031e9d19a2861b9f/d3.dynamic.js"></script> |
|
<script> |
|
|
|
var bills = [ |
|
{ value: 1, years: [ 1963 ] }, |
|
{ value: 2, years: [ 1976 ] }, |
|
{ value: 5, years: [ 1993, 2000, 2008 ] }, |
|
{ value: 10, years: [ 1990, 2000, 2006 ] }, |
|
{ value: 20, years: [ 1990, 1998, 2003 ] }, |
|
{ value: 50, years: [ 1990, 1997, 2004 ] }, |
|
{ value: 100, years: [ 1990, 1996 /*, 2013 */ ] } |
|
]; |
|
|
|
function bill_src(value, period) { |
|
return 'http://www.newmoney.gov/uploadedImages/newmoney100/usc_currency/'+value+'_'+period.join('-')+'_face_Web.jpg'; |
|
} |
|
|
|
var ds = new Miso.Dataset({ |
|
url: 'https://explore.data.gov/resource/ym8u-jtw3.json' |
|
}); |
|
ds.fetch({ |
|
success: function() { |
|
var rows = []; |
|
this.each(function(row) { |
|
rows.push(row); |
|
}); |
|
process(rows, this.columnNames()); |
|
} |
|
}); |
|
|
|
var width = 960, |
|
height = 500, |
|
margin = { |
|
top: 12, |
|
right: 135, |
|
bottom: 12, |
|
left: 135 |
|
}; |
|
|
|
var innerWidth = width - margin.left - margin.right, |
|
innerHeight = height - margin.top - margin.bottom; |
|
|
|
var svg = d3.select('body').append('svg') |
|
.attr('width', width) |
|
.attr('height', height) |
|
.append('g') |
|
.attr('transform', 'translate('+margin.left+','+margin.top+')'); |
|
|
|
var x = d3.scale.ordinal() |
|
.domain(bills.map(function(d) { |
|
return d.value; |
|
})) |
|
.rangeBands([0, innerWidth], 0, 0.15); |
|
|
|
var y = d3.scale.linear() |
|
.domain([0, 6e9]) |
|
.range([innerHeight, 0]) |
|
.clamp(true) |
|
.interpolate(function(a, b) { |
|
return d3.interpolate(a, b); |
|
}); |
|
|
|
var yAxis = d3.svg.axis() |
|
.orient('left') |
|
.scale(y) |
|
.ticks(6) |
|
.tickSize(-innerWidth) |
|
.tickPadding('6') |
|
.tickFormat(function(d) { |
|
return d < 1 ? 'None' : (d / 1e9) + ' billion'; |
|
}); |
|
svg.append('g') |
|
.attr('class', 'y axis') |
|
.call(yAxis) |
|
.append('text') |
|
.attr('class', 'label') |
|
.text('Notes produced by the U.S. Treasury Department') |
|
.attr('x', -innerHeight/2) |
|
.attr('y', -84) |
|
.attr('transform', 'rotate(-90)') |
|
.attr('text-anchor', 'middle'); |
|
|
|
var clock = d3.time.clock().speed(1.5); |
|
|
|
var dial = svg.append('g') |
|
.attr('class', 'dial') |
|
.attr('transform', 'translate('+(innerWidth+68)+','+(innerHeight/6)+')') |
|
.call( d3.svg.dial().clock(clock) ); |
|
|
|
var yearLabel = dial.append('text') |
|
.attr('class', 'year-label') |
|
.attr('dy', '0.33em') |
|
.attr('text-anchor', 'middle'); |
|
|
|
function numericize(str) { |
|
return str.indexOf('N/A') >= 0 ? 0 : str.replace(/,/g, ''); |
|
} |
|
|
|
function process(data, fields) { |
|
|
|
clock.extent(data.length - 1); |
|
|
|
var patternsSelection = d3.select('svg').append('defs').selectAll('pattern') |
|
.data(bills) |
|
.enter().append('pattern') |
|
.attr('id', function(d) { |
|
return 'bill_' + d.value; |
|
}) |
|
.attr('width', x.rangeBand()) |
|
.attr('height', innerHeight / 12) |
|
.attr('x', function(d) { |
|
return x(d.value); |
|
}) |
|
.attr('patternUnits', 'userSpaceOnUse'); |
|
|
|
patternsSelection.append('rect') |
|
.attr('class', 'placeholder') |
|
.attr('width', x.rangeBand()) |
|
.attr('height', innerHeight); |
|
|
|
patternsSelection.append('image') |
|
.attr('width', x.rangeBand()) |
|
.attr('height', innerHeight / 12); |
|
|
|
var billsSelection = svg.selectAll('.bill').data(bills); |
|
|
|
var bill = billsSelection.enter().append('g') |
|
.attr('class', 'bill'); |
|
|
|
bill.append('rect') |
|
.attr('x', function(d) { |
|
return x(d.value); |
|
}) |
|
.attr('y', innerHeight) |
|
.attr('width', x.rangeBand()) |
|
.style('fill', function(d) { |
|
return 'url(#bill_' + d.value + ')'; |
|
}); |
|
|
|
bill.append('text') |
|
.attr('class', 'nb_bills') |
|
.attr('x', function(d) { |
|
return x(d.value); |
|
}) |
|
.attr('y', innerHeight) |
|
.attr('dx', x.rangeBand() / 2) |
|
.attr('dy', '-0.33em') |
|
.attr('text-anchor', 'middle') |
|
.text(0); |
|
|
|
clock.on('tick', function(t) { |
|
var year = parseInt(data[t].fiscal_year.match(/FY (.*)+/)[1], 10); |
|
patternsSelection.selectAll('image') |
|
.attr('xlink:href', function(d) { |
|
var key = '_' + d.value + '_bills'; |
|
var range = [d.years[d.years.length-1], 'Present']; |
|
for (var i = d.years.length - 1; i > 0; i--) { |
|
if (range[0] <= year) break; |
|
range = [d.years[i - 1], d.years[i]]; |
|
} |
|
return bill_src(d.value, range); |
|
}); |
|
|
|
svg.selectAll('.bill rect').transition() |
|
.duration(250) |
|
.ease('circle-out') |
|
.attr('y', function(d) { |
|
var key = '_' + d.value + '_bills'; |
|
return y(numericize(data[t][key])); |
|
}) |
|
.attr('height', function(d) { |
|
var key = '_' + d.value + '_bills'; |
|
return innerHeight - y(numericize(data[t][key])); |
|
}); |
|
|
|
svg.selectAll('.bill .nb_bills').transition() |
|
.duration(250) |
|
.ease('circle-out') |
|
.tween('text', function(d) { |
|
var key = '_' + d.value + '_bills'; |
|
var i = d3.interpolate(numericize(this.textContent), numericize(data[t][key])); |
|
return function(t) { |
|
var rounded = Math.round(i(t) / 1e5) * 1e5; |
|
this.textContent = rounded.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
}; |
|
}) |
|
.attr('y', function(d) { |
|
var key = '_' + d.value + '_bills'; |
|
return y(numericize(data[t][key])); |
|
}); |
|
|
|
yearLabel.text(data[t].fiscal_year); |
|
|
|
}); |
|
clock.init().run(); |
|
|
|
} |
|
</script> |
|
</body> |
|
</html> |