D3 Examples - Bar Chart-HW4

Bar Chart

** Mark ** -- Line

** Channel ** -- Spacial X-Position and Y-Position, Length

** Data ** -- countries, Commitment Amount in $

** Attributes mapped ** -- Horizontal x-position is mapped to countries (categorical) and Vertical y-position is mapped to Amount in $ (Quantitative)

About the Chart

This bar chart shows the comparision of all the donations made by donor countries.

The X-axis takes the donor country and y-axis takes the commitment amount in $

I have choosed bar chart to represent this particular dataset because bar charts are easy to visualize the comparision. Also easy to visualise the sorting of the countries.

To reduce the dataset, I have used Mysqlphp database and with the help of queries all the countries and coressponding amount spent by all the donor countries are got. This data is used to get this bar graph and shows the comparions of the donations made by each donor country.

Insight

The graph is sorted according to the donations made by each donor country.

Germany is the highest donanted country with $ 180,000,000

Comparingly we have thiland and Estonia as least donanting countries.

When looking at this chart we can also notice that United States and Germany donating much hiegher amount compaperd to all the other countries, almost with $120,000,000 diferrence, which is huge fluctuation

References

Bar Chart - d3noob’s Block for bar chart code.

Rotated axis labels in v4 - Labeling the x-aixs of bar chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
​
.bar { fill: steelblue; }
​
</style>
<body>
    
<!-- load the d3.js library -->     
<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: 70, left: 100},
    width = 960 - margin.left - margin.right,
    height = 450 - 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.csv("bar-data.csv", function(error, data) {
  if (error) throw error;
​
  // format the data
  data.forEach(function(d) {
    d.value = +d.value;
  });
​
  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);
​
  // 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.date); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });
​
  // add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + (height ) + ")")
      .call(d3.axisBottom(x))
    .selectAll("text")
        .attr("dx", "-3.75em")
      .attr("dy", "-.55em")
        .attr("transform", "rotate(-75)" );
​
  // text label for the x axis
  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("Donor Countries");
  
  // 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("Commitment amount in $");
​
});
​
</script>
</body>
​
    