xxxxxxxxxx<html lang='en-GB'><head></head><style> p { font-family: sans-serif; font-size: 14px; } /*template styles*/ .gia-chart-wrapper { max-width: 620px; margin: 0 auto; } /*map styles */ .states { fill: #e2e2e2; stroke: #ffffff; stroke-linejoin: round; } .circle { fill: #4bc6df; opacity: 0.5; } button { background-color: #ffffff; border: 1px solid #dcdcdc; border-radius: 15px; color: #333333; padding: 5px 8px; cursor: pointer; display: inline-block; margin-right: 10px; text-align: center; text-decoration: none; font-size: 12px; line-height: 20px; font-family: sans-serif; } button:focus { outline: 0; } .active { background-color: #333333; border: 1px solid #333333; color: #ffffff; }</style><body> <main> <div class='gia-chart-wrapper'> <div class='gia-key'></div> <div class='gia-chart'></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: 5, 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 = [10, 20, 30, 40, 50, 100]; var ext_color_domain = [0, 10, 20, 30, 40, 50, 100]; var color = d3.scale.threshold() .domain(color_domain) .range(['#ecf8fb', '#d9f1f7', '#c5eaf3', '#b1e2ef', '#9cdbeb', '#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, "points.csv") .await(ready); function ready(error, us, points) { if (error) throw error; //Organizes buttons data var types = points.map(function(d) { return d.type;}); var uniq = d3.set(types).values(); //Buttons var button = d3.select(".gia-key").selectAll("button") .data(uniq) .enter() .append("button") .attr("class", function (d) { if ( d === "first" ) { return 'active'; } else { return 'not-active'; } }) .text(function(d) {return d;}) .on("click", function(d) { updateChartForType(d); d3.select(".active").classed("active", false); d3.select(this).classed("active", true); }); //Filters the data initialType = points.filter(function(d) { return d.type === "first";}); //Append states map.append("g") .attr("class", "states") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .enter().append("path") .attr("d", path); //Append circles var circle = map.selectAll("circle") .data(initialType) .enter() .append("circle") .attr("class", "circle") .attr("cx", function(d) { return projection([d.longitude, d.latitude])[0];}) .attr("cy", function(d) { return projection([d.longitude, d.latitude])[1];}) .attr("r", function(d) { return Math.sqrt(d.count)*7;}) //Update chart on click function updateChartForType(typeId) { var typeData = points.filter(function(d) { return d.type === typeId;}); console.log(typeData); var circle = map.selectAll("circle") .data(typeData); circle.exit().remove(); circle.enter().append("circle") .attr("r", 0); circle.transition() .duration(500) .attr("cx", function(d) { return projection([d.longitude, d.latitude])[0];}) .attr("cy", function(d) { return projection([d.longitude, d.latitude])[1];}) .attr("r", function(d) { return Math.sqrt(d.count)*7;}) } //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); //Update circles map.selectAll("circle") .attr("cx", function(d) { return newProjection([d.longitude, d.latitude])[0]; }) .attr("cy", function(d) { return newProjection([d.longitude, d.latitude])[1]; }) //Resize the map container map .style('width', width + 'px') .style('height', height + 'px'); //Resize the map map.selectAll("path").attr('d', path); } } </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