Annotate US states with d3-annotation

Simeple example of using d3-annotation to annotate a map with state postal codes. 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);
      ```
One caveat is that this will not save the 'disable' settings, so some states will show a connector when you would rather not see one. You can manually add these disable settings to the static annotation file, if you like.
2. You could use something like SVG Crowbar: https://nytimes.github.io/svg-crowbar/
3. You could just open the console and copy the outer html for the svg element.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<style>
		.annotation-note-label {
			font-size: 18px;
			fill: #000;
		}

path {
            fill: #fff;
            stroke: #000;
        }
	</style>
</head>
<body>
<svg width="1000" height="600"></svg>
<button id="editMode">Toggle Edit Mode</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.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");
var path = d3.geoPath();

d3.queue()
  .defer(d3.json, "state_names_usps_fips.json")
  .defer(d3.json, "https://d3js.org/us-10m.v1.json")
  .await(function (error, postalFipsXwalk, us) {   
    if (error) throw error;
  
    var stateCrosswalk = d3.map(postalFipsXwalk, function(d){return d.fips});
    
  svg.append("g")
        .attr("class", "states")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.states).features)
      .enter().append("path")
        .attr("d", path)
        .attr("id", function(d){return d.id});
  
    svg.append("path")
        .attr("class", "state-borders")
        .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));

// make initial annotation estimations and start annotations tool
    var annotations = topojson.feature(us, us.objects.states).features.map(function(el){

var labelOrientation = [25, 44, 9, 34, 10, 24, 11].indexOf(+el.id) == -1 ? "topBottom" : "leftRight";
        var current_postal_code = stateCrosswalk.get(+el.id).postal_code;
        var disabledComponents = [25, 44, 9, 34, 10, 24, 11, 50, 33].indexOf(+el.id) == -1 ? ["connector", "subject"] : [];

return {
            note: {label: current_postal_code, orientation: labelOrientation},
            x: path.centroid(el.geometry)[0],
            y: path.centroid(el.geometry)[1]-5, 
            disable: disabledComponents
     }
    });

window.makeAnnotations = d3.annotation()
      .type(d3.annotationLabel)
      .annotations(annotations)
      .editMode(true);

svg.append("g")
      .attr("class", "annotation-group")
      .call(makeAnnotations);
              
    document.getElementById("editMode").addEventListener("click", function(){
        makeAnnotations.editMode(!makeAnnotations.editMode()).update();
                                    }); 
    });

</script>

</body>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.1.0/d3-annotation.min.js