Created
April 12, 2017 15:29
-
-
Save jadiehm/5b7115f7735256086cfefb009832bf6a to your computer and use it in GitHub Desktop.
Bubble map with button transition
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | type | count | latitude | longitude | |
|---|---|---|---|---|---|
| 1/4/15 | first | 3 | 32.776664 | -96.796988 | |
| 1/9/15 | first | 4 | 37.774929 | -122.419416 | |
| 1/10/15 | first | 3 | 46.732387 | -117.000165 | |
| 1/24/15 | first | 3 | 41.252363 | -95.997988 | |
| 1/24/15 | first | 4 | 40.728224 | -73.794852 | |
| 1/29/15 | first | 5 | 33.069857 | -85.023346 | |
| 2/4/15 | first | 4 | 36.280694 | -80.35922 | |
| 2/5/15 | first | 3 | 41.432307 | -81.510266 | |
| 2/7/15 | first | 5 | 33.751497 | -84.747714 | |
| 2/9/15 | first | 3 | 28.244177 | -82.719267 | |
| 2/22/15 | first | 3 | 34.647889 | -83.549657 | |
| 2/22/15 | first | 4 | 31.117119 | -97.727796 | |
| 2/25/15 | first | 3 | 29.760427 | -95.369803 | |
| 2/27/15 | first | 8 | 37.203383 | -91.87654 | |
| 2/28/15 | first | 4 | 35.896824 | -77.535805 | |
| 2/28/15 | first | 3 | 38.951705 | -92.334072 | |
| 3/3/15 | first | 3 | 36.169941 | -115.13983 | |
| 3/15/15 | first | 3 | 31.131869 | -85.313622 | |
| 3/17/15 | first | 3 | 37.957702 | -121.29078 | |
| 3/24/15 | first | 4 | 39.768403 | -86.158068 | |
| 3/30/15 | first | 4 | 36.153982 | -95.992775 | |
| 4/16/15 | first | 5 | 33.448377 | -112.074037 | |
| 5/3/15 | first | 4 | 44.202208 | -88.446497 | |
| 5/13/15 | first | 4 | 61.218056 | -149.900278 | |
| 5/17/15 | first | 9 | 31.549333 | -97.14667 | |
| 5/31/15 | first | 3 | 41.49932 | -81.694361 | |
| 6/3/15 | first | 3 | 40.753988 | -73.360398 | |
| 6/17/15 | first | 9 | 32.776475 | -79.931051 | |
| 6/21/15 | first | 4 | 41.161611 | -112.026331 | |
| 6/23/15 | first | 3 | 30.273532 | -91.899284 | |
| 6/27/15 | first | 4 | 26.627628 | -80.13539 | |
| 7/5/15 | first | 4 | 34.924867 | -81.025078 | |
| 7/7/15 | first | 3 | 39.290385 | -76.612189 | |
| 7/12/15 | first | 3 | 30.458283 | -91.14032 | |
| 7/15/15 | first | 4 | 33.322662 | -80.413704 | |
| 7/16/15 | first | 5 | 35.04563 | -85.30968 | |
| 7/23/15 | first | 3 | 30.22409 | -92.019843 | |
| 8/7/15 | first | 4 | 44.197006 | -72.502049 | |
| 8/8/15 | first | 8 | 29.760427 | -95.369803 | |
| 8/19/15 | first | 3 | 43.16103 | -77.610922 | |
| 8/26/15 | first | 3 | 37.181254 | -79.617254 | |
| 8/29/15 | first | 3 | 36.595106 | -82.188744 | |
| 9/1/15 | first | 4 | 40.304278 | -73.99236 | |
| 9/8/15 | first | 5 | 44.977753 | -93.265011 | |
| 9/8/15 | first | 4 | 47.884745 | -120.156701 | |
| 9/13/15 | first | 4 | 30.588243 | -91.168163 | |
| 9/17/15 | first | 6 | 43.38694 | -98.84453 | |
| 10/1/15 | first | 10 | 43.216505 | -123.341738 | |
| 10/31/15 | first | 4 | 38.833882 | -104.821363 | |
| 11/1/15 | first | 4 | 34.651773 | -82.783751 | |
| 11/4/15 | first | 4 | 44.540222 | -69.721995 | |
| 11/13/15 | first | 4 | 30.332184 | -81.655651 | |
| 11/15/15 | first | 6 | 31.776932 | -95.645795 | |
| 11/16/15 | first | 3 | 34.58037 | -87.33641 | |
| 11/17/15 | first | 4 | 36.610333 | -88.314761 | |
| 12/2/15 | first | 14 | 34.108345 | -117.289765 | |
| 1/4/15 | second | 1 | 32.776664 | -96.796988 | |
| 1/9/15 | second | 2 | 37.774929 | -122.419416 | |
| 1/10/15 | second | 2 | 46.732387 | -117.000165 | |
| 1/24/15 | second | 1 | 41.252363 | -95.997988 | |
| 1/24/15 | second | 1 | 40.728224 | -73.794852 | |
| 1/29/15 | second | 1 | 33.069857 | -85.023346 | |
| 2/4/15 | second | 2 | 36.280694 | -80.35922 | |
| 2/5/15 | second | 4 | 41.432307 | -81.510266 | |
| 2/7/15 | second | 2 | 33.751497 | -84.747714 | |
| 2/9/15 | second | 5 | 28.244177 | -82.719267 | |
| 2/22/15 | second | 4 | 34.647889 | -83.549657 | |
| 2/22/15 | second | 1 | 31.117119 | -97.727796 | |
| 2/25/15 | second | 1 | 29.760427 | -95.369803 | |
| 2/27/15 | second | 2 | 37.203383 | -91.87654 | |
| 2/28/15 | second | 6 | 35.896824 | -77.535805 | |
| 2/28/15 | second | 2 | 38.951705 | -92.334072 | |
| 3/3/15 | second | 1 | 36.169941 | -115.13983 | |
| 3/15/15 | second | 1 | 31.131869 | -85.313622 | |
| 3/17/15 | second | 2 | 37.957702 | -121.29078 | |
| 3/24/15 | second | 6 | 39.768403 | -86.158068 | |
| 3/30/15 | second | 5 | 36.153982 | -95.992775 | |
| 4/16/15 | second | 3 | 33.448377 | -112.074037 | |
| 5/3/15 | second | 2 | 44.202208 | -88.446497 | |
| 5/13/15 | second | 1 | 61.218056 | -149.900278 | |
| 5/17/15 | second | 6 | 31.549333 | -97.14667 | |
| 5/31/15 | second | 2 | 41.49932 | -81.694361 | |
| 6/3/15 | second | 1 | 40.753988 | -73.360398 | |
| 6/17/15 | second | 1 | 32.776475 | -79.931051 | |
| 6/21/15 | second | 2 | 41.161611 | -112.026331 | |
| 6/23/15 | second | 2 | 30.273532 | -91.899284 | |
| 6/27/15 | second | 6 | 26.627628 | -80.13539 | |
| 7/5/15 | second | 3 | 34.924867 | -81.025078 | |
| 7/7/15 | second | 2 | 39.290385 | -76.612189 | |
| 7/12/15 | second | 1 | 30.458283 | -91.14032 | |
| 7/15/15 | second | 2 | 33.322662 | -80.413704 | |
| 7/16/15 | second | 6 | 35.04563 | -85.30968 | |
| 7/23/15 | second | 2 | 30.22409 | -92.019843 | |
| 8/7/15 | second | 1 | 44.197006 | -72.502049 | |
| 8/8/15 | second | 6 | 29.760427 | -95.369803 | |
| 8/19/15 | second | 1 | 43.16103 | -77.610922 | |
| 8/26/15 | second | 2 | 37.181254 | -79.617254 | |
| 8/29/15 | second | 2 | 36.595106 | -82.188744 | |
| 9/1/15 | second | 5 | 40.304278 | -73.99236 | |
| 9/8/15 | second | 4 | 44.977753 | -93.265011 | |
| 9/8/15 | second | 3 | 47.884745 | -120.156701 | |
| 9/13/15 | second | 2 | 30.588243 | -91.168163 | |
| 9/17/15 | second | 1 | 43.38694 | -98.84453 | |
| 10/1/15 | second | 6 | 43.216505 | -123.341738 | |
| 10/31/15 | second | 2 | 38.833882 | -104.821363 | |
| 11/1/15 | second | 2 | 34.651773 | -82.783751 | |
| 11/4/15 | second | 2 | 44.540222 | -69.721995 | |
| 11/13/15 | second | 1 | 30.332184 | -81.655651 | |
| 11/15/15 | second | 3 | 31.776932 | -95.645795 | |
| 11/16/15 | second | 5 | 34.58037 | -87.33641 | |
| 11/17/15 | second | 5 | 36.610333 | -88.314761 | |
| 12/2/15 | second | 6 | 34.108345 | -117.289765 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment