AlexanderWingard/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [{col: "A", val: "one"},
            {col: "B", val: "two"},
            {col: "B", val: "three"},
            {col: "B", val: "four"},
            {col: "C", val: "five"},
            {col: "C", val: "six"}];

var width = 960;
var height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var nest = d3.nest()
    .key(function(d) { return d.col })
    .map(data, d3.map)

var columns = svg.selectAll(".col")
    .data(nest.keys())
    .enter()
    .append("g")
    .classed("col", true);

var xScale = d3.scale.ordinal()
    .rangeRoundPoints([0,300])
    .domain(nest.keys())

var yScales = d3.map()
nest.forEach(function(k, v) {
    var yScale = d3.scale.linear()
        .range([0, 200])
        .domain([-1, v.length])
    yScales.set(k, yScale)
})

columns.selectAll("text")
    .data(function(d, i) { return nest.get(d) })
    .enter()
    .append("text")
    .text(function(d) { return d.val })
    .attr("y",  0)
    .attr("x", function(d) { return xScale(d.col) })
    .transition()
    .duration(2000)
    .ease("elastic")
    .delay(function(d, i) { return i * 100 + xScale(d.col) * 2 })
    .attr("y", function(d, i) { return 20 + yScales.get(d.col)(i) })
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var data = [{col: "A", val: "one"},
	{col: "B", val: "two"},
	{col: "B", val: "three"},
	{col: "B", val: "four"},
	{col: "C", val: "five"},
	{col: "C", val: "six"}];

	var width = 960;
	var height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var nest = d3.nest()
	.key(function(d) { return d.col })
	.map(data, d3.map)

	var columns = svg.selectAll(".col")
	.data(nest.keys())
	.enter()
	.append("g")
	.classed("col", true);

	var xScale = d3.scale.ordinal()
	.rangeRoundPoints([0,300])
	.domain(nest.keys())

	var yScales = d3.map()
	nest.forEach(function(k, v) {
	var yScale = d3.scale.linear()
	.range([0, 200])
	.domain([-1, v.length])
	yScales.set(k, yScale)
	})

	columns.selectAll("text")
	.data(function(d, i) { return nest.get(d) })
	.enter()
	.append("text")
	.text(function(d) { return d.val })
	.attr("y", 0)
	.attr("x", function(d) { return xScale(d.col) })
	.transition()
	.duration(2000)
	.ease("elastic")
	.delay(function(d, i) { return i * 100 + xScale(d.col) * 2 })
	.attr("y", function(d, i) { return 20 + yScales.get(d.col)(i) })
	</script>