A's color themed with some comments to explain a little bit of what's going on.
Warning this links to an older version of topojson that does things a little different and makes it hard to color by scale depending on neighbors in my next example.
Last active
August 29, 2015 14:02
-
-
Save mpmckenna8/a16fdbf605b9471c026a to your computer and use it in GitHub Desktop.
d3 topojson simple CA Congressional Assembly Districts
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> | |
| <meta charset="utf-8"> | |
| <style> | |
| /* CSS goes here. */ | |
| .casubun { fill: #003831; } | |
| .bords{ | |
| fill:none; | |
| stroke-width:2px; | |
| stroke:white; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"> | |
| //this is an old topojson version so its a little differently used | |
| </script> | |
| <script> | |
| /* JavaScript goes here. */ | |
| //choose dimensions of my svg thing | |
| var width = 960, | |
| height = 600; | |
| //Choosing mercator because that's what I made the data in and also scale and center setting | |
| var projection = d3.geo.mercator() | |
| .scale(2000) | |
| .translate([width / 2, height / 2]) | |
| .center([-120,36]) | |
| ; | |
| // So now when I call path on jam it will use this projection and stuff | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // Appending the actual SVG to the body of the page w/ height width | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("/mpmckenna8/raw/60910c22b47777967704/calAss1.json", function(cali) { | |
| svg.selectAll(".casubun") | |
| .data(topojson.object(cali, cali.objects.assemD2011).geometries) | |
| .enter().append("path") | |
| .attr("class", function(d) { return "casubun"; }) | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(topojson.mesh(cali,cali.objects.assemD2011, function(a,b){ | |
| return a; | |
| })) | |
| .attr("d",path) | |
| .attr("class", "bords"); | |
| }); | |
| d3.select("body") | |
| .transition() | |
| .style("background-color", "#FFD800"); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment