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.
xxxxxxxxxx
<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>
<div class="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3.swoopyDrag.js"></script>
<script src="annotations.js"></script>
<script>
var margin = {top: 5, right: 5, bottom: 20, left: 20},
width = 450 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
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