S18 - HW 4 - Bar Chart

CS 725/825 - Spring 2018 - Homework 4 - Bar Chart

Q1. What are the marks/channels used and the data/attributes they map to?

The mark for the bar chart is a line. The channel is length, which maps to the amount attribute (numerical/quantitative).

Position on the x axis which maps to the code/category attribute (label/categorical).

Q2. What does the chart show?

Shows the amounts donated to the various categories/codes for Sri Lanka.

Codes map to these descriptions:

23040 --> Electrical transmission/distribution
72050 --> Relief co-ordination; protection and support services
14020 --> Water supply & sanit. - large syst.
11420 --> Higher education
33210 --> Tourism policy and admin. management
23030 --> Power generation/renewable sources
15110 --> Public sector policy and adm. management

Q3. What are 1-2 interesting insights (i.e., things you learned from the chart)?

I learned that most of the money is spent on the water bill, i.e., water supply, treatment and sanitation (like many of us do in Hampton Roads).

Q4/References:

https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4
http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html
https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e
http://www.d3noob.org/2013/01/adding-title-to-your-d3js-graph.html

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>
	
    	
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 50, right: 20, bottom: 200, left: 40},
    width = 960 - margin.left - margin.right,
    height = 626 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);
          
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// get the data
d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
    d.amount = +d.amount/1000000;
  });

// Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.code; }));
  y.domain([0, d3.max(data, function(d) { return d.amount; })]);

// append the rectangles for the bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.code); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amount); })
      .attr("height", function(d) { return height - y(d.amount); });

// add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")  
      .call(d3.axisBottom(x))
      .selectAll("text")  
      .style("text-anchor", "start")
      .attr("dx", "0.68em")
      .attr("dy", "0.157876224em")
      .attr("transform", "rotate(55)" );

// add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));
  
     // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Amount ($) in Millions");      
  
    // text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width / 2) + " ," + 
                           (height + margin.top + 125 ) + ")")
      .style("text-anchor", "middle")
      .text("Category Code/Description");
  
  svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top / 2))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Donations to Sri Lanka by Category");

});

</script>
</body>

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