This block is built directly on top of Scatterplot by @mbostock, modified to use v4 and d3-annotate.
d3.annotate:d3.drag)JSON.stringify(annotation.serialize()) to save annotationsNote: d3.annotate is very much a work in progress
by @ChrisPolis
xxxxxxxxxx<!--Scatter plot from @mbostock based on R/Iris datasethttps://bl.ocks.org/mbostock/3887118 (converted from v3 to v4)--><meta charset="utf-8"><style>body { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.dot { stroke: #000;}.label { fill: #999; }/* * d3-annotate */ .d3-an-container .annotation { cursor: move; }.d3-an-container .annotation.dragging { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; text-decoration: underline; }.d3-an-text-edit { position: fixed; top: 40px; left: 40px;}</style><body><script src="//d3js.org/d3.v4.js"></script><script src="d3-annotate.js"></script><script>var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;var x = d3.scaleLinear() .range([0, width]);var y = d3.scaleLinear() .range([height, 0]);var color = d3.scaleOrdinal(d3.schemeCategory10);var xAxis = d3.axisBottom() .scale(x);var yAxis = d3.axisLeft() .scale(y);var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");d3.tsv("data.tsv", function(error, data) { if (error) throw error; data.forEach(function(d) { d.sepalLength = +d.sepalLength; d.sepalWidth = +d.sepalWidth; }); x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice(); y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice(); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("Sepal Width (cm)"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Sepal Length (cm)") svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 3.5) .attr("cx", function(d) { return x(d.sepalWidth); }) .attr("cy", function(d) { return y(d.sepalLength); }) .style("fill", function(d) { return color(d.species); }); var legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; }); // // annotations var annotation = window.annotation = d3.annotate() // .show((d) => d.species !== "versicolor") // .show(true) .show((d, ndx) => ndx % 12 === 0) .text((d) => `${d.species[0]}: ${d.sepalWidth.toFixed(1)} x ${d.sepalLength.toFixed(1)}`) .attr('x', (d) => d.box.x + d.box.width) .attr('dy', 4) .attr('dx', 4) .attr('text-anchor', 'start') .container(svg.append('g')); svg.selectAll('.dot').call(annotation);});</script> https://d3js.org/d3.v4.js