Hariharan Thiyagarajan
CS 725/825
Spring 2018
Homework 4 - Bar Chart using Aid Data
Marks Used
Channel and Attribute
Length and position is the channel used in the Bar chart
They are mapped to the attribute Country and amount. The data type of Country attribute is Categorical and amount is Quantitative
The bar chart represents the Top 10 european countries who donated the least and it is sorted in descending order.
If we look at the csv data Austria has donated 20 times and Netherlands have donated only 11 times but still Netherlands donated over 1400 million which is 7 times higher than Austria.
I consolidated the data using Open refine and excel.
Reference
xxxxxxxxxx
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <!-- for color scales -->
<style>
body {font-family: calibri;}
.axis {font: 14px calibri;}
.label {font: 16px calibri;}
</style>
<body>
<H2>Top 10 european countries who donated the least all together</H2>
<h2>Bar Chart using Aid data<h2>
<div><svg id="chart1" width="800" height="400"></svg></div>
<script>
// chart 1
var svg1 = d3.select("#chart1"),
margin = {top: 20, right: 93, bottom: 48, left: 60},
width = +svg1.attr("width") - margin.left - margin.right,
height = +svg1.attr("height") - margin.top - margin.bottom;
var x1 = d3.scaleBand().rangeRound([0, width]).padding(0.384),
y1 = d3.scaleLinear().rangeRound([height, 0]);
// creates new svg <g> space, sets new (0,0) at left, top margin
var g1 = svg1.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", function(d) {
d.amount = +d.amount;
// convert text to number
return d;
}, function(error, data) {
if (error) throw error;
// See https://www.dashingd3js.com/d3js-scales
// maps domain of x values (donor) to range of positions on x-axis
x1.domain(data.map(function(d) { return d.donor; }));
// maps domain of y values (amount 0, max amount in millions) to range of positions on y-axis
y1.domain([0, d3.max(data, function(d) { return d.amount; })]);
// x-axis
g1.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
.call(d3.axisBottom(x1));
// y-axis
g1.append("g")
.attr("class", "axis y-axis")
.call(d3.axisLeft(y1));
// y-axis label
g1.append("text")
.attr("class", "label")
.attr("x", 0-margin.left) // set x position of label
.attr("y", 0-margin.top/2) // set y position of label
.style("text-anchor", "start") // left-justify
.text ("amount in million $")
.style("fill", "steelblue")
g1.append("text")
.attr("class", "label")
.attr("x", width/2.7) // set x position of label
.attr("y", height+(margin.bottom*0.90)) // set y position of label
.style("text-anchor", "start") // left-justify
.text ("Countries")
.style("fill", "steelblue")
// bars
var color = d3.schemeCategory20;
g1.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { console.log ("donor: " + d.donor + ", x: " + x1(d.donor)); return x1(d.donor); })
.attr("y", function(d) { console.log ("amount: " + d.amount + ", y: " + y1(d.amount)); return y1(d.amount); })
.attr("width", x1.bandwidth()) // width of each band
.attr("height", function(d) { return height - y1(d.amount); })
.style("fill", "teal")// color of the bars
;
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js