Block showing how to place text on topojson lines in d3.js v4. Built off of one of Mike Bostock's blocks on displaying arcs (Snowden's Route I think). Whitehorse, in the Yukon, Canada, is shown on the map with the small circle.
Last active
October 23, 2019 22:43
-
-
Save Andrew-Reid/18c12c2f8f6d30f61295c4fbbb146cc0 to your computer and use it in GitHub Desktop.
Text Along Topojson Features
This file contains hidden or 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> | |
| .graticule { | |
| fill: none; | |
| stroke: #ddd; | |
| stroke-width: 0.5px; | |
| stroke-opacity: 0.5; | |
| } | |
| .land { | |
| fill: #a8ddb5; | |
| } | |
| .boundary { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: 0.5px; | |
| } | |
| .buffer-text { | |
| font-size: 12px; | |
| font-family: Arial; | |
| color: #777; | |
| } | |
| .circle { | |
| fill: white; | |
| stroke: #0868ac; | |
| stroke-width: 2; | |
| } | |
| .buffer { | |
| fill:none; | |
| stroke-width: 1; | |
| stroke: #bbb; | |
| } | |
| </style> | |
| <body> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var points = { | |
| Whitehorse: [-135.1,60.7] | |
| }; | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"); | |
| var projection = d3.geoKavrayskiy7() | |
| .scale(170) | |
| .rotate([-10, 0]) | |
| .translate([width / 2, height / 2]) | |
| .precision(.1); | |
| /* | |
| // Alternatively: | |
| var projection = d3.geoMercator().scale(100) | |
| ; | |
| */ | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var g1 = svg.append("g"); | |
| var g2 = svg.append("g"); | |
| var g3 = svg.append("g"); | |
| // Add globe outline and graticule | |
| g1.append("path") | |
| .datum({type: "Sphere"}) | |
| .attr("class", "sphere") | |
| .attr("d", path) | |
| .attr("fill", "#43a2ca") | |
| .attr("stroke", "black"); | |
| g1.append("path") | |
| .datum(d3.geoGraticule()) | |
| .attr("class", "graticule") | |
| .attr("d", path); | |
| // Add world map | |
| d3.json("world-50m.json", function(error, world) { | |
| if (error) throw error; | |
| g2.insert("path", ".land") | |
| .datum(topojson.feature(world, world.objects.land)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| g2.insert("path", ".boundary") | |
| .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) | |
| .attr("class", "boundary") | |
| .attr("d", path); | |
| var point = g2.append("g") | |
| .attr("class", "points") | |
| .selectAll("g") | |
| .data(d3.entries(points)) | |
| .enter().append("g") | |
| .attr("transform", function(d) { return "translate(" + projection(d.value) + ")"; }); | |
| point.append("circle") | |
| .attr("r", 5) | |
| .attr("class","circle") | |
| ; | |
| }); | |
| // Add the buffer: | |
| d3.json("buffer.json", function(error, buffer) { | |
| // Add the buffer lines | |
| g3.selectAll("path") | |
| .data(topojson.feature(buffer, buffer.objects.buffer).features) | |
| .enter().append("path") | |
| .attr("d", path) | |
| .attr("class", "buffer") | |
| .attr("id",function(d) { return "b" + d.properties.Distance; }); | |
| // Add the buffer text | |
| g3.selectAll(".buffer-text") | |
| .data(topojson.feature(buffer, buffer.objects.buffer).features) | |
| .enter() | |
| .append("text") | |
| .attr("class","buffer-text") | |
| .append("textPath") | |
| .attr("xlink:href", function(d) { return "#b" + d.properties.Distance; }) | |
| .text(function(d) { return d.properties.Distance/1000 + ",000 km from Whitehorse"; }) | |
| .attr("startOffset", "50%") | |
| .style("text-anchor","middle"); | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment