d3-jetpack-module.js

// https://github.com/1wheel/d3-jetpack-module Version 0.0.14. Copyright 2016 Adam Pearce.
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-selection'), require('d3-transition'), require('d3-axis'), require('d3-scale'), require('d3-collection'), require('d3-queue'), require('d3-request')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3-selection', 'd3-transition', 'd3-axis', 'd3-scale', 'd3-collection', 'd3-queue', 'd3-request'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3,global.d3,global.d3,global.d3));
}(this, function (exports,d3Selection,d3Transition,d3Axis,d3Scale,d3Collection,d3Queue,d3Request) { 'use strict';

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

  function parseAttributes(name) {
    if (typeof name === "string") {
      var attr = {},
        parts = name.split(/([\.#])/g), 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 {tag: name, attr: attr};
    }
    return name;
  }

  function append(name) {
    var n = parseAttributes(name), s;
    name = d3Selection.creator(n.tag);
    s = this.select(function() {
      return this.appendChild(name.apply(this, arguments));
    });

    //attrs not provided by default in v4
    for (var key in n.attr) { s.attr(key, n.attr[key]) }
    return s;
  };

  function selectAppend(name) {
    var select = d3Selection.selector(name),
       n = parseAttributes(name), s;

    name = d3Selection.creator(n.tag);

    s = this.select(function() {
      return select.apply(this, arguments)
          || this.appendChild(name.apply(this, arguments));
    });

    //attrs not provided by default in v4
    for (var key in n.attr) { s.attr(key, n.attr[key]) }
    return s;
  };

  function tspans(lines, lh) {
    return this.selectAll('tspan')
        .data(lines).enter()
      .append('tspan')
        .html(function(d) { return d; })
        .attr('x', 0)
        .attr('dy', function(d, i) { return i ? (lh + 'em') || '1em' : 0; });
  };

  function appendMany(data, name){
    return this.selectAll(null).data(data).enter().append(name);
  };

  function at(name, value) {
    if (typeof(name) == 'object'){
      for (var key in name){
        this.attr(key.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase(), name[key]) 
      }
      return this
    } else{
      return arguments.length == 1 ? this.attr(name) : this.attr(name, value)
    }
  };

  function f(){
    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
    }
  }

  f.not = function(d){ return !d }
  f.run = function(d){ return d() }
  f.objToFn = function(obj, defaultVal){
    if (arguments.length == 1) defaultVal = undefined

    return function(str){
      return typeof(obj[str]) !== undefined ? obj[str] : defaultVal }
  }

  function st(name, value) {
    if (typeof(name) == 'object'){
      for (var key in name){
        addStyle(this, key, name[key])
      }
      return this
    } else{
      return arguments.length == 1 ? this.style(name) : addStyle(this, name, value)
    }


    function addStyle(sel, style, value){
      var style = style.replace(/([a-z\d])([A-Z])/g, '$1-$2').toLowerCase()

      var pxStyles = 'top left bottom right padding-top padding-left padding-bottom padding-right border-top b-width border-left-width border-botto-width m border-right-width  margin-top margin-left margin-bottom margin-right font-size width height stroke-width line-height margin padding border max-width min-width'

      if (~pxStyles.indexOf(style) ){
        sel.style(style, typeof value == 'function' ? f(value, addPx) : addPx(value))
      } else{
        sel.style(style, value)
      }

      return sel
    } 

    function addPx(d){ return d.match ? d : d + 'px' }
  };

  function wordwrap(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.filter(function(d){ return d != '' });
  };

  function ascendingKey(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;
    };
  };

  function descendingKey(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;
    };
  };

  function conventions(c){
    c = c || {}

    c.margin = c.margin || {top: 20, right: 20, bottom: 20, left: 20}
    ;['top', 'right', 'bottom', 'left'].forEach(function(d){
      if (!c.margin[d] && c.margin[d] != 0) c.margin[d] = 20 
    })

    c.width  = c.width  || c.totalWidth  - c.margin.left - c.margin.right || 900
    c.height = c.height || c.totalHeight - c.margin.top - c.margin.bottom || 460

    c.totalWidth = c.width + c.margin.left + c.margin.right
    c.totalHeight = c.height + c.margin.top + c.margin.bottom

    c.parentSel = c.parentSel || d3Selection.select('body')

    c.rootsvg = c.parentSel.append('svg')

    c.svg = c.rootsvg
        .attr('width', c.totalWidth)
        .attr('height', c.totalHeight)
      .append('g')
        .attr('transform', 'translate(' + c.margin.left + ',' + c.margin.top + ')')

    c.x = c.x || d3Scale.scaleLinear().range([0, c.width])
    c.y = c.y || d3Scale.scaleLinear().range([c.height, 0])

    c.xAxis = c.xAxis || d3Axis.axisBottom().scale(c.x)
    c.yAxis = c.yAxis || d3Axis.axisLeft().scale(c.y)

    c.drawAxis = function(){
      c.svg.append('g')
          .attr('class', 'x axis')
          .attr('transform', 'translate(0,' + c.height + ')')
          .call(c.xAxis);

      c.svg.append('g')
          .attr('class', 'y axis')
          .call(c.yAxis);
    }
    
    return c
  }

  function attachTooltip(sel, tooltipSel, fieldFns){
    if (!sel.size()) return

    tooltipSel = tooltipSel || d3Selection.select('.tooltip')

    sel 
        .on('mouseover.attachTooltip', ttDisplay)
        .on('mousemove.attachTooltip', ttMove)
        .on('mouseout.attachTooltip',  ttHide)
        .on('click.attachTooltip', function(d){ console.log(d) })

    var d = sel.datum()
    fieldFns = fieldFns || d3Collection.keys(d)
        .filter(function(str){
          return (typeof d[str] != 'object') && (d[str] != 'array')
        })
        .map(function(str){
          return function(d){ return str + ': <b>' + d[str] + '</b>'} })

    function ttDisplay(d){
      tooltipSel
          .classed('tooltip-hidden', false)
          .html('')
        .appendMany(fieldFns, 'div')
          .html(function(fn){ return fn(d) })

      d3Selection.select(this).classed('tooltipped', true)
    }

    function ttMove(d){
      var tt = tooltipSel
      if (!tt.size()) return
      var e = d3Selection.event,
          x = e.clientX,
          y = e.clientY,
          n = tt.node(),
          nBB = n.getBoundingClientRect(),
          doctop = (window.scrollY)? window.scrollY : (document.documentElement && document.documentElement.scrollTop)? document.documentElement.scrollTop : document.body.scrollTop,
          topPos = y+doctop-nBB.height-18;

      tt.style('top', (topPos < 0 ? 18 + y : topPos)+'px');
      tt.style('left', Math.min(Math.max(20, (x-nBB.width/2)), window.innerWidth - nBB.width - 20)+'px');
    }

    function ttHide(d){
      tooltipSel.classed('tooltip-hidden', true);

      d3Selection.selectAll('.tooltipped').classed('tooltipped', false)
    }
  }

  function loadData(files, cb){
    var q = d3Queue.queue()
    files.forEach(function(d){
      var type = d.split('.').reverse()[0]

      var loadFn = {csv: d3Request.csv, tsv: d3Request.tsv, json: d3Request.json}[type]
      if (!loadFn) return cb(new Error('Invalid type', d))
      q.defer(loadFn, d) 
    })
    q.awaitAll(cb)
  }

  function nestBy(array, key){
    return d3Collection.nest().key(key).entries(array).map(function(d){
      d.values.key = d.key
      return d.values
    })
  }

  function round(n, p) {
    return p ? Math.round(n * (p = Math.pow(10, p))) / p : Math.round(n);
  };

  d3Selection.selection.prototype.translate = translateSelection
  d3Transition.transition.prototype.translate = translateSelection
  d3Selection.selection.prototype.append = append
  d3Selection.selection.prototype.selectAppend = selectAppend
  d3Selection.selection.prototype.tspans = tspans
  d3Selection.selection.prototype.appendMany = appendMany
  d3Selection.selection.prototype.at = at
  d3Selection.selection.prototype.st = st
  d3Selection.selection.prototype.prop = d3Selection.selection.prototype.property

  exports.wordwrap = wordwrap;
  exports.parseAttributes = parseAttributes;
  exports.f = f;
  exports.ascendingKey = ascendingKey;
  exports.descendingKey = descendingKey;
  exports.conventions = conventions;
  exports.attachTooltip = attachTooltip;
  exports.loadData = loadData;
  exports.nestBy = nestBy;
  exports.round = round;

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

}));

gapMinder2015.csv

index.html

<!DOCTYPE html>
<html lang="en-GB">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
	<title>d3</title>
	<script src="https://unpkg.com/d3/build/d3.min.js"></script>
	<script src="https://unpkg.com/d3-swoopy-drag"></script>
	<script src="d3-jetpack-module.js"></script>
	<style media="screen">
		html, body{
			font-family:Arial,sans-serif;
			font-size: 18px;
		}
		text{
			fill: #000;
			font-size: 18px;
		}
		.heading{
			font-size: 1.15rem;
			font-weight: 600;
		}
		.title{
			font-size: 0.8rem;
		}
		.legend text{
			font-size: 0.7rem;
			fill: #74736c;
		}
		path.domain{
			fill: none;
			stroke: none;
		}
		.tick line{
			shape-rendering: crispEdges;
			stroke: lightgrey;
			stroke-width: 1;
		}
		.tick text{
			font-size: 0.75rem;
		}
		.label{
			font-size: 0.85rem;
		}
	    .shadow{
	    	text-shadow:2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px 0px 2px #fff, 2px 0px 2px #fff;
	    }
	</style>
</head>
<body>
	<svg></svg>
	<script type="text/javascript">

		var width = 600,
			height = 500,
			margin = {
				left:20,
				top:80,
				right:0,
				bottom:30
			};

		function calculateDistance(x1,y1,x2,y2){
			return Math.sqrt( Math.pow(x1-x2,2) + Math.pow(y1-y2,2) )
		}

		var svg = d3.select("svg")
			.at({
				width: width + "px",
				height: height + "px"
			})
			.st({
				width: width,
				height: height
			});

		var heading = svg.append("text.heading")
			.translate([0, 16])
			.tspans(["A snapshot of global socio-economic development in 2016,", "as measured by GDP per capita and life expectancy"],1.1)

		function prepare(d){

			d.label = d.shortName;
			d.region = d.region;
			d.lifeEx = +d.lifeEx;
			d.gdpPerCap10 = +d.gdpPerCap10;
			d.gdpPerCapPPP11 = +d.gdpPerCapPPP11;
			d.population = +d.population;
			return d;

		}

		function render(data){

			data = data.filter(d => !isNaN(d.gdpPerCap10) && !isNaN(d.lifeEx));

			// console.log(data);

			// Define and draw x axis
			var x = d3.scaleLog()
				.base(10)
				.range([margin.left, width-margin.right])
				.domain(d3.extent(data, d=> d.gdpPerCap10));

			var xAxis = d3.axisTop()
				.scale(x)
				.ticks(5)
				.tickFormat(d3.format(","))
				.tickSize(-(height-(margin.bottom+margin.top)));

			var xDraw = svg.append("g.axis.x")
				.translate([0, margin.top])
				.call(xAxis);

			// Show/hide and style ticks to make the log scale clear
			d3.selectAll(".x .tick").filter(d => [100, 300, 1000, 3000, 10000, 30000].indexOf(d) < 0)
				.selectAll("text, line")
				.st({
					"stroke-dasharray": "2 2"
				})
				.text("");

			// Add an x-axis title
			var xTitle = svg.append("text.x.title.shadow")
				.translate([x(300)-11, margin.top+13])
				.html("GDP per capita (constant 2010 US$) &rarr;");

			// Define and draw y axis
			var y = d3.scaleLinear()
				.range([height-margin.bottom, margin.top])
				.domain(d3.extent(data, d=> d.lifeEx));

			var yAxis = d3.axisLeft()
				.scale(y)
				.ticks(5)
				.tickSize(-(width-(margin.left+margin.right)));

			var yDraw = svg.append("g.axis.y")
				.translate([margin.left, 0])
				.call(yAxis);

			// Add a y-axis title
			var yTitle = svg.append("text.y.title.shadow")
				.translate([margin.left+2, y(79)-6])
				.tspans(["Life", "expectancy", "at birth", "(years)","&darr;"],1.1);

			// Define a circle area scale
			var areaScale = d3.scaleSqrt()
				.range([0, 35])
				.domain([0, d3.max(data, d => d.population)]);

			var pops = data.map(d => d.population).sort((a,b) => a-b);

			// Draw an area legend
			var areaLegend = svg.append("g.legend").translate([width-85, height-180]);
			var areaGroups = areaLegend.selectAll("g")
				.data([10000000, 100000000, 500000000])
				.enter()
				.append("g");
			var areaCircles = areaGroups.append("circle")
				.at({
					cy: d => -areaScale(d),
					r: d => areaScale(d),
					fill: "none",
					stroke: "#74736c"
				});
			var areaLines = areaGroups.append("line")
				.at({
					y1: d => -2*areaScale(d),
					y2: d => -2*areaScale(d),
					x2: 50,
					stroke: "#74736c"
				});
			var areaNames = areaGroups.append("text.shadow")
				.at({
					y: d => -2*areaScale(d)+5,
					x: 50
				})
				.html(d => (d/1000000) + "m");

			// Define a region colour scale
			var colours = d3.scaleOrdinal()
				.range(['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f'])
				.domain(data.map(d => d.region).filter((element, index, array) => array.indexOf(element)===index));

			// Draw a colour legend
			var colourLegend = svg.append("g.legend").translate([width-155, height-150]);
			var colourGroups = colourLegend.selectAll("g")
				.data(colours.domain())
				.enter()
				.append("g")
				.translate((d,i) => [0, i*20]);
			var colourNames = colourGroups.append("text.shadow")
				.html(d => d);
			var colourDots = colourGroups.append("circle")
				.at({
					cx: -8,
					cy: -5,
					r: 5,
					fill: d => colours(d)
				})

			// Draw and position a group element for each country
			var countries = svg.selectAll("g.country")
				.data(data)
				.enter()
				.append("g.country")
				.translate(d => [x(d.gdpPerCap10), y(d.lifeEx)]);

			// Draw a bubble for each country
			var bubbles = countries.append("circle")
				.at({
					r: d => areaScale(d.population)
				})
				.st({
					fill: d => colours(d.region),
					"fill-opacity": 0.6,
					stroke: d => colours(d.region)
				});

			labels.forEach(function(d){
					countries.filter(v => v.label == d.label)
						.selectAll("text.label")
						.data([d])
						.enter()
						.append("text.label.shadow")
						.html(d.label);

					countries.selectAll(".label").filter(v => v.label == d.label)
						.translate(d.translate);

					countries.filter(v => v.label == d.label)
						.selectAll("path")
						.data([d])
						.enter()
						.insert("path","text")
						.attr("d", d.path)
						.style("fill", "none")
						.style("stroke", "#74736c");
				});
			
			countries.on("dblclick", function(d){
				var selection = d3.select(this);

				selection.selectAll("*:not(circle)").remove();
				labels.splice(labels.map(a => a.label).indexOf(selection.data()[0].label),1);
			});

			countries.on("click", function(d){
				var selection = d3.select(this);

				selection
					.selectAll("text.label")
					.data([d])
					.enter()
					.append("text.label.shadow")
					.html(d.label);

				if(labels.map(a => a.label).indexOf(selection.data()[0].label)<0){
					labels.push({
						label: selection.data()[0].label
					});
				};		

				countries.selectAll(".label")
				.st({cursor: "pointer"})
				.call(
					d3.drag()
						.on("drag", function(){
							var selection = d3.select(this);
							var dataPoint = data[data.map(a => a.label).indexOf(selection.data()[0].label)];

							selection
								.translate([d3.event.x, d3.event.y])
								.st({cursor: "crosshair"});

							if(calculateDistance(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1], x(dataPoint.gdpPerCap10), y(dataPoint.lifeEx)) > areaScale(dataPoint.population)){

								var path = d3.select(selection.node().parentNode)
									.selectAll("path")
									.data(["M " + (d3.event.x + selection.node().getBoundingClientRect().width/2) + ", " + d3.event.y + " A 30 30 0 0 0 0,0"], p => p);

								path
									.attr("d", p => p)
									.style("fill", "none")
									.style("stroke", "#74736c");

								path.exit().remove()

								path.enter()
									.insert("path","text")
									.attr("d", p => p)
									.style("fill", "none")
									.style("stroke", "#74736c");

							}else{
								var path = d3.select(selection.node().parentNode)
									.selectAll("path")
									.remove();
							}
						})
						.on("end", function(){
							var selection = d3.select(this);
							var dataPoint = data[data.map(a => a.label).indexOf(selection.data()[0].label)];

							selection
								.st({cursor: "pointer"});
							if(labels.map(a => a.label).indexOf(selection.data()[0].label)>=0){
								labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].translate = [d3.event.x, d3.event.y];

								if(calculateDistance(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1], x(dataPoint.gdpPerCap10), y(dataPoint.lifeEx)) > areaScale(dataPoint.population)){
								labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].path = d3.select(selection.node().parentNode).select("path").attr("d");
								}else{
									delete labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].path;
								}

							}else{
								labels.push({
									label: selection.data()[0].label,
									translate: [d3.event.x, d3.event.y],
									path: d3.select(selection.node().parentNode).select("path").attr("d")
								});
							}
						})
					);
				});

				countries.selectAll(".label")
				.st({cursor: "pointer"})
				.call(
					d3.drag()
						.on("drag", function(){
							var selection = d3.select(this);
							var dataPoint = data[data.map(a => a.label).indexOf(selection.data()[0].label)];

							selection
								.translate([d3.event.x, d3.event.y])
								.st({cursor: "crosshair"});

							if(calculateDistance(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1], x(dataPoint.gdpPerCap10), y(dataPoint.lifeEx)) > areaScale(dataPoint.population)){

								var path = d3.select(selection.node().parentNode)
									.selectAll("path")
									.data(["M " + (d3.event.x + selection.node().getBoundingClientRect().width/2) + ", " + d3.event.y + " A 30 30 0 0 0 0,0"], p => p)

								path
									.attr("d", p => p)
									.style("fill", "none")
									.style("stroke", "#74736c");

								path.exit().remove()

								path.enter()
									.insert("path","text")
									.attr("d", p => p)
									.style("fill", "none")
									.style("stroke", "#74736c");

							}else{
								var path = d3.select(selection.node().parentNode)
									.selectAll("path")
									.remove();
							}
						})
						.on("end", function(){
							var selection = d3.select(this);
							var dataPoint = data[data.map(a => a.label).indexOf(selection.data()[0].label)];

							selection
								.st({cursor: "pointer"});
							if(labels.map(a => a.label).indexOf(selection.data()[0].label)>=0){
								labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].translate = [d3.event.x, d3.event.y];
								
								if(calculateDistance(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1], x(dataPoint.gdpPerCap10), y(dataPoint.lifeEx)) > areaScale(dataPoint.population)){
								labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].path = d3.select(selection.node().parentNode).select("path").attr("d");
								}else{
									delete labels[labels.map(a => a.label).indexOf(selection.data()[0].label)].path;
								}

							}else{
								labels.push({
									label: selection.data()[0].label,
									translate: [d3.event.x, d3.event.y],
									path: d3.select(selection.node().parentNode).select("path").attr("d")
								});
							}
						})
					);


		}
			d3.csv("gapMinder2015.csv", prepare, render);

		var labels = [];

	</script>
</body>
</html>