Created
February 8, 2019 17:23
-
-
Save JulienAssouline/33ff07871c8c40fbeafebc501703215e to your computer and use it in GitHub Desktop.
responsive map method 1
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"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> | |
| <style type="text/css"> | |
| /* No style rules here yet */ | |
| body,html{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: "Arial", sans-serif; | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .states { | |
| fill: #ccc; | |
| stroke: #fff; | |
| } | |
| </style> | |
| </head> | |
| <div id="wrapper"></div> | |
| <body> | |
| <script> | |
| var size = 700 | |
| // var width = w - margin.left - margin.right; | |
| // var height = h - margin.top - margin.bottom; | |
| let wrapper = d3.select("#wrapper") | |
| let svg = wrapper.append("svg") | |
| function redraw(){ | |
| const w = document.body.clientWidth | |
| const h = 600 | |
| const margin = { | |
| top: 10, | |
| bottom: 40, | |
| left: 0, | |
| right: 0 | |
| }; | |
| svg.attr("width", w) | |
| .attr("height", h) | |
| .append("g") | |
| .attr("transform", "translate(0" + margin.left + "," + margin.top + ")") | |
| var map_w = w > 850 ? 850 : w; | |
| const projection = d3.geoAlbersUsa() | |
| .scale(map_w) | |
| .translate([w/2, h/2]) | |
| const path = d3.geoPath() | |
| .projection(projection) | |
| d3.json("us_states.topojson", function(json){ | |
| d3.json("us_elections_data.json", function(error, data) { | |
| const polygons = topojson.feature(json, json.objects.us_states).features | |
| var states = svg.selectAll(".states") | |
| .data(polygons) | |
| var states_enter = states.enter() | |
| .append("path") | |
| .attr("class", "states") | |
| var states_update = states.merge(states_enter) | |
| states_update.attr("d", path) | |
| .style("stroke-width", 0.5) | |
| var circles = svg.selectAll(".circle") | |
| .data(data) | |
| d3.selectAll(".votes").remove() | |
| var circles_enter = circles.enter() | |
| .append("circle") | |
| .attr("class", "votes") | |
| var circles_update = circles.merge(circles_enter) | |
| circles_update.attr("cx", function(d) { | |
| var coords = projection([+d.x, +d.y]) | |
| return coords[0] | |
| }) | |
| .attr("cy", function(d) { | |
| var coords = projection([+d.x, +d.y]) | |
| return coords[1] | |
| }) | |
| .attr("r", 2) | |
| .style("fill", function(d) { | |
| if (d["04"] > 0.5) return "darkblue"; | |
| return "darkred"; | |
| }) | |
| console.log(w / 150) | |
| }) | |
| }) | |
| } // redraw | |
| redraw() | |
| d3.select(window).on("resize", redraw) | |
| // window.onresize = function(){ | |
| // redraw(); | |
| // } | |
| // window.addEventListener("resize", redraw) | |
| </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
| [{"12":0.461,"id":1001,"04":0.52,"08":0.478,"x":-86.641,"y":32.539},{"12":0.558,"id":1003,"04":0.539,"08":0.514,"x":-87.725,"y":30.743},{"12":-0.029,"id":1005,"04":0.099,"08":0.015,"x":-85.392,"y":31.877},{"12":0.468,"id":1007,"04":0.445,"08":0.458,"x":-87.128,"y":33},{"12":0.741,"id":1009,"04":0.625,"08":0.695,"x":-86.567,"y":33.983},{"12":-0.528,"id":1011,"04":-0.364,"08":-0.484,"x":-85.716,"y":32.106},{"12":0.075,"id":1013,"04":0.186,"08":0.134,"x":-86.685,"y":31.758},{"12":0.32,"id":1015,"04":0.326,"08":0.325,"x":-85.825,"y":33.776},{"12":0.051,"id":1017,"04":0.175,"08":0.085,"x":-85.39,"y":32.92},{"12":0.55,"id":1019,"04":0.319,"08":0.512,"x":-85.6,"y":34.176},{"12":0.603,"id":1021,"04":0.542,"08":0.578,"x":-86.718,"y":32.855},{"12":0.046,"id":1023,"04":0.082,"08":0.074,"x":-88.263,"y":32.023},{"12":0.083,"id":1025,"04":0.185,"08":0.116,"x":-87.827,"y":31.685},{"12":0.457,"id":1027,"04":0.415,"08":0.473,"x":-85.862,"y":33.275},{"12":0.682,"id":1029,"04":0.514,"08":0.624,"x":-85.52,"y":33.676},{"12":0.494,"id":1031,"04":0.485,"08":0.489,"x":-85.988,"y":31.411},{"12":0.204,"id":1033,"04":0.108,"08":0.203,"x":-87.803,"y":34.702},{"12":-0.017,"id":1035,"04":0.092,"08":0.006,"x":-86.991,"y":31.435},{"12":0.16,"id":1037,"04":0.17,"08":0.175,"x":-86.247,"y":32.941},{"12":0.583,"id":1039,"04":0.526,"08":0.583,"x":-86.449,"y":31.251},{"12":0.355,"id":1041,"04":0.378,"08":0.378,"x":-86.315,"y":31.738},{"12":0.695,"id":1043,"04":0.533,"08":0.652,"x":-86.865,"y":34.136},{"12":0.422,"id":1045,"04":0.501,"08":0.446,"x":-85.613,"y":31.439},{"12":-0.397,"id":1047,"04":-0.207,"08":-0.345,"x":-87.104,"y":32.332},{"12":0.549,"id":1049,"04":0.406,"08":0.512,"x":-85.803,"y":34.463},{"12":0.488,"id":1051,"04":0.543,"08":0.509,"x":-86.15,"y":32.6},{"12":0.255,"id":1053,"04":0.379,"08":0.285,"x":-87.16,"y":31.132},{"12":0.384,"id":1055,"04":0.273,"08":0.382,"x":-86.037,"y":34.049},{"12":0.535,"id":1057,"04":0.391,"08":0.489,"x":-87.738,"y":33.726},{"12":0.405,"id":1059,"04":0.259,"08":0.392,"x":-87.843,"y":34.445},{"12":0.63,"id":1061,"04":0.592,"08":0.625,"x":-85.834,"y":31.1},{"12":-0.697,"id":1063,"04":-0.591,"08":-0.666,"x":-87.952,"y":32.86},{"12":-0.255,"id":1065,"04":-0.17,"08":-0.217,"x":-87.627,"y":32.77},{"12":0.294,"id":1067,"04":0.33,"08":0.297,"x":-85.24,"y":31.531},{"12":0.403,"id":1069,"04":0.49,"08":0.408,"x":-85.296,"y":31.164},{"12":0.419,"id":1071,"04":0.143,"08":0.369,"x":-85.995,"y":34.785},{"12":-0.061,"id":1073,"04":0.09,"08":-0.051,"x":-86.897,"y":33.558},{"12":0.532,"id":1075,"04":0.427,"08":0.538,"x":-88.095,"y":33.783},{"12":0.309,"id":1077,"04":0.203,"08":0.282,"x":-87.649,"y":34.907},{"12":0.27,"id":1079,"04":0.112,"08":0.28,"x":-87.309,"y":34.527},{"12":0.199,"id":1081,"04":0.263,"08":0.198,"x":-85.356,"y":32.606},{"12":0.436,"id":1083,"04":0.364,"08":0.419,"x":-86.98,"y":34.816},{"12":-0.531,"id":1085,"04":-0.406,"08":-0.5,"x":-86.649,"y":32.161},{"12":-0.744,"id":1087,"04":-0.662,"08":-0.74,"x":-85.691,"y":32.393},{"12":0.196,"id":1089,"04":0.187,"08":0.149,"x":-86.547,"y":34.765},{"12":-0.072,"id":1091,"04":0.021,"08":-0.036,"x":-87.788,"y":32.253},{"12":0.615,"id":1093,"04":0.402,"08":0.561,"x":-87.885,"y":34.141},{"12":0.601,"id":1095,"04":0.455,"08":0.563,"x":-86.303,"y":34.372},{"12":0.092,"id":1097,"04":0.18,"08":0.087,"x":-88.21,"y":30.8},{"12":0.078,"id":1099,"04":0.227,"08":0.102,"x":-87.362,"y":31.577},{"12":-0.243,"id":1101,"04":-0.012,"08":-0.192,"x":-86.207,"y":32.228},{"12":0.445,"id":1103,"04":0.39,"08":0.438,"x":-86.852,"y":34.457},{"12":-0.5,"id":1105,"04":-0.367,"08":-0.451,"x":-87.293,"y":32.64},{"12":0.07,"id":1107,"04":0.137,"08":0.083,"x":-88.089,"y":33.286},{"12":0.137,"id":1109,"04":0.265,"08":0.152,"x":-85.941,"y":31.811},{"12":0.399,"id":1111,"04":0.368,"08":0.396,"x":-85.458,"y":33.301},{"12":-0.118,"id":1113,"04":-0.002,"08":-0.073,"x":-85.181,"y":32.295},{"12":0.661,"id":1115,"04":0.619,"08":0.632,"x":-86.315,"y":33.716},{"12":0.556,"id":1117,"04":0.616,"08":0.534,"x":-86.661,"y":33.272},{"12":-0.546,"id":1119,"04":-0.411,"08":-0.503,"x":-88.2,"y":32.59},{"12":0.16,"id":1121,"04":0.233,"08":0.185,"x":-86.165,"y":33.386},{"12":0.324,"id":1123,"04":0.387,"08":0.365,"x":-85.796,"y":32.869},{"12":0.175,"id":1125,"04":0.235,"08":0.16,"x":-87.52,"y":33.298},{"12":0.529,"id":1127,"04":0.358,"08":0.464,"x":-87.297,"y":33.81},{"12":0.317,"id":1129,"04":0.232,"08":0.295,"x":-88.206,"y":31.413},{"12":-0.487,"id":1131,"04":-0.353,"08":-0.423,"x":-87.308,"y":31.998},{"12":0.723,"id":1133,"04":0.565,"08":0.633,"x":-87.373,"y":34.156},{"12":-0.158,"id":4001,"04":-0.3,"08":-0.281,"x":-109.487,"y":35.395},{"12":0.317,"id":4003,"04":0.203,"08":0.205,"x":-109.751,"y":31.89},{"12":-0.146,"id":4005,"04":-0.128,"08":-0.169,"x":-111.76,"y":35.841},{"12":0.267,"id":4007,"04":0.193,"08":0.277,"x":-110.807,"y":33.806},{"12":0.372,"id":4009,"04":0.399,"08":0.405,"x":-109.889,"y":32.941},{"12":0.096,"id":4011,"04":0.246,"08":0.187,"x":-109.244,"y":33.227},{"12":0.322,"id":4012,"04":0.259,"08":0.283,"x":-113.978,"y":33.733},{"12":0.139,"id":4013,"04":0.146,"08":0.105,"x":-112.488,"y":33.36},{"12":0.426,"id":4015,"04":0.281,"08":0.327,"x":-113.75,"y":35.704},{"12":0.198,"id":4017,"04":0.076,"08":0.116,"x":-110.314,"y":35.402},{"12":-0.043,"id":4019,"04":-0.06,"08":-0.06,"x":-111.791,"y":32.105},{"12":0.181,"id":4021,"04":0.151,"08":0.144,"x":-111.348,"y":32.914},{"12":-0.36,"id":4023,"04":-0.192,"08":-0.312,"x":-110.846,"y":31.53},{"12":0.315,"id":4025,"04":0.232,"08":0.243,"x":-112.547,"y":34.607},{"12":0.189,"id":4027,"04":0.16,"08":0.137,"x":-113.91,"y":32.774},{"12":0.222,"id":5001,"04":0.098,"08":0.224,"x":-91.368,"y":34.291},{"12":0.254,"id":5003,"04":0.081,"08":0.281,"x":-91.76,"y":33.195},{"12":0.44,"id":5005,"04":0.216,"08":0.316,"x":-92.333,"y":36.284},{"12":0.404,"id":5007,"04":0.379,"08":0.365,"x":-94.249,"y":36.336},{"12":0.482,"id":5009,"04":0.349,"08":0.397,"x":-93.087,"y":36.307},{"12":0.185,"id":5011,"04":-0.046,"08":0.144,"x":-92.152,"y":33.471},{"12":0.366,"id":5013,"04":0.174,"08":0.348,"x":-92.495,"y":33.562},{"12":0,"id":5015,"04":0.193,"08":0.181,"x":-93.533,"y":36.337},{"12":0,"id":5017,"04":-0.267,"08":-0.177,"x":-91.288,"y":33.273},{"12":0.064,"id":5019,"04":-0.092,"08":0.037,"x":-93.171,"y":34.057},{"12":0.291,"id":5021,"04":-0.083,"08":0.143,"x":-90.409,"y":36.365},{"12":0.521,"id":5023,"04":0.22,"08":0.442,"x":-92.023,"y":35.54},{"12":0.453,"id":5025,"04":0.16,"08":0.439,"x":-92.177,"y":33.905},{"12":0.236,"id":5027,"04":0.164,"08":0.241,"x":-93.216,"y":33.216},{"12":0.195,"id":5029,"04":0.003,"08":0.189,"x":-92.696,"y":35.267},{"12":0.311,"id":5031,"04":0.072,"08":0.245,"x":-90.635,"y":35.836},{"12":0.491,"id":5033,"04":0.325,"08":0.46,"x":-94.239,"y":35.591},{"12":-0.187,"id":5035,"04":-0.088,"08":-0.147,"x":-90.303,"y":35.213},{"12":0.298,"id":5037,"04":0.103,"08":0.254,"x":-90.769,"y":35.295},{"12":0.106,"id":5039,"04":0.009,"08":0.086,"x":-92.65,"y":33.976},{"12":-0.129,"id":5041,"04":-0.241,"08":-0.122,"x":-91.245,"y":33.837},{"12":0.19,"id":5043,"04":0.05,"08":0.191,"x":-91.71,"y":33.589},{"12":0.317,"id":5045,"04":0.19,"08":0.253,"x":-92.331,"y":35.151},{"12":0.444,"id":5047,"04":0.161,"08":0.393,"x":-93.886,"y":35.515},{"12":0.331,"id":5049,"04":0.031,"08":0.189,"x":-91.819,"y":36.378},{"12":0.299,"id":5051,"04":0.092,"08":0.25,"x":-93.144,"y":34.58},{"12":0.519,"id":5053,"04":0.248,"08":0.509,"x":-92.417,"y":34.293},{"12":0.368,"id":5055,"04":0.048,"08":0.297,"x":-90.557,"y":36.124},{"12":0.263,"id":5057,"04":-0.032,"08":0.191,"x":-93.661,"y":33.739},{"12":0.29,"id":5059,"04":0.005,"08":0.244,"x":-92.94,"y":34.323},{"12":0.317,"id":5061,"04":0.115,"08":0.25,"x":-93.988,"y":34.091},{"12":0.439,"id":5063,"04":0.153,"08":0.371,"x":-91.567,"y":35.742},{"12":0.378,"id":5065,"04":0.045,"08":0.268,"x":-91.911,"y":36.094},{"12":0.182,"id":5067,"04":-0.143,"08":0.163,"x":-91.214,"y":35.602},{"12":-0.298,"id":5069,"04":-0.31,"08":-0.263,"x":-91.925,"y":34.273},{"12":0.278,"id":5071,"04":0.086,"08":0.231,"x":-93.452,"y":35.572},{"12":0.184,"id":5073,"04":0.012,"08":0.19,"x":-93.599,"y":33.244},{"12":0.316,"id":5075,"04":-0.09,"08":0.209,"x":-91.109,"y":36.046},{"12":-0.242,"id":5077,"04":-0.259,"08":-0.215,"x":-90.777,"y":34.785},{"12":0.208,"id":5079,"04":-0.055,"08":0.182,"x":-91.724,"y":33.956},{"12":0.363,"id":5081,"04":-0.019,"08":0.29,"x":-94.224,"y":33.704},{"12":0.419,"id":5083,"04":0.201,"08":0.388,"x":-93.709,"y":35.219},{"12":0.525,"id":5085,"04":0.315,"08":0.475,"x":-91.886,"y":34.758},{"12":0.321,"id":5087,"04":0.227,"08":0.289,"x":-93.718,"y":36.013},{"12":0.391,"id":5089,"04":0.222,"08":0.299,"x":-92.679,"y":36.268},{"12":0.398,"id":5091,"04":0.157,"08":0.335,"x":-93.886,"y":33.315},{"12":0.012,"id":5093,"04":-0.104,"08":0.022,"x":-90.053,"y":35.762},{"12":0.001,"id":5095,"04":-0.126,"08":0.04,"x":-91.197,"y":34.678},{"12":0.426,"id":5097,"04":0.213,"08":0.351,"x":-93.652,"y":34.545},{"12":0.202,"id":5099,"04":0.017,"08":0.162,"x":-93.301,"y":33.669},{"12":0,"id":5101,"04":0.291,"08":0.355,"x":-93.211,"y":35.923},{"12":0.086,"id":5103,"04":0.015,"08":0.109,"x":-92.876,"y":33.6},{"12":0.354,"id":5105,"04":0.116,"08":0.325,"x":-92.926,"y":34.95},{"12":-0.328,"id":5107,"04":-0.28,"08":-0.29,"x":-90.843,"y":34.438},{"12":0.527,"id":5109,"04":0.209,"08":0.413,"x":-93.649,"y":34.168},{"12":0.342,"id":5111,"04":-0.067,"08":0.273,"x":-90.664,"y":35.576},{"12":0.569,"id":5113,"04":0.349,"08":0.458,"x":-94.219,"y":34.491},{"12":0.474,"id":5115,"04":0.312,"08":0.433,"x":-93.027,"y":35.451},{"12":0.406,"id":5117,"04":0.129,"08":0.348,"x":-91.548,"y":34.835},{"12":-0.114,"id":5119,"04":-0.108,"08":-0.116,"x":-92.308,"y":34.775},{"12":0.283,"id":5121,"04":-0.038,"08":0.181,"x":-91.032,"y":36.34},{"12":-0.17,"id":5123,"04":-0.195,"08":-0.165,"x":-90.743,"y":35.023},{"12":0.427,"id":5125,"04":0.272,"08":0.41,"x":-92.669,"y":34.649},{"12":0.477,"id":5127,"04":0.258,"08":0.435,"x":-94.055,"y":34.868},{"12":0.511,"id":5129,"04":0.299,"08":0.459,"x":-92.696,"y":35.915}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment