D3 Examples - North Carolina map with county name annotations

North Carolina map with county name annotations

Simeple example of using d3-annotation to annotate a map with county names. There are a few ways to 'save' this map once you are done.

Open the console (in Chrome) and enter makeAnnotations.json(). This will copy the annotation coordinates to your clipboard. You can then paste these into your code, replacing the dynamically created annotations, e.g.: d3.annotation().type(d3.annotationLabel).annotations(newStaticAnnotations).editMode(true);

You could use something like SVG Crowbar: https://nytimes.github.io/svg-crowbar/

You could just open the dev tools and copy the outer html for the svg element.

If you don't want the connector to appear, just move the subject circle first and align the corresponding label circle over the subject circle. The connector will disappear.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8" />
    <style>
        .annotation-note-label {
            font-size: 10px;
            fill: #000;
        }
​
    </style>
</head>
​
<body>
    <svg width="960" height="500"></svg>
    <button id="editMode">Toggle Edit Mode</button>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js"></script>
    <script>
​
        var svg = d3.select("svg");
​
        //create projection for map and pass that to the path generator
        var projection = d3
            .geoAlbers()
            .rotate([0, 62, 0]);
​
        var path = d3.geoPath(projection);
​
​
        d3.json("ncmap.json", function (error, mapData) {
            if (error) throw error;
​
            var projection = d3
                .geoAlbers()
                .rotate([0, 62, 0])
                .fitSize([d3.select("svg").attr("width")-50, d3.select("svg").attr("height")], mapData);         
​
                var path = d3.geoPath(projection);
​
            svg
                .append("g")
                .selectAll("path")
                .data(mapData.features)
                .enter()
                .append("path")
                .attr("d", path)
                .attr("class", "county")
                .attr("id", function (d) {
                    return d.properties.county;
                })
                .attr("fill", "#fff")
                .style("stroke", "#d3d3d3")
                .attr("transform", "translate(25, 0)");
​
​
​
​
            // make initial annotation estimations and start annotations tool
            var annotations = mapData.features.map(function (el) {
​
                return {
                    note: { label: el.properties.county, orientation: "topBottom"},
                    x: path.centroid(el.geometry)[0],
                    y: path.centroid(el.geometry)[1] - 10
                }
            });
​
            window.makeAnnotations = d3.annotation()
                .type(d3.annotationLabel)
                .annotations(annotations)
                // .disable(["connector", "subject"])
                .editMode(true);
​
            svg.append("g")
                .attr("class", "annotation-group")
                .attr("transform", "translate(25, 0)")
                .call(makeAnnotations);
​
            document.getElementById("editMode").addEventListener("click", function () {
                makeAnnotations.editMode(!makeAnnotations.editMode()).update();
            });
        });
​
    </script>
​
</body>
​
</html>
    