dgwyer/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - x-position encoding and color encoding
d3.scale.linear - y-position encoding
d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes

forked from mbostock's block: Grouped Bar Chart

  
## data.csv

          
            Genres
            Bob
            Sally
            Jane
            Tim
            Daniel
            Sara
            Tom

            
              Action
              27
              44
              21
              38
              10
              88
              41

            
              Comedy
              20
              32
              14
              24
              70
              56
              24

            
              Horror
              12
              21
              10
              99
              53
              51
              26

            
              Sci-Fi
              11
              19
              92
              67
              47
              87
              31

            
              Romance
              89
              15
              72
              13
              35
              32
              15

            
              Drama
              73
              13
              67
              12
              31
              34
              19

## index.html
<!DOCTYPE html>
<style>

.axis .domain {
  display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x0 = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.1);

var x1 = d3.scaleBand()
    .padding(0.05);

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

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.csv("data.csv", function(d, i, columns) {
  for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
  return d;
}, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1);

  x0.domain(data.map(function(d) { return d.Genres; }));
  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

  g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + x0(d.Genres) + ",0)"; })
    .selectAll("rect")
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
    .enter().append("rect")
      .attr("x", function(d) { return x1(d.key); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x1.bandwidth())
      .attr("height", function(d) { return height - y(d.value); })
      .attr("fill", function(d) { return z(d.key); });

  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x0));

  g.append("g")
      .attr("class", "axis")
      .call(d3.axisLeft(y).ticks(null, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks().pop()) + 0.5)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      .text("Population");

  var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});

</script>
Genres	Bob	Sally	Jane	Tim	Daniel	Sara	Tom
Action	27	44	21	38	10	88	41
Comedy	20	32	14	24	70	56	24
Horror	12	21	10	99	53	51	26
Sci-Fi	11	19	92	67	47	87	31
Romance	89	15	72	13	35	32	15
Drama	73	13	67	12	31	34	19
	<!DOCTYPE html>
	<style>

	.axis .domain {
	display: none;
	}

	</style>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x0 = d3.scaleBand()
	.rangeRound([0, width])
	.paddingInner(0.1);

	var x1 = d3.scaleBand()
	.padding(0.05);

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

	var z = d3.scaleOrdinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	d3.csv("data.csv", function(d, i, columns) {
	for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
	return d;
	}, function(error, data) {
	if (error) throw error;

	var keys = data.columns.slice(1);

	x0.domain(data.map(function(d) { return d.Genres; }));
	x1.domain(keys).rangeRound([0, x0.bandwidth()]);
	y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

	g.append("g")
	.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function(d) { return "translate(" + x0(d.Genres) + ",0)"; })
	.selectAll("rect")
	.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
	.enter().append("rect")
	.attr("x", function(d) { return x1(d.key); })
	.attr("y", function(d) { return y(d.value); })
	.attr("width", x1.bandwidth())
	.attr("height", function(d) { return height - y(d.value); })
	.attr("fill", function(d) { return z(d.key); });

	g.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x0));

	g.append("g")
	.attr("class", "axis")
	.call(d3.axisLeft(y).ticks(null, "s"))
	.append("text")
	.attr("x", 2)
	.attr("y", y(y.ticks().pop()) + 0.5)
	.attr("dy", "0.32em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.text("Population");

	var legend = g.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor", "end")
	.selectAll("g")
	.data(keys.slice().reverse())
	.enter().append("g")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 19)
	.attr("width", 19)
	.attr("height", 19)
	.attr("fill", z);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9.5)
	.attr("dy", "0.32em")
	.text(function(d) { return d; });
	});

	</script>