jfsiii/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto;
      position: relative;
      width: 960px;
    }

    text {
      font: 10px sans-serif;
    }

    .axis path {
      display: none;
    }

    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .group-label {
      font-weight: bold;
      text-anchor: end;
    }

    form {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  </style>
</head>
<body>
  <form>
    <label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
    <label><input type="radio" name="mode" value="stacked"> Stacked</label>
  </form>
</body>
</html>

## index.js
import d3 from 'd3'

const stacksTSV = 'https://gist.githubusercontent.com/jfsiii/9c286eabcc93605e48ea/raw/38a853bcd1f53f5f1f6286ec4342ae766c98f5eb/data.tsv';

d3.tsv(stacksTSV, function(error, data) {

  const parseDate = d3.time.format("%Y-%m").parse,
      formatYear = d3.format("02d"),
      formatDate = d => "Q" + ((d.getMonth() / 3 | 0) + 1) + formatYear(d.getFullYear() % 100);

  const margin = {top: 10, right: 20, bottom: 20, left: 60},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  const y0 = d3.scale.ordinal()
      .rangeRoundBands([height, 0], 0.2);

  const y1 = d3.scale.linear();

  const x = d3.scale.ordinal()
      .rangeRoundBands([0, width], 0.1, 0);

  const xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(formatDate);

  const nestedByGroup = d3.nest().key(d => d.group);

  const stack = d3.layout.stack()
      .values(d => d.values)
      .x(d => d.date)
      .y(d => d.value)
      .out((d, y0) => d.valueOffset = y0);

  const color = d3.scale.category10();

  const 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})`);

  data.forEach(d => {
    d.date = parseDate(d.date);
    d.value = +d.value;
  });

  const dataByGroup = nestedByGroup.entries(data);

  stack(dataByGroup);
  x.domain(dataByGroup[0].values.map(d => d.date));
  y0.domain(dataByGroup.map(d => d.key));
  y1.domain([0, d3.max(data, d => d.value)]).range([y0.rangeBand(), 0]);

  const group = svg.selectAll(".group")
      .data(dataByGroup)
    .enter().append("g")
      .attr("class", "group")
      .attr("transform", d => `translate(0, ${ y0(d.key) })`);

  group.append("text")
      .attr({
        class: "group-label",
        x: -6,
        y: d => y1(d.values[0].value / 2),
        dy: ".35em"
      })
      .text(d => "Group " + d.key);

  group.selectAll("rect")
      .data(d => d.values)
    .enter()
      .append("rect")
      .style({fill: d => color(d.group)})
      .attr({
        x: d => x(d.date),
        y: d => y1(d.value),
        width: x.rangeBand(),
        height: d => y0.rangeBand() - y1(d.value)
      });

  group.selectAll(".value-label")
      .data(d => d.values)
    .enter()
      .append("text")
      .style({
        fill: "white",
        "font-size": "12px"
       })
      .attr({
        class: "value-label",
        x: d => x(d.date),
        y: y0.rangeBand(),
        dx: ".20em",
        dy: "-.20em"
      })
      .text((d) => d.value);

  group.filter((d, i) => !i).append("g")
      .attr({
        class: "x axis",
        transform: `translate(0,${ y0.rangeBand() })`
      })
      .call(xAxis);

  d3.selectAll("input").on("change", change);

  const timeout = setTimeout(() => {
    d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
  }, 2000);

  function change() {
    clearTimeout(timeout);
    if (this.value === "multiples") transitionMultiples();
    else transitionStacked();
  }

  function transitionMultiples() {
    const t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", d => `translate(0,${ y0(d.key) })`);
    g.selectAll("rect").attr("y", d => y1(d.value));
    g.select(".group-label").attr("y", d => y1(d.values[0].value / 2));

    g.selectAll(".value-label")
      .attr("y", y0.rangeBand())
      .style("opacity", 1)
      .text(d => d.value);
  }

  function transitionStacked() {
    const t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", `translate(0,${ y0(y0.domain()[0]) })`);
    g.selectAll("rect").attr("y", d => y1(d.value + d.valueOffset));
    g.select(".group-label").attr("y", d => y1(d.values[0].value / 2 + d.values[0].valueOffset));

    g.selectAll(".value-label")
      .attr("y", y1(0))
      .style("opacity", (d,i,j) => j === 3 ? "1" : "0")
      .text((d,i) => d.valueOffset + d.value);
  }
});

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "d3": "3.5.16"
  }
}

## transpiled.js
'use strict';

var _d = require('d3');

var _d2 = _interopRequireDefault(_d);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var stacksTSV = 'https://gist.githubusercontent.com/jfsiii/9c286eabcc93605e48ea/raw/38a853bcd1f53f5f1f6286ec4342ae766c98f5eb/data.tsv';

_d2.default.tsv(stacksTSV, function (error, data) {

    var parseDate = _d2.default.time.format("%Y-%m").parse,
        formatYear = _d2.default.format("02d"),
        formatDate = function formatDate(d) {
        return "Q" + ((d.getMonth() / 3 | 0) + 1) + formatYear(d.getFullYear() % 100);
    };

    var margin = { top: 10, right: 20, bottom: 20, left: 60 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var y0 = _d2.default.scale.ordinal().rangeRoundBands([height, 0], 0.2);

    var y1 = _d2.default.scale.linear();

    var _x = _d2.default.scale.ordinal().rangeRoundBands([0, width], 0.1, 0);

    var xAxis = _d2.default.svg.axis().scale(_x).orient("bottom").tickFormat(formatDate);

    var nestedByGroup = _d2.default.nest().key(function (d) {
        return d.group;
    });

    var stack = _d2.default.layout.stack().values(function (d) {
        return d.values;
    }).x(function (d) {
        return d.date;
    }).y(function (d) {
        return d.value;
    }).out(function (d, y0) {
        return d.valueOffset = y0;
    });

    var color = _d2.default.scale.category10();

    var svg = _d2.default.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 + ')');

    data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
    });

    var dataByGroup = nestedByGroup.entries(data);

    stack(dataByGroup);
    _x.domain(dataByGroup[0].values.map(function (d) {
        return d.date;
    }));
    y0.domain(dataByGroup.map(function (d) {
        return d.key;
    }));
    y1.domain([0, _d2.default.max(data, function (d) {
        return d.value;
    })]).range([y0.rangeBand(), 0]);

    var group = svg.selectAll(".group").data(dataByGroup).enter().append("g").attr("class", "group").attr("transform", function (d) {
        return 'translate(0, ' + y0(d.key) + ')';
    });

    group.append("text").attr({
        class: "group-label",
        x: -6,
        y: function y(d) {
            return y1(d.values[0].value / 2);
        },
        dy: ".35em"
    }).text(function (d) {
        return "Group " + d.key;
    });

    group.selectAll("rect").data(function (d) {
        return d.values;
    }).enter().append("rect").style({ fill: function fill(d) {
            return color(d.group);
        } }).attr({
        x: function x(d) {
            return _x(d.date);
        },
        y: function y(d) {
            return y1(d.value);
        },
        width: _x.rangeBand(),
        height: function height(d) {
            return y0.rangeBand() - y1(d.value);
        }
    });

    group.selectAll(".value-label").data(function (d) {
        return d.values;
    }).enter().append("text").style({
        fill: "white",
        "font-size": "12px"
    }).attr({
        class: "value-label",
        x: function x(d) {
            return _x(d.date);
        },
        y: y0.rangeBand(),
        dx: ".20em",
        dy: "-.20em"
    }).text(function (d) {
        return d.value;
    });

    group.filter(function (d, i) {
        return !i;
    }).append("g").attr({
        class: "x axis",
        transform: 'translate(0,' + y0.rangeBand() + ')'
    }).call(xAxis);

    _d2.default.selectAll("input").on("change", change);

    var timeout = setTimeout(function () {
        _d2.default.select("input[value=\"stacked\"]").property("checked", true).each(change);
    }, 2000);

    function change() {
        clearTimeout(timeout);
        if (this.value === "multiples") transitionMultiples();else transitionStacked();
    }

    function transitionMultiples() {
        var t = svg.transition().duration(750),
            g = t.selectAll(".group").attr("transform", function (d) {
            return 'translate(0,' + y0(d.key) + ')';
        });
        g.selectAll("rect").attr("y", function (d) {
            return y1(d.value);
        });
        g.select(".group-label").attr("y", function (d) {
            return y1(d.values[0].value / 2);
        });

        g.selectAll(".value-label").attr("y", y0.rangeBand()).style("opacity", 1).text(function (d) {
            return d.value;
        });
    }

    function transitionStacked() {
        var t = svg.transition().duration(750),
            g = t.selectAll(".group").attr("transform", 'translate(0,' + y0(y0.domain()[0]) + ')');
        g.selectAll("rect").attr("y", function (d) {
            return y1(d.value + d.valueOffset);
        });
        g.select(".group-label").attr("y", function (d) {
            return y1(d.values[0].value / 2 + d.values[0].valueOffset);
        });

        g.selectAll(".value-label").attr("y", y1(0)).style("opacity", function (d, i, j) {
            return j === 3 ? "1" : "0";
        }).text(function (d, i) {
            return d.valueOffset + d.value;
        });
    }
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	text {
	font: 10px sans-serif;
	}

	.axis path {
	display: none;
	}

	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.group-label {
	font-weight: bold;
	text-anchor: end;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}
	</style>
	</head>
	<body>
	<form>
	<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
	<label><input type="radio" name="mode" value="stacked"> Stacked</label>
	</form>
	</body>
	</html>
	import d3 from 'd3'

	const stacksTSV = 'https://gist.githubusercontent.com/jfsiii/9c286eabcc93605e48ea/raw/38a853bcd1f53f5f1f6286ec4342ae766c98f5eb/data.tsv';

	d3.tsv(stacksTSV, function(error, data) {

	const parseDate = d3.time.format("%Y-%m").parse,
	formatYear = d3.format("02d"),
	formatDate = d => "Q" + ((d.getMonth() / 3 \| 0) + 1) + formatYear(d.getFullYear() % 100);

	const margin = {top: 10, right: 20, bottom: 20, left: 60},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	const y0 = d3.scale.ordinal()
	.rangeRoundBands([height, 0], 0.2);

	const y1 = d3.scale.linear();

	const x = d3.scale.ordinal()
	.rangeRoundBands([0, width], 0.1, 0);

	const xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickFormat(formatDate);

	const nestedByGroup = d3.nest().key(d => d.group);

	const stack = d3.layout.stack()
	.values(d => d.values)
	.x(d => d.date)
	.y(d => d.value)
	.out((d, y0) => d.valueOffset = y0);

	const color = d3.scale.category10();

	const 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})`);

	data.forEach(d => {
	d.date = parseDate(d.date);
	d.value = +d.value;
	});

	const dataByGroup = nestedByGroup.entries(data);

	stack(dataByGroup);
	x.domain(dataByGroup[0].values.map(d => d.date));
	y0.domain(dataByGroup.map(d => d.key));
	y1.domain([0, d3.max(data, d => d.value)]).range([y0.rangeBand(), 0]);

	const group = svg.selectAll(".group")
	.data(dataByGroup)
	.enter().append("g")
	.attr("class", "group")
	.attr("transform", d => `translate(0, ${ y0(d.key) })`);

	group.append("text")
	.attr({
	class: "group-label",
	x: -6,
	y: d => y1(d.values[0].value / 2),
	dy: ".35em"
	})
	.text(d => "Group " + d.key);

	group.selectAll("rect")
	.data(d => d.values)
	.enter()
	.append("rect")
	.style({fill: d => color(d.group)})
	.attr({
	x: d => x(d.date),
	y: d => y1(d.value),
	width: x.rangeBand(),
	height: d => y0.rangeBand() - y1(d.value)
	});

	group.selectAll(".value-label")
	.data(d => d.values)
	.enter()
	.append("text")
	.style({
	fill: "white",
	"font-size": "12px"
	})
	.attr({
	class: "value-label",
	x: d => x(d.date),
	y: y0.rangeBand(),
	dx: ".20em",
	dy: "-.20em"
	})
	.text((d) => d.value);

	group.filter((d, i) => !i).append("g")
	.attr({
	class: "x axis",
	transform: `translate(0,${ y0.rangeBand() })`
	})
	.call(xAxis);

	d3.selectAll("input").on("change", change);

	const timeout = setTimeout(() => {
	d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
	}, 2000);

	function change() {
	clearTimeout(timeout);
	if (this.value === "multiples") transitionMultiples();
	else transitionStacked();
	}

	function transitionMultiples() {
	const t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", d => `translate(0,${ y0(d.key) })`);
	g.selectAll("rect").attr("y", d => y1(d.value));
	g.select(".group-label").attr("y", d => y1(d.values[0].value / 2));

	g.selectAll(".value-label")
	.attr("y", y0.rangeBand())
	.style("opacity", 1)
	.text(d => d.value);
	}

	function transitionStacked() {
	const t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", `translate(0,${ y0(y0.domain()[0]) })`);
	g.selectAll("rect").attr("y", d => y1(d.value + d.valueOffset));
	g.select(".group-label").attr("y", d => y1(d.values[0].value / 2 + d.values[0].valueOffset));

	g.selectAll(".value-label")
	.attr("y", y1(0))
	.style("opacity", (d,i,j) => j === 3 ? "1" : "0")
	.text((d,i) => d.valueOffset + d.value);
	}
	});
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"d3": "3.5.16"
	}
	}
	'use strict';

	var _d = require('d3');

	var _d2 = _interopRequireDefault(_d);

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var stacksTSV = 'https://gist.githubusercontent.com/jfsiii/9c286eabcc93605e48ea/raw/38a853bcd1f53f5f1f6286ec4342ae766c98f5eb/data.tsv';

	_d2.default.tsv(stacksTSV, function (error, data) {

	var parseDate = _d2.default.time.format("%Y-%m").parse,
	formatYear = _d2.default.format("02d"),
	formatDate = function formatDate(d) {
	return "Q" + ((d.getMonth() / 3 \| 0) + 1) + formatYear(d.getFullYear() % 100);
	};

	var margin = { top: 10, right: 20, bottom: 20, left: 60 },
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var y0 = _d2.default.scale.ordinal().rangeRoundBands([height, 0], 0.2);

	var y1 = _d2.default.scale.linear();

	var _x = _d2.default.scale.ordinal().rangeRoundBands([0, width], 0.1, 0);

	var xAxis = _d2.default.svg.axis().scale(_x).orient("bottom").tickFormat(formatDate);

	var nestedByGroup = _d2.default.nest().key(function (d) {
	return d.group;
	});

	var stack = _d2.default.layout.stack().values(function (d) {
	return d.values;
	}).x(function (d) {
	return d.date;
	}).y(function (d) {
	return d.value;
	}).out(function (d, y0) {
	return d.valueOffset = y0;
	});

	var color = _d2.default.scale.category10();

	var svg = _d2.default.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 + ')');

	data.forEach(function (d) {
	d.date = parseDate(d.date);
	d.value = +d.value;
	});

	var dataByGroup = nestedByGroup.entries(data);

	stack(dataByGroup);
	_x.domain(dataByGroup[0].values.map(function (d) {
	return d.date;
	}));
	y0.domain(dataByGroup.map(function (d) {
	return d.key;
	}));
	y1.domain([0, _d2.default.max(data, function (d) {
	return d.value;
	})]).range([y0.rangeBand(), 0]);

	var group = svg.selectAll(".group").data(dataByGroup).enter().append("g").attr("class", "group").attr("transform", function (d) {
	return 'translate(0, ' + y0(d.key) + ')';
	});

	group.append("text").attr({
	class: "group-label",
	x: -6,
	y: function y(d) {
	return y1(d.values[0].value / 2);
	},
	dy: ".35em"
	}).text(function (d) {
	return "Group " + d.key;
	});

	group.selectAll("rect").data(function (d) {
	return d.values;
	}).enter().append("rect").style({ fill: function fill(d) {
	return color(d.group);
	} }).attr({
	x: function x(d) {
	return _x(d.date);
	},
	y: function y(d) {
	return y1(d.value);
	},
	width: _x.rangeBand(),
	height: function height(d) {
	return y0.rangeBand() - y1(d.value);
	}
	});

	group.selectAll(".value-label").data(function (d) {
	return d.values;
	}).enter().append("text").style({
	fill: "white",
	"font-size": "12px"
	}).attr({
	class: "value-label",
	x: function x(d) {
	return _x(d.date);
	},
	y: y0.rangeBand(),
	dx: ".20em",
	dy: "-.20em"
	}).text(function (d) {
	return d.value;
	});

	group.filter(function (d, i) {
	return !i;
	}).append("g").attr({
	class: "x axis",
	transform: 'translate(0,' + y0.rangeBand() + ')'
	}).call(xAxis);

	_d2.default.selectAll("input").on("change", change);

	var timeout = setTimeout(function () {
	_d2.default.select("input[value=\"stacked\"]").property("checked", true).each(change);
	}, 2000);

	function change() {
	clearTimeout(timeout);
	if (this.value === "multiples") transitionMultiples();else transitionStacked();
	}

	function transitionMultiples() {
	var t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", function (d) {
	return 'translate(0,' + y0(d.key) + ')';
	});
	g.selectAll("rect").attr("y", function (d) {
	return y1(d.value);
	});
	g.select(".group-label").attr("y", function (d) {
	return y1(d.values[0].value / 2);
	});

	g.selectAll(".value-label").attr("y", y0.rangeBand()).style("opacity", 1).text(function (d) {
	return d.value;
	});
	}

	function transitionStacked() {
	var t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", 'translate(0,' + y0(y0.domain()[0]) + ')');
	g.selectAll("rect").attr("y", function (d) {
	return y1(d.value + d.valueOffset);
	});
	g.select(".group-label").attr("y", function (d) {
	return y1(d.values[0].value / 2 + d.values[0].valueOffset);
	});

	g.selectAll(".value-label").attr("y", y1(0)).style("opacity", function (d, i, j) {
	return j === 3 ? "1" : "0";
	}).text(function (d, i) {
	return d.valueOffset + d.value;
	});
	}
	});