Avg Ridership in MTA

This stacked bar chart is showing the top oscar nominated directors and showing the awards that each director was nominated for and of those awards how many each director won. This data is part of the data found from Kaggle: The Academy Awards, 1927-2015. Finding the top direcotrs and how many awards they were nominated for and won were found using Microsoft Access.

forked from mbostock's block: Stacked Bar Chart

forked from emilyw15's block: Oscar Nominated Directors

<!DOCTYPE html>
  
<style>

.axis .domain {
  display: none;
}
  
  .tick text {
        font-size: 9pt;
        font-family: sans-serif;
      }

</style>
<title>Oscar Nominated Directors</title>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 70, bottom: 110, left: 70},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const xAxisG = g.append('g')
	.attr('transform', `translate(0, ${height})`);
const yAxisG = g.append('g');
  
  xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', width / 2)
          .attr('y', 60)
          .text("Month");
  
  yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -height / 2)
          .attr('y', -50)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text("Avg Riders");
  
var x = d3.scaleBand()
    .range([0, width])
    .paddingInner(0.05)
    .align(0.1);

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

var z = d3.scaleOrdinal()
    .range(["#7fc97f", "#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"]);

d3.csv("commuter_ridership.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}, function(error, data) {
  if (error) throw error;

var keys = data.columns.slice(1);

data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { return d.Month; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);
  
  const xAxis = d3.axisBottom()
        .scale(x)
        .tickPadding(15);
  
  const yTicks = 10;
   const yAxis = d3.axisLeft()
        .scale(y)
        .ticks(yTicks)
        .tickPadding(15);

g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) { return z(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
      .attr("x", function(d) { return x(d.data.Month); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width", x.bandwidth());

g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

g.append("g")
      .attr("class", "axis")
      .call(yAxis);

var legend = g.append("g")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10)
      .attr("text-anchor", "end")
    .selectAll("g")
    .data(keys.slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});

</script>

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