Demonstrates the beginnings of a D3 plugin with dedicated components for dynamic visualization.
Sourced from:
Keep in mind that the bill faces displayed are merely the most recently released design and do not necessarily correspond with what bills would actually be printed in any given year. For example, the uptick in $100 bills produced in recent years is most certainly a new design that is due to be released on October 8, 2013 after years of delays.
| <!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> |