Grouped Bar Chart

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

Built with blockbuilder.org

About

This bar chart is constructed from a TSV file storing the exam grades of students in an imaginary Visual Analytics class. The next section presents the visualization analysis based on Tamara's Analytics framework.

What, Why and How Analysis

What: The dataset is formed by a table, with an ordinal attribute (the student code) and a quantitative attribute (the exam's grades).

Why: The following are the two main tasks this viz is made for:

Present (action) the distribution (target) of exam grades among the whole class.
Discover (action) special features (target) as the number of students who failed the exam.
Identify the exam grade for a specific student.

How: I used the line as the mark and the length as the channel. The visualization presents the data sorted by the exam grades, in descending order.

Decisions

1. I used the line mark and the channel length to represent the quantitative attribute exam notes, since the length is the best positioned channel in perception assessments of experts.

2. The data is sorted by the score on the exam, which let identify the highest and the lowest score, and know how many people lost the test. You may find outliers too, like the 5.2 value (I assume the exam grades range goes from 0.0 to 5.0).

3. The color channel was not used to represent the ordinal attribute of the students, because the number of students (23) need many hues or scales luminescence, which does not really contribute in the representation. The student code label on each data was used instead, which let identify the score obtained for each student.

What was not so well?

The student code label is not visible to a very small bar (eg 0.11).

The channel color may be useful to mark in red scores under 3.0, to identify first glance students failed the exam.

......................................................................................

forked from mbostock's block: Grouped Bar Chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	body {
	  font: 10px sans-serif;
	}

.axis path,
	.axis line {
	  fill: none;
	  stroke: #f56f6f;
	  shape-rendering: crispEdges;
	}

.bar {
	  fill: steelblue;
	}

.x.axis path {
	  display: none;
	}
</style>
<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
		width = 1000 - margin.left - margin.right,
		height = 400 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
		.rangeRoundBands([0, width - 150], .1);

var x1 = d3.scale.ordinal();

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

var color = d3.scale.ordinal()
		.range(["#F79620", "#F5C918", "#FF6600", "#707FBE", "#3669B3", "#009ACC", "#008C8C", "#3EBCA2","#2DB45F"]);
	  
	var xAxis = d3.svg.axis()
		.scale(x0)
		.orient("bottom");

var yAxis = d3.svg.axis()
		.scale(y)
		.orient("left")
		.tickFormat(d3.format(".2s"));

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 + ")");

d3.csv("data.csv", function(error, data) {
		if (error) throw error;

var epiNames = d3.keys(data[0]).filter(function(key) { 		     return key !== "Country"; });

data.forEach(function(d) {
		d.epi = epiNames.map(function(name) { return {name: name, value: +d[name]}; });
		});

x0.domain(data.map(function(d) { return d.Country; }));
		x1.domain(epiNames).rangeRoundBands([0, x0.rangeBand()]);
		y.domain([0, d3.max(data, function(d) { return d3.max(d.epi, function(d) { return d.value; }); })]);

svg.append("g")
		  .attr("class", "x axis")
		  .attr("transform", "translate(0," + height + ")")
		  .call(xAxis);
    
		svg.append("g")
		  .attr("class", "y axis")
		  .call(yAxis)
		.append("text")
		  .attr("transform", "rotate(-90)")
		  .attr("y", 5)
		  .attr("dy", ".71em")
		  .style("text-anchor", "end")
		  .text("Environmental Performance Index");

var country = svg.selectAll(".country")
		  .data(data)
		.enter().append("g")
		  .attr("class", "country")
		  .attr("transform", function(d) { return "translate(" + x0(d.Country) + ",0)"; });

country.selectAll("rect")
		  .data(function(d) { return d.epi; })
		.enter().append("rect").attr("width", x1.rangeBand())
		  .attr("x", function(d) { return x1(d.name); })
		  .attr("y", function(d) { return y(d.value); })
		  .attr("height", function(d) { return height - y(d.value); })
    .on("mouseover", function(d, i) {
                div.style("left", d3.event.pageX+10+"px");
                div.style("top", d3.event.pageY-25+"px");
                div.style("display", "inline-block");
                div.html((d.Country)+"<br> "+(d.CurrentContry*100)+"%");
  			})
		  .style("fill", function(d) { return color(d.name); });

var legend = svg.selectAll(".legend")
		  .data(epiNames.slice())
		  .enter().append("g")
		  .attr("class", "legend")
		  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
		  .attr("x", width - 18)
		  .attr("width", 18)
		  .attr("height", 18)
		  .style("fill", color);

legend.append("text")
		  .attr("x", width - 24)
		  .attr("y", 9)
		  .attr("dy", ".35em")
		  .style("text-anchor", "end")
		  .text(function(d) { return d; });
	});

</script>

https://d3js.org/d3.v3.min.js