Annotations with Swoopy Drag for Scatter Plot

.block

license: gpl-3.0

README.md

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.

annotations.js

var annotations = [
  {
    "xValue": 40.18594637,
    "yValue": 66.66316631,
    "path": "M -60,18 A 31.408 31.408 0 0 0 -2,6",
    "text": "Elizabeth",
    "textOffset": [
      -93,
      11
    ]
  },
  {
    "xValue": 28.36302159,
    "yValue": 57.69543829,
    "path": "M -6,50 A 25.855 25.855 0 0 1 -7,-1",
    "text": "Aria",
    "textOffset": [
      1,
      54
    ]
  },
  {
    "xValue": 11.27003571,
    "yValue": 88.77343766,
    "path": "M 39,25 A 23.896 23.896 0 1 0 4,-7",
    "text": "Noah",
    "textOffset": [
      17,
      39
    ]
  }
];

d3.swoopyDrag.js

d3.swoopyDrag = function(){
  var x = d3.scaleLinear()
  var y = d3.scaleLinear()

  var annotations = []
  var annotationSel

  var draggable = false

  var dispatch = d3.dispatch('drag')

  var textDrag = d3.drag()
      .on('drag', function(d){
        var x = d3.event.x
        var y = d3.event.y
        d.textOffset = [x, y].map(Math.round)

        d3.select(this).call(translate, d.textOffset)

        dispatch.call('drag')
      })
      .subject(function(d){ return {x: d.textOffset[0], y: d.textOffset[1]} })

  var circleDrag = d3.drag()
      .on('drag', function(d){
        var x = d3.event.x
        var y = d3.event.y
        d.pos = [x, y].map(Math.round)

        var parentSel = d3.select(this.parentNode)

        var path = ''
        var points = parentSel.selectAll('circle').data()
        if (points[0].type == 'A'){
          path = calcCirclePath(points)
        } else{
          points.forEach(function(d){ path = path + d.type  + d.pos })
        }

        parentSel.select('path').attr('d', path).datum().path = path
        d3.select(this).call(translate, d.pos)

        dispatch.call('drag')
      })
      .subject(function(d){ return {x: d.pos[0], y: d.pos[1]} })


  var rv = function(sel){
    annotationSel = sel.html('').selectAll('g')
        .data(annotations).enter()
      .append('g')
        .call(translate, function(d){ return [x(d), y(d)] })

    var textSel = annotationSel.append('text')
        .call(translate, token('textOffset'))
        .text(token('text'))

    annotationSel.append('path')
        .attr('d', token('path'))

    if (!draggable) return

    annotationSel.style('cursor', 'pointer')
    textSel.call(textDrag)

    annotationSel.selectAll('circle').data(function(d){
      var points = []

      if (~d.path.indexOf('A')){
        //handle arc paths seperatly -- only one circle supported
        var pathNode = d3.select(this).select('path').node()
        var l = pathNode.getTotalLength()

        points = [0, .5, 1].map(function(d){
          var p = pathNode.getPointAtLength(d*l)
          return {pos: [p.x, p.y], type: 'A'}
        })
      } else{
        var i = 1
        var type = 'M'
        var commas = 0

        for (var j = 1; j < d.path.length; j++){
          var curChar = d.path[j]
          if (curChar == ',') commas++
          if (curChar == 'L' || curChar == 'C' || commas == 2){
            points.push({pos: d.path.slice(i, j).split(','), type: type})
            type = curChar
            i = j + 1
            commas = 0
          }
        }

        points.push({pos: d.path.slice(i, j).split(','), type: type})
      }

      return points
    }).enter().append('circle')
        .attr('r', 8)
        .attr('fill', 'rgba(0,0,0,0)')
        .attr('stroke', '#333')
        .attr('stroke-dasharray', '2 2')
        .call(translate, token('pos'))
        .call(circleDrag)

    dispatch.call('drag')
  }


  rv.annotations = function(_x){
    if (typeof(_x) == 'undefined') return annotations
    annotations = _x
    return rv
  }
  rv.x = function(_x){
    if (typeof(_x) == 'undefined') return x
    x = _x
    return rv
  }
  rv.y = function(_x){
    if (typeof(_x) == 'undefined') return y
    y = _x
    return rv
  }
  rv.draggable = function(_x){
    if (typeof(_x) == 'undefined') return draggable
    draggable = _x
    return rv
  }
  rv.on = function() {
    var value = dispatch.on.apply(dispatch, arguments);
    return value === dispatch ? rv : value;
  }

  return rv

  //convert 3 points to an Arc Path
  function calcCirclePath(points){
    var a = points[0].pos
    var b = points[2].pos
    var c = points[1].pos

    var A = dist(b, c)
    var B = dist(c, a)
    var C = dist(a, b)

    var angle = Math.acos((A*A + B*B - C*C)/(2*A*B))

    //calc radius of circle
    var K = .5*A*B*Math.sin(angle)
    var r = A*B*C/4/K
    r = Math.round(r*1000)/1000

    //large arc flag
    var laf = +(Math.PI/2 > angle)

    //sweep flag
    var saf = +((b[0] - a[0])*(c[1] - a[1]) - (b[1] - a[1])*(c[0] - a[0]) < 0)

    return ['M', a, 'A', r, r, 0, laf, saf, b].join(' ')
  }

  function dist(a, b){
    return Math.sqrt(
      Math.pow(a[0] - b[0], 2) +
      Math.pow(a[1] - b[1], 2))
  }


  //no jetpack dependency
  function translate(sel, pos){
    sel.attr('transform', function(d){
      var posStr = typeof(pos) == 'function' ? pos(d) : pos
      return 'translate(' + posStr + ')'
    })
  }

  function token(str){ return function(d){ return d[str] } }
}

data.csv

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://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>

thumbnail.png