Line area chart with swoopy drag annotations

d3-jetpack.js

(function(root, factory) {
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('d3'));
    } else if (typeof define === 'function' && define.amd) {
        define(['d3'], factory);
    } else {
        root.d3 = factory(root.d3);
    }
}(this, function(d3) {
        
    d3.selection.prototype.translate = function(xy) {
        return this.attr('transform', function(d,i) {
            return 'translate('+[typeof xy == 'function' ? xy.call(this, d,i) : xy]+')';
        });
    };

    d3.transition.prototype.translate = function(xy) {
        return this.attr('transform', function(d,i) {
            return 'translate('+[typeof xy == 'function' ? xy.call(this, d,i) : xy]+')';
        });
    };

    d3.selection.prototype.tspans = function(lines, lh) {
        return this.selectAll('tspan')
            .data(lines)
            .enter()
            .append('tspan')
            .text(function(d) { return d; })
            .attr('x', 0)
            .attr('dy', function(d,i) { return i ? lh || 15 : 0; });
    };

    d3.selection.prototype.append = function(name) {
        var n = d3_parse_attributes(name), s;
        name = n.attr ? n.tag : name;
        name = d3_selection_creator(name);
        s = this.select(function() {
            return this.appendChild(name.apply(this, arguments));
        });
        //attrs not provided by default in v4
        for (var name in n.attr) { s.attr(name, n.attr[name]) }
        return s;
    };

    d3.selection.prototype.insert = function(name, before) {
        var n = d3_parse_attributes(name), s;
        name = n.attr ? n.tag : name;
        name = d3_selection_creator(name);
        before = d3_selection_selector(before);
        s = this.select(function() {
            return this.insertBefore(name.apply(this, arguments), before.apply(this, arguments) || null);
        });
        //attrs not provided by default in v4
        for (var name in n.attr) { s.attr(name, n.attr[name]) }
        return s;
    };

    //no selection.enter in v4
    if (d3.selection.enter){
        d3.selection.enter.prototype.append = d3.selection.prototype.append
        d3.selection.enter.prototype.insert = d3.selection.prototype.insert
    }

    var d3_parse_attributes_regex = /([\.#])/g;

    function d3_parse_attributes(name) {
        if (typeof name === "string") {
            var attr = {},
                parts = name.split(d3_parse_attributes_regex), p;
                name = parts.shift();
            while ((p = parts.shift())) {
                if (p == '.') attr['class'] = attr['class'] ? attr['class'] + ' ' + parts.shift() : parts.shift();
                else if (p == '#') attr.id = parts.shift();
            }
            return attr.id || attr['class'] ? { tag: name, attr: attr } : name;
        }
        return name;
    }

    function d3_selection_creator(name) {
        var qualify = d3.namespace || d3.ns.qualify //v4 API change
        return typeof name === "function" ? name : (name = qualify(name)).local ? function() {
            return this.ownerDocument.createElementNS(name.space, name.local);
        } : function() {
            return this.ownerDocument.createElementNS(this.namespaceURI, name);
        };
    }

    function d3_selection_selector(selector) {
        return typeof selector === "function" ? selector : function() {
            return this.querySelector(selector);
        };
    }

    d3.wordwrap = function(line, maxCharactersPerLine) {
        var w = line.split(' '),
            lines = [],
            words = [],
            maxChars = maxCharactersPerLine || 40,
            l = 0;
        w.forEach(function(d) {
            if (l+d.length > maxChars) {
                lines.push(words.join(' '));
                words.length = 0;
                l = 0;
            }
            l += d.length;
            words.push(d);
        });
        if (words.length) {
            lines.push(words.join(' '));
        }
        return lines;
    };
    
    d3.ascendingKey = function(key) {
        return typeof key == 'function' ? function (a, b) {
              return key(a) < key(b) ? -1 : key(a) > key(b) ? 1 : key(a) >= key(b) ? 0 : NaN;
        } : function (a, b) {
              return a[key] < b[key] ? -1 : a[key] > b[key] ? 1 : a[key] >= b[key] ? 0 : NaN;
        };
    };

    d3.descendingKey = function(key) {
        return typeof key == 'function' ? function (a, b) {
            return key(b) < key(a) ? -1 : key(b) > key(a) ? 1 : key(b) >= key(a) ? 0 : NaN;
        } : function (a, b) {
            return b[key] < a[key] ? -1 : b[key] > a[key] ? 1 : b[key] >= a[key] ? 0 : NaN;
        };
    };
    
    d3.f = function(){
        var functions = arguments;
        //convert all string arguments into field accessors
        var i = 0, l = functions.length;
        while (i < l) {
            if (typeof(functions[i]) === 'string' || typeof(functions[i]) === 'number'){
                functions[i] = (function(str){ return function(d){ return d[str] }; })(functions[i])
            }
            i++;
        }
         //return composition of functions
        return function(d) {
            var i=0, l = functions.length;
            while (i++ < l) d = functions[i-1].call(this, d);
            return d;
        };
    };
    // store d3.f as convenient unicode character function (alt-f on macs)
    if (typeof window !== 'undefined' && !window.hasOwnProperty('ƒ')) window.ƒ = d3.f;
    
    // this tweak allows setting a listener for multiple events, jquery style
    var d3_selection_on = d3.selection.prototype.on;
    d3.selection.prototype.on = function(type, listener, capture) {
        if (typeof type == 'string' && type.indexOf(' ') > -1) {
            type = type.split(' ');
            for (var i = 0; i<type.length; i++) {
                d3_selection_on.apply(this, [type[i], listener, capture]);
            }
        } else {
            d3_selection_on.apply(this, [type, listener, capture]);
        }
        return this;
    };
    
    // for everyone's sake, let's add prop as alias for property
    d3.selection.prototype.prop = d3.selection.prototype.property;

    // combines data().enter().append()
    d3.selection.prototype.appendMany = function(data, name){
        return this.selectAll(name).data(data).enter().append(name);
    };

    return d3;

}));

index.html

<!doctype html>
<html lang='en-GB'>
<head>
	<meta charset='utf-8'>
</head>	

	<style>
		body {
			font-family: sans-serif;;
			font-size: 16px;
			line-height: 1.4;
			display: block;
			margin: 0;
			padding: 0;
			color: #333;
			-webkit-font-smoothing: antialiased;
		}

		p {
			font-family: sans-serif;
			font-size: 14px;
		  margin: 5px 0 0 0;
		}

		/*template styles*/
		.gia-chart-wrapper {
			max-width: 960px;
			margin: 0 auto;
		}

		/*chart styles*/
		  .y.axis line {
		    fill: none;
		    stroke: #dcdcdc;
		    stroke-dasharray: 1px 1px;
		    shape-rendering: crispEdges;
		    stroke-width: 1px;
		  }

		  .x.axis line {
		    fill: none;
		    stroke: #333333;
		    shape-rendering: crispEdges;
		    stroke-width: 1px;
		  }

		.tick.g-baseline line {
		  	stroke: #333333;
		  	stroke-dasharray: 0;
		  	stroke-width: 1px;
		} 

		  .axis text {
		    font-family: sans-serif;
		    font-size: 12px;
		    pointer-events: none;
		    fill: #bdbdbd;
		  }

		  .y.axis text {
		    text-anchor: end !important;
		    font-size:12px;
		    fill: #bdbdbd;
		  }

		  .domain {
		    display: none;
		  }

		  .line {
		    stroke: #4bc6df;
		    stroke-width: 2px;
		    fill: none;
		  }

		  .area {
		  	fill: #4bc6df;
		  	opacity: 0.1;
		  }

		  .g-label-circle {
		    fill: #4bc6df;
		  }

		    .g-label-text, .g-label-text-bold {
		    font-family: sans-serif;
		    font-size: 14px;
		    text-align: left;
		  }

		  .g-label-text-bold {
		    font-weight: 700;
		  }

		  .annotations path{
		  fill: none;
		  stroke: black;
		}
		.annotations g:hover circle{
		  stroke: red;
		}
		.annotations g:hover text{
		  fill: red;
		}

		.swoopy-drag-lines path {
			fill: none;
			stroke: #333333;
		}

		.swoopy-drag-lines text {
			font-family: sans-serif;
		    font-size: 14px;
		    text-align: left;
		    fill: #333333;
		}

		.swoopy-drag-lines tspan:first-child {
			font-weight: 700;
		}

		@media (max-width: 575px) {
		    .label-group1, .label-group3, .label-group4, .label-group5 {
		    display: none;
		  }
		}

		@media (max-width: 475px) {
		    .label-group1, .label-group2, .label-group3, .label-group4, .label-group5 {
		    display: none;
		  }
		}

		@media (max-width: 375px) {
		    .label-group1, .label-group2, .label-group3, .label-group4, .label-group5, .label-group6, .label-group7 {
		    display: none;
		  }
		}
	</style>	

<body>

	<main>
		
		<div class='gia-chart-wrapper'>
			
			<div class='gia-chart'>
			</div>

		</div>

	</main>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src='d3-jetpack.js'></script>
	<script src='swoopy-drag.js'></script>
	<script>
		//Margin conventions
		var margin = {top: 50, right: 5, bottom: 30, left: 25};

		var widther = d3.select(".gia-chart").node().clientWidth;

		var width = widther - margin.left - margin.right,
		    height = 430 - margin.top - margin.bottom;

		//Parses date for correct time format
		var parseDate = d3.time.format("%e-%b-%y").parse; 

		var monthArr = ['Jan.', 'Feb.', 'March', 'Apr.', 'May', 'June', 'July', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.']; 

		//Appends the svg to the chart-container div
		var svg = d3.select(".gia-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 + ")");

		//Creates the xScale 
		var xScale = d3.time.scale()
		  .range([0, width]);

		//Creates the yScale
		var yScale = d3.scale.linear()
		  .range([height, 0]);

		//Defines the y axis styles
		var yAxis = d3.svg.axis()
			.scale(yScale)
		  .tickSize(-width)
		  .tickPadding(8)
			.orient("left");

		//Defines the y axis styles
		var xAxis = d3.svg.axis()
			.scale(xScale)
		  .tickPadding(8)
			.orient("bottom")
		  .ticks(6)
		  .tickFormat(d3.time.format("%Y")); 

		//line function convention (feeds an array)
		var line = d3.svg.line()
		  .x(function(d) { return xScale(d.date); })
		  .y(function(d) { return yScale(d.close); }); 

		//area function
		var area = d3.svg.area()
		  .x(function(d) {return xScale(d.date); }) 
		  .y0(height)  
		  .y1(function(d) {return yScale(d.close); });    

		//Loads the data
		d3.csv("swhc.csv", ready);

		function ready(err, data) {

			if (err) throw "error loading data";

			//FORMAT data
			data.forEach(function(d) {
				d.close = +d.close;
		    d.date = parseDate(d.date);
			});
			
			//Organizes the data	
		  data.sort(function(a,b) { return a.date - b.date; });
		  var maxY = d3.max(data, function(d) { return d.close; });

		  //Defines the xScale max
		  xScale.domain(d3.extent(data, function(d) { return d.date; }));

		  //Defines the yScale max
		  yScale.domain([0, 30]);

			//Appends the y axis
			var yAxisGroup = svg.append("g")
				.attr("class", "y axis")
				.call(yAxis)
				.selectAll("g")
				.classed("g-baseline", function(d) {return d == 0});

			//Appends the x axis		
			var xAxisGroup = svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + height + ")")
				.call(xAxis);

		  //Binds the data to the line
		  var drawarea = svg.append("path")
		    .datum(data)
		    .attr("class", "area")
		    .attr("d", area);     

		  //Binds the data to the line
		  var drawline = svg.append("path")
		    .datum(data)
		    .attr("class", "line")
		    .attr("d", line); 

		  //Adding labels  
		  var labelElements = svg.append("g")
		    .attr("class", "fiddly-bits")

		  var label = labelElements.selectAll(".g-label-element")
		    .data(data.filter(function(d) { return d.event == "yes"; }))
		    .enter().append("g")
		    .attr("class", "g-label-element")
		    .attr("transform", function(d) { return "translate(" + xScale(d.date) + "," + yScale(d.close) + ")"; } );

		  label.append("circle")
		    .attr("r", 3)
		    .attr("class", "g-label-circle");

		  /*  
		  label.append("text")
		    .attr("x", 0)
		    .attr("y", function(d) {
		      if (d.position == "down") { return 30; }
		      else { return -26; }
		    })
		    .text(function(d) { return monthArr[d.date.getMonth()] + " " + d.date.getDate() + ", " + d.date.getFullYear() ; })
		    .style("text-anchor","end")
		    .attr("class", "g-label-text-bold");  

		  label.append("text")
		    .attr("x", 0)
		    .attr("y", function(d) {
		      if (d.position == "down") { return 46; }
		      else { return -10; }
		    })
		    .text(function(d) { return d.desc_info; })
		    .style("text-anchor","end")
		    .attr("class", "g-label-text"); 
		  */  

		//Swoopy-drag
		var annotations = [
		  {
		    "xVal": 1467864000000,
		    "yVal": 28.04,
		    "path": "M0,-36L0,-9",
		    "text": "July 7, 2016 Dallas police shooting",
		    "textOffset": [
		      -76,
		      -61
		    ]
		  },
		  {
		    "xVal": 1465704000000,
		    "yVal": 22.5,
		    "path": "M-113,-81C-62,-103,-6,-89,-1,-11",
		    "text": "June 12, 2016 Orlando nightclub shooting",
		    "textOffset": [
		      -172,
		      -67
		    ]
		  },
		  {
		    "xVal": 1449032400000,
		    "yVal": 18.18,
		    "path": "M0,60L0,3",
		    "text": "Dec. 2, 2015 San Bernardino terrorist attack",
		    "textOffset": [
		      -23,
		      80
		    ]
		  },
		  {
		    "xVal": 1434513600000,
		    "yVal": 15.75,
		    "path": "M0,85L0,5",
		    "text": "June 17, 2015 Charleston church shooting",
		    "textOffset": [
		      -58,
		      102
		    ]
		  },
		  {
		    "xVal": 1403928000000,
		    "yVal": 13.55,
		    "path": "M50,-67C14,-65,0,-34,14,-6",
		    "text": "July 28, 2014 S&W charged with bribing foreign officials",
		    "textOffset": [
		      53,
		      -93
		    ]
		  },
		  {
		    "xVal": 1400817600000,
		    "yVal": 15.08,
		    "path": "M-80,-92C-27,-93,9,-58,-1,-8",
		    "text": "May 23, 2014 Isla Vista shooting",
		    "textOffset": [
		      -144,
		      -117
		    ]
		  },
		  {
		    "xVal": 1379304000000,
		    "yVal": 10.94,
		    "path": "M0,41L0,4",
		    "text": "Sept. 16, 2013 Washington, DC Navy Yard shooting",
		    "textOffset": [
		      -25,
		      57
		    ]
		  },
		  {
		    "xVal": 1355461200000,
		    "yVal": 9.05,
		    "path": "M-20,-79C13,-66,27,-27,3,-7",
		    "text": "Dec. 14, 2012 Sandy Hook school shooting",
		    "textOffset": [
		      -71,
		      -102
		    ]
		  }
		]

		var swoopy = d3.swoopyDrag()
		    .x(function(d){ return xScale(d.xVal) })
		    .y(function(d){ return yScale(d.yVal) })
		    .draggable(false)
		    .annotations(annotations)

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


		swoopySel.selectAll('text')
		    .each(function(d){
		      d3.select(this)
		          .text('')                        //clear existing text
		          .tspans(d3.wordwrap(d.text, 12)) //wrap after 20 char
		    });
		    

		swoopySel.selectAll('g')
		    .attr("class", function(d, i) {
		      return 'label-group'+i;
		    });                  	

		//RESPONSIVENESS
		  d3.select(window).on("resize", resized);

		  function resized() {

		    //new margin
		    var newMargin = {top: 30, right: 5, bottom: 30, left: 25};

		    var newWidther = d3.select(".gia-chart").node().clientWidth;

		    var newWidth = newWidther - newMargin.left - newMargin.right;

		    //Change the width of the svg
		    d3.select("svg")
		      .attr("width", newWidth + newMargin.left + newMargin.right);

		    //Change the xScale
		    xScale
		      .range([0, newWidth]);

		    //Update the line
		    line = d3.svg.line()
		      .x(function(d) { return xScale(d.date); })
		      .y(function(d) { return yScale(d.close); }); 

		    d3.selectAll('.line')
		      .attr("d", line);  

		    //Updates circle labels 
		    d3.selectAll('.g-label-element')
		      .attr("transform", function(d) { return "translate(" + xScale(d.date) + "," + yScale(d.close) + ")"; } );                

		    //Update the area
		    area = d3.svg.area()
		      .x(function(d) {return xScale(d.date); }) 
		      .y0(height)  
		      .y1(function(d) {return yScale(d.close); });  

		    d3.selectAll('.area')
		      .attr("d", area);    

		    //Updates xAxis
		    d3.selectAll(".x.axis")
		         .call(xAxis);     

		    //Updates ticks
		    xAxis
		      .scale(xScale);

		    //Updates yAxis
		    d3.selectAll(".y.axis")
		      .call(yAxis); 

		    yAxis
		      .tickSize(-newWidth);  
		 
		    swoopySel.remove(); 
		    swoopySel = svg.append('g').call(swoopy)
		      .attr("class", "swoopy-drag-lines"); 

		    swoopySel.selectAll('g')
		    .attr("class", function(d, i) {
		      return 'label-group'+i;
		    });     

		swoopySel.selectAll('text')
		    .each(function(d){
		      d3.select(this)
		          .text('')                        //clear existing text
		          .tspans(d3.wordwrap(d.text, 12)) //wrap after 20 char
		    })    

		  };

		}
	</script>

</body>
</html>

swhc.csv

swoopy-drag.js

d3.swoopyDrag = function(){
  var x = d3.scale.linear()
  var y = d3.scale.linear()

  var annotations = []
  var annotationSel

  var draggable = false

  var dispatch = d3.dispatch('drag')

  var textDrag = d3.behavior.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.drag()
      })
      .origin(function(d){ return {x: d.textOffset[0], y: d.textOffset[1]} })

  var circleDrag = d3.behavior.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 = ''
        parentSel.selectAll('circle').each(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.drag()
      })
      .origin(function(d){ return {x: d.pos[0], y: d.pos[1]} })


  var rv = function(sel){
    annotationSel = sel.selectAll('g').data(annotations)
    annotationSel.exit().remove()
    annotationSel.enter().append('g')
    annotationSel.call(translate, function(d){ return [x(d), y(d)] })
    
    var textSel = annotationSel.append('text')
        .call(translate, ƒ('textOffset'))
        .text(ƒ('text'))

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

    if (!draggable) return

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

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

      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, fill: 'rgba(0,0,0,0)', stroke: '#333', 'stroke-dasharray': '2 2'})
        .call(translate, ƒ('pos'))
        .call(circleDrag)

    dispatch.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
  }

  return d3.rebind(rv, dispatch, 'on')

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

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