Annotations with Swoopy Drag for Scatter Plot

Use swoopy drag to annotate your scatter plot in d3.js.

Drag the annotation points around the page. When you're happy with their locations, type copy(annotations) in the console, and paste the clipboard into your var annotations.

For a full tutorial, visit the swoopy drag page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
	<head>
		<style>
			body {
				margin: 0 auto;
				display: table;
				font-family: "Helvetica Neue", sans-serif;
			}
			.annotation path {
			  fill: none;
			  stroke: #3a403d;
			}
			.annotation text {
			  fill: #3a403d;
			  stroke: none;
			  font-size: .8em;
			}
		</style>

</head>
	<body>

var svg = d3.select(".chart").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 + ")");

var x = d3.scaleLinear()
			    .range([0,width]);

var y = d3.scaleLinear()
			    .range([height,0]);

var xAxis = d3.axisBottom()
			    .scale(x);

var yAxis = d3.axisLeft()
			    .scale(y);

var swoopy = d3.swoopyDrag()
			    .x(function(d){ return x(d.xValue); })
			    .y(function(d){ return y(d.yValue); })
			    .draggable(true)
			    .annotations(annotations);

d3.csv("data.csv", types, function(error, data){

x.domain(d3.extent(data, function(d){ return d.x; }));
			  y.domain(d3.extent(data, function(d){ return d.y; }));

svg.append("g")
			      .attr("class", "x axis")
			      .attr("transform", "translate(0," + height + ")")
			      .call(xAxis)

svg.append("g")
			      .attr("class", "y axis")
			      .call(yAxis);

svg.selectAll(".point")
			      .data(data)
			    .enter().append("circle")
			      .attr("class", "point")
			      .attr("r", 3)
			      .attr("cy", function(d){ return y(d.y); })
			      .attr("cx", function(d){ return x(d.x); })

var swoopySel = svg.append('g')
			    .attr("class","annotation")
			    .call(swoopy);

svg.append('marker')
			      .attr('id', 'arrow')
			      .attr('viewBox', '-10 -10 20 20')
			      .attr('markerWidth', 20)
			      .attr('markerHeight', 20)
			      .attr('orient', 'auto')
			    .append('path')
			      .attr('d', 'M-6.75,-6.75 L 0,0 L -6.75,6.75')

swoopySel.selectAll('path').attr('marker-end', 'url(#arrow)');

});

function types(d){
			  d.x = +d.x;
			  d.y = +d.y;

return d;
			}
		</script>

</body>
</html>

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