tlfrd · August 9, 2017 10:58
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/co2_emissions.csv b/co2_emissions.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="swoopy-drag.js"></script>
  <style>
    body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
    
    body {
      font-family: monospace;
    }
    
    .x-axis, .y-axis {
      font-family: monospace;
      font-size: 9px;
    }
    
    .line {
      fill: none;
      stroke-width: 1px;
      stroke: url(#svgGradient);
      opacity: 0.2;
    }
    
    .annotation {
      fill: none;
      stroke: black;
    }
    
    #arrowhead {
      fill: none;
      stroke: black;
    }
    
    .annotations path {
      fill: none;
      stroke: black;
    }
    
    #arrow {
      fill: none;
      stroke: black;
    }
  </style>
 </head>

 <body>
  <script>
    var margin = { top: 50, right: 50, bottom: 50, left: 50 };
    
    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").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 defs = svg.append("defs");
 		
    // add gradient
  	defs.append("linearGradient")
      .attr("id", "svgGradient")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", 0).attr("y1", height)
      .attr("x2", 0).attr("y2", height / 4)
    .selectAll("stop")
      .data([
        {offset: "0%", color: "blue"},
        {offset: "25%", color: "red"},
        {offset: "100%", color: "red"}
      ])
    .enter().append("stop")
      .attr("offset", function(d) { return d.offset; })
      .attr("stop-color", function(d) { return d.color; });
    
    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')
    
    var legend = svg.append("g")
    	.attr("transform", "translate(" + width +",0)")
    
    legend.append("text")
    	.attr("text-anchor", "end")
    	.text("CO2 emissions (metric tons per capita)");
 		
    var x = d3.scaleTime()
    	.range([0, width]);
    
    var y = d3.scaleLinear()
    	.range([height, 0]);
    
    var annotations = [
      {
        "year": "2001",
        "value": 65,
        "path": "M -58,-54 A 41.833 41.833 0 0 1 -28,10",
        "text": "Qatar",
        "textOffset": [
          -108,
          -51
        ]
      },
      {
        "year": "1970",
        "value": 65,
        "path": "M -31,94 A 46.787 46.787 0 0 0 -55,154",
        "text": "USA",
        "textOffset": [
          -17,
          93
        ]
      },
      {
        "year": "1980",
        "value": 65,
        "path": "M -62,116 A 48.668 48.668 0 0 1 -71,182",
        "text": "Great Britain",
        "textOffset": [
          -118,
          103
        ]
      },
      {
        "year": "1990",
        "value": 65,
        "path": "M 71,136 A 103.606 103.606 0 0 0 -18,214",
        "text": "World",
        "textOffset": [
          86,
          141
        ]
      }
    ];
    
    var swoopy = d3.swoopyDrag()
    	.x(function(d) { return x(parseTime(d.year)) })
    	.y(function(d) { return y(d.value) })
    	.annotations(annotations);
    
    var parseTime = d3.timeParse("%Y");
    
    var line = d3.line()
      .x(function(d) { return x(parseTime(d.year)) })
      .y(function(d) { return y(d.value) })
    	.curve(d3.curveMonotoneX)

    function parse(d) {
      var country = {
        country: d.name,
        code: d.code,
        data: []
      };
      
      for (var i in d) {
        if (i !== "name" && i !== "code") {
          if (d[i]) {
            country.data.push({
              year: +i,
              value: +d[i]
            })
          }
        }
      }
      
      return country;
    }
    
    d3.csv("co2_emissions.csv", parse, function(error, countries) {
      if (error) throw error;
      
      var yMax = d3.max(countries[0].data, function(d) {
        return parseTime(d.year);
      });
      
      x.domain([new Date("1960"), yMax]);
      
      var yMin = d3.min(countries, function(d) {
        return d3.min(d.data, function(v) {
          // clamping at 0 for now
          return Math.max(0, v.value);
        })
      });
      
      var yMax = d3.max(countries, function(d) {
        return d3.max(d.data, function(v) {
          return v.value;
        })
      });
      
      y.domain([yMin, yMax])
      	.nice();
      
      
      var xAxis = svg.append("g")
      	.attr("class", "x-axis")
      	.attr("transform", "translate(0," + height + ")")
      	.call(d3.axisBottom(x).tickSizeOuter(0));
      
      var yAxis = svg.append("g")
      	.attr("class", "y-axis")
      	.call(d3.axisLeft(y));
      
      var lines = svg.append("g")
      	.attr("class", "countries")
      	.selectAll("g")
      	.data(countries)
       .enter().append("g")
      	.attr("class", "country")
      	.attr("id", function(d) {
        	return d.code;
      	});
      
      lines.append("path")
      	.attr("class", "line")
      	.attr("id", function(d) {
        	return d.code;
      	})
      	.attr("d", function(d) {
        	return line(d.data);
      	});
      
      // highlight WLD
      lines.select("path#WLD")
      	.style("opacity", 1)
      	.style("stroke", "white")
      	.style("stroke-width", 3)
      lines.select("g#WLD.country")
      	.raise();
      
      // highlight GBR
      lines.select("path#GBR")
      	.style("opacity", 1)
      	.style("stroke-width", 2)
      lines.select("g#GBR.country")
      	.raise();
      
      // highlight USA
      lines.select("path#USA")
      	.style("opacity", 1)
      	.style("stroke-width", 2)
      lines.select("g#USA.country")
      	.raise();
      
      // highlight QAT
      lines.select("path#QAT")
      	.style("opacity", 1)
      	.style("stroke-width", 2)
      lines.select("g#QAT.country")
      	.raise();
      
      var swoopySel = svg.append('g')
      	.attr("class", "annotations")
      	.call(swoopy);
      
      swoopySel.selectAll('path').attr('marker-end', 'url(#arrow)');
      
    });
    
    
  </script>
 </body>
diff --git a/swoopy-drag.js b/swoopy-drag.js
 (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3));
 }(this, function (exports,d3) { 'use strict';

  function swoopyDrag(){
    var x = function(d){ return d }
    var y = function(d){ return d }

    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, ƒ('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 = []

        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, ƒ('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 ƒ(str){ return function(d){ return d[str] } } 
  }

  exports.swoopyDrag = swoopyDrag;

  Object.defineProperty(exports, '__esModule', { value: true });

 }));
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="swoopy-drag.js"></script>
	<style>
	body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

	body {
	font-family: monospace;
	}

	.x-axis, .y-axis {
	font-family: monospace;
	font-size: 9px;
	}

	.line {
	fill: none;
	stroke-width: 1px;
	stroke: url(#svgGradient);
	opacity: 0.2;
	}

	.annotation {
	fill: none;
	stroke: black;
	}

	#arrowhead {
	fill: none;
	stroke: black;
	}

	.annotations path {
	fill: none;
	stroke: black;
	}

	#arrow {
	fill: none;
	stroke: black;
	}
	</style>
	</head>

	<body>
	<script>
	var margin = { top: 50, right: 50, bottom: 50, left: 50 };

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").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 defs = svg.append("defs");

	// add gradient
	defs.append("linearGradient")
	.attr("id", "svgGradient")
	.attr("gradientUnits", "userSpaceOnUse")
	.attr("x1", 0).attr("y1", height)
	.attr("x2", 0).attr("y2", height / 4)
	.selectAll("stop")
	.data([
	{offset: "0%", color: "blue"},
	{offset: "25%", color: "red"},
	{offset: "100%", color: "red"}
	])
	.enter().append("stop")
	.attr("offset", function(d) { return d.offset; })
	.attr("stop-color", function(d) { return d.color; });

	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')

	var legend = svg.append("g")
	.attr("transform", "translate(" + width +",0)")

	legend.append("text")
	.attr("text-anchor", "end")
	.text("CO2 emissions (metric tons per capita)");

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

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

	var annotations = [
	{
	"year": "2001",
	"value": 65,
	"path": "M -58,-54 A 41.833 41.833 0 0 1 -28,10",
	"text": "Qatar",
	"textOffset": [
	-108,
	-51
	]
	},
	{
	"year": "1970",
	"value": 65,
	"path": "M -31,94 A 46.787 46.787 0 0 0 -55,154",
	"text": "USA",
	"textOffset": [
	-17,
	93
	]
	},
	{
	"year": "1980",
	"value": 65,
	"path": "M -62,116 A 48.668 48.668 0 0 1 -71,182",
	"text": "Great Britain",
	"textOffset": [
	-118,
	103
	]
	},
	{
	"year": "1990",
	"value": 65,
	"path": "M 71,136 A 103.606 103.606 0 0 0 -18,214",
	"text": "World",
	"textOffset": [
	86,
	141
	]
	}
	];

	var swoopy = d3.swoopyDrag()
	.x(function(d) { return x(parseTime(d.year)) })
	.y(function(d) { return y(d.value) })
	.annotations(annotations);

	var parseTime = d3.timeParse("%Y");

	var line = d3.line()
	.x(function(d) { return x(parseTime(d.year)) })
	.y(function(d) { return y(d.value) })
	.curve(d3.curveMonotoneX)

	function parse(d) {
	var country = {
	country: d.name,
	code: d.code,
	data: []
	};

	for (var i in d) {
	if (i !== "name" && i !== "code") {
	if (d[i]) {
	country.data.push({
	year: +i,
	value: +d[i]
	})
	}
	}
	}

	return country;
	}

	d3.csv("co2_emissions.csv", parse, function(error, countries) {
	if (error) throw error;

	var yMax = d3.max(countries[0].data, function(d) {
	return parseTime(d.year);
	});

	x.domain([new Date("1960"), yMax]);

	var yMin = d3.min(countries, function(d) {
	return d3.min(d.data, function(v) {
	// clamping at 0 for now
	return Math.max(0, v.value);
	})
	});

	var yMax = d3.max(countries, function(d) {
	return d3.max(d.data, function(v) {
	return v.value;
	})
	});

	y.domain([yMin, yMax])
	.nice();


	var xAxis = svg.append("g")
	.attr("class", "x-axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).tickSizeOuter(0));

	var yAxis = svg.append("g")
	.attr("class", "y-axis")
	.call(d3.axisLeft(y));

	var lines = svg.append("g")
	.attr("class", "countries")
	.selectAll("g")
	.data(countries)
	.enter().append("g")
	.attr("class", "country")
	.attr("id", function(d) {
	return d.code;
	});

	lines.append("path")
	.attr("class", "line")
	.attr("id", function(d) {
	return d.code;
	})
	.attr("d", function(d) {
	return line(d.data);
	});

	// highlight WLD
	lines.select("path#WLD")
	.style("opacity", 1)
	.style("stroke", "white")
	.style("stroke-width", 3)
	lines.select("g#WLD.country")
	.raise();

	// highlight GBR
	lines.select("path#GBR")
	.style("opacity", 1)
	.style("stroke-width", 2)
	lines.select("g#GBR.country")
	.raise();

	// highlight USA
	lines.select("path#USA")
	.style("opacity", 1)
	.style("stroke-width", 2)
	lines.select("g#USA.country")
	.raise();

	// highlight QAT
	lines.select("path#QAT")
	.style("opacity", 1)
	.style("stroke-width", 2)
	lines.select("g#QAT.country")
	.raise();

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

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

	});


	</script>
	</body>
	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
	(factory((global.d3 = global.d3 \|\| {}),global.d3));
	}(this, function (exports,d3) { 'use strict';

	function swoopyDrag(){
	var x = function(d){ return d }
	var y = function(d){ return d }

	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, ƒ('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 = []

	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, ƒ('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((AA + BB - CC)/(2A*B))

	//calc radius of circle
	var K = .5AB*Math.sin(angle)
	var r = ABC/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 ƒ(str){ return function(d){ return d[str] } }
	}

	exports.swoopyDrag = swoopyDrag;

	Object.defineProperty(exports, '__esModule', { value: true });

	}));