S18 - HW 4 - Bar Chart

Marks and Channels
A line mark is used for the bar chart. Each line mark represents the amount of money that has been donated by a country during the years 1991-2010.

There is a length channel and sometimes a color hue channel. The length channel is mapped to the total_commitment_amount attribute. The total_commitment_amount attribute is quantitative and it represents the amount of money that has been donated during the years 1991-2010. The color hue channel is used when one block is being hovered over. The color hue channel is mapped to the donor attribute. The donor attribute is categorical and it represents a country.

Chart Explanation
This bar chart shows 10 countries that have made the most donations during the years 1991-2010.

Insight
I was surprised that the top 2 countries donated a lot more money than the other countries in the top 10.

Refrences
AirData - was used to get data for the chart
https://bost.ocks.org/mike/bar/
https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .bar:hover{
      fill: yellow;
    }
    
    .grid line{
      stroke: lightgrey;
      stroke-opacity: 0.8;
    }
  </style>
</head>

<body>
  <script>
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 400);

g.selectAll(".bar")
        .data(data)
        .enter().append("rect").attr("fill", "purple")
          .attr("class", "bar")
          .attr("x", function(d){return x(d3.max(data) - d.total_commitment_amount);})
          .attr("y", function(d){return y(d.donor);})
          .attr("transform", "translate(81, 0)")
          .attr("width", function(d){return x(d.total_commitment_amount) - 80;})
          .attr("height", y.bandwidth());
      
      
      
    });
  </script>
</body>

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