lorenzopub · January 30, 2017 13:14
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/d3-jetpack.js b/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;

 }));
diff --git a/index.html b/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>
diff --git a/swhc.csv b/swhc.csv
diff --git a/swoopy-drag.js b/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] } } 
 }
	(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;

	}));
	<!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>
	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] } }
	}