An example using topojson.mesh() to distinguish between municipal (white) and provincial (black) boundaries.
An arc is stroked as a provincial boundary (black) if
a !== b) AND they do not have the same province name (i.e. a.properties.provincie !== b.properties.provincie)a === b). This is the case for all external, national boundaries.| <html> | |
| <head> | |
| <title>TWIAV - Research & Consultancy</title> | |
| <link rel="SHORTCUT ICON" href="http://twiav.nl/img/twiav.ico"/> | |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> | |
| <style> | |
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| h1 { | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| h2 { | |
| font-size: 14px; | |
| } | |
| p { | |
| font-size: 12px; | |
| } | |
| .municipality { | |
| fill: #B0C4DE; | |
| stroke: #FFF; | |
| } | |
| .province { | |
| fill: none; | |
| stroke: #000; | |
| } | |
| .selected { | |
| fill: #4863A0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>Municipalities in The Netherlands</h1> | |
| <h2>Status: January 1st, 2015</h2> | |
| <p>(hover for name and province)</p> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 733, | |
| height = 600; | |
| var projection = d3.geo.mercator() | |
| .scale(7133) | |
| .translate([width / 2, height / 2]) | |
| .center([5.4, 52.2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("nlgemeenten2015.json", function(error, nlgemeenten2015) { | |
| if (error) return console.error(error); | |
| console.log(nlgemeenten2015); | |
| var gemeenten = topojson.feature(nlgemeenten2015, nlgemeenten2015.objects.gemeenten); | |
| svg.append("g") | |
| .attr("class", "municipality") | |
| .selectAll("path") | |
| .data(gemeenten.features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("title", function(d) { return d.properties.gemeente + "\n(" + d.properties.provincie + ")"; }) | |
| .on("mouseover", function(d) { | |
| d3.select(this) | |
| .attr("class", "selected"); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this) | |
| .transition() | |
| .attr("class", "municipality") | |
| .duration(250) | |
| }); | |
| svg.append("path") | |
| .datum(topojson.mesh(nlgemeenten2015, nlgemeenten2015.objects.gemeenten, function(a, b) { return a !== b && a.properties.provincie !== b.properties.provincie || a === b; })) | |
| .attr("d", path) | |
| .attr("class", "province"); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> | |
| </body> | |
| <html> |