xxxxxxxxxx<html lang='en-GB'><head></head><style> p { font-family: sans-serif; font-size: 14px; } h3 { font-family: sans-serif; font-size: 18px; } /*template styles*/ .gia-chart-wrapper { max-width: 620px; margin: 0 auto; } .key { width: 100%; } .keyblock { width: 16.66%; height: 20px; float: left; } .keyblock p { margin: 0; font-size: 13px; text-align: center; } .keyblock.text { margin-bottom: 20px; } .zero { background-color: #f6f6f6; } .one { background-color: #e0f4f9; } .twenty { background-color: #c2e9f2; } .hundred { background-color: #a0ddec; } .thousand { background-color: #7bd2e5; } .last { background-color: #4bc6df; } /*map styles */ .states { fill: #e2e2e2; stroke: #ffffff; stroke-linejoin: round; }</style><body> <main> <div class='gia-chart-wrapper'> <h3>1999</h3> <div class='gia-chart'></div> <div class='key'> <div class='keyblock zero'></div> <div class='keyblock one'></div> <div class='keyblock twenty'></div> <div class='keyblock hundred'></div> <div class='keyblock thousand'></div> <div class='keyblock last'></div> </div> <div class='key end'> <div class='keyblock text'><p>0</p></div> <div class='keyblock text'><p>1-20</p></div> <div class='keyblock text'><p>20-100</p></div> <div class='keyblock text'><p>100-1,000</p></div> <div class='keyblock text'><p>1,000-15,000</p></div> <div class='keyblock text'><p>> 15,000</p></div> </div> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script> <script> //Sets dimensions var margin = {top: 0, left: 5, bottom: 0, right: 5}, width = d3.select(".gia-chart").node().clientWidth, width = width - margin.left - margin.right, mapRatio = .65, height = width * mapRatio; //Tells the map what projection to use var projection = d3.geo.albersUsa() .scale(width *1.25) .translate([width / 2, height / 2]); //Tells the map how to draw the paths from the projection var path = d3.geo.path() .projection(projection); //Sets the color scale var color_domain = [1, 20, 100, 1000, 15000, 20000]; var ext_color_domain = [0, 1, 20, 100, 1000, 15000, 20000]; var color = d3.scale.threshold() .domain(color_domain) .range(['#f6f6f6','#e0f4f9','#c2e9f2','#a0ddec','#7bd2e5','#4bc6df']); //Appened svg to page var map = d3.select(".gia-chart").append("svg") .style('height', height + 'px') .style('width', width + 'px'); //Load the files queue() .defer(d3.json, "usmap.json") .defer(d3.csv, "states.csv") .await(ready); function ready(error, us, maptemplate) { if (error) throw error; //Pair data with state id var dataByFIPS = {}; maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = d.mw1999; }); //Pair state name with state id var stateByFIPS = {}; maptemplate.forEach(function(d) { stateByFIPS[d.FIPS] = d.state; }); //Append states map.append("g") .attr("class", "states") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .enter().append("path") .attr("d", path) .style("fill", function(d) { return color (dataByFIPS[d.id]); }); //RESPONSIVENESS d3.select(window).on('resize', resize); function resize() { var w = d3.select(".gia-chart").node().clientWidth; //Adjust things when the window size changes width = w - margin.left - margin.right; height = width * mapRatio; //Update projection var newProjection = d3.geo.albersUsa() .scale(width*1.25) .translate([width / 2, height / 2]); //Update path path = d3.geo.path() .projection(newProjection); //Resize the map container map .style('width', width + 'px') .style('height', height + 'px'); //Resize the map map.selectAll("path").attr('d', path); } //JS to create an interval (function, milliseconds) setInterval(updateMap, 1000); //Sets current year to the one before the one needed var currVal = 1998; //Increments the years by 1 function updateMap () { currVal += 1; //If the current value is last value, start over if ( currVal > 2016 ) { currVal = 1999 } //Update data to current year maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = d['mw'+currVal]; }); //Change fill color map .selectAll("path") .style("fill", function(d) { return color (dataByFIPS[d.id]); }); d3.select('h3') .text(currVal); return; } } </script></body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js