D3 Examples - Oscar Nominated Directors

Oscar Nominated Directors

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.

xxxxxxxxxx
 
<!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("Directors");
  
  yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -height / 2)
          .attr('y', -50)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text("Nominations");
  
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(["#FF0000", "#3769FF"]);
​
d3.csv("Best_Directors.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.Directors; }));
  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.Directors); })
      .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>
​
​
    