D3 Examples - It's been a good 17 years for Californians who kind-of-don't-really care about sports

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
  <link rel="stylesheet" href="//rawgithub.com/Caged/d3-tip/master/examples/example-styles.css">
​
  
  <style>
​
  .rectangle {
    stroke: black;
    stroke-opacity: 0.25;
  }
​
  .bars {
    stroke: black;
    /*fill: white;*/
  }
​
  h1 {
    font-family: "Helvetica";
    font-size: 1.5em;
    text-align: center;
    padding: 1em;
    width: 895px;
  }
​
  .d3-tip {
    font-family: "Helvetica", sans-serif;
    font-size: 0.75em;
  }
​
  </style>
​
​
</head>
​
<body>
​
<h1>National Championships won by State</h1>
<svg width="960" height="300"></svg>
<div id="barchart"></div>
​
<script>
​
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = 500;
var padding = 65;
var barsvg = d3.select("#barchart").append("svg").attr("width", width).attr("height", height);
​
​
  d3.queue()
    .defer(d3.csv, "nationalchampionships.csv")
  .await(filesLoaded)
​
  function filesLoaded(error, nc) {
​
    var xScale = d3.scaleBand()
                   .domain([2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016])
                   .range([0, width - 2*padding]);
​
    var stateMaxHeight = 300;
​
    var yScale = d3.scaleBand()
                   .domain(_.uniq(_.map(nc, function(obj) { return obj["sport"]; })))
                   .range([0, stateMaxHeight - 2*padding]);
​
    // console.log(_.uniq(_.map(nc, function(obj) { return obj["state"]; })));
​
    
    var tip = d3.tip()
                .attr('class', 'd3-tip')
                .offset([-yScale.bandwidth()/4, 0])
                .html(function(d) { return d["info"]; });
​
   
​
  var createStateGrid = function(state) {
​
      d3.selectAll(".rectangle").remove();
​
      svg.call(tip);
​
      var graph = svg.selectAll("rect"+state)
        .data(nc).enter()
        .append("rect")
        .attr("class", "rectangle")
        .attr("x", function(d) { return xScale(d["year"]); })
        .attr("y", function(d) { return yScale(d["sport"]); })
        .attr("height", function(d) { return yScale.bandwidth(); })
        .attr("width", function(d) { return xScale.bandwidth(); })
        .attr("transform", "translate(" + padding + "," + (padding/2) + ")")
        .attr("fill", function(d) { if (d["state"] == state) { return "steelblue"; } else { return "none"; }})
        .on("mouseover", function(d) {
          if (d["state"] == state) { tip.show(d); };
        })
        .on("mouseout", function(d) {
          if (d["state"] == state) { tip.hide(d); };
        });
​
    } 
​
    var createBarGraph = function() {
​
      state_counts = _.filter(_.pairs(_.countBy(nc, function(obj) { return obj["state"]; })), function(obj) { return obj[0].length == 2; });
      state_counts = _.sortBy(state_counts, function(obj) { return obj[1]; });
​
      var yBarScale = d3.scaleBand()
                   .domain(_.map(state_counts, function(obj) { return obj[0]; }))
                   .range([0, height - 2*padding]);
​
      var xBarScale = d3.scaleLinear()
                   .domain([0, 25])
                   .range([0, width - 2*padding]);
​
      var xBarAxis = d3.axisBottom(xBarScale).tickSize(0).tickPadding(10);
    
      barsvg.append("g")
       .attr("transform", "translate("+ padding +", "+ (height - 2*padding) +")")
       .call(xBarAxis);
​
      var yBarAxis = d3.axisLeft(yBarScale).tickSize(0).tickPadding(10);
    
      barsvg.append("g")
       .attr("transform", "translate("+ padding +", "+ (0) +")")
       .call(yBarAxis);
​
      var bargraph = barsvg.selectAll("bars")
        .data(state_counts).enter()
        .append("rect")
        .attr("class", function(d) { return "bars bars"+d[0]; })
        .attr("x", function(d) { return 0; })
        .attr("y", function(d) { return yBarScale(d[0]); })
        .attr("height", function(d) { return yBarScale.bandwidth(); })
        .attr("width", function(d) { return xBarScale(d[1]); })
        .attr("fill", "white")
        .attr("transform", "translate(" + padding + "," + (0) + ")")
        .on("mouseover", function(d) {
          createStateGrid(d[0]);
          d3.selectAll(".bars").attr("fill", "white");
          d3.selectAll(".bars"+d[0]).attr("fill", "steelblue");
        })
        .on("mouseout", function(d) {
          // if (d["state"] == state) { tip.hide; console.log(d["state"]); };
        });
    } 
​
    var states = _.uniq(_.map(nc, function(obj) { return obj["state"]; }));
​
    // for (var i = states.length - 1; i >= 0; i--) {
    createStateGrid("CA");
    createBarGraph();
    d3.selectAll(".barsCA").attr("fill", "steelblue");
​
    barsvg.append("text")
      .attr("x", width - padding)
      .attr("y", height-3*padding/2)
      .attr("text-anchor", "end")
      .attr("font-family", "Helvetica")
      .attr("font-size", 12)
      .text("# of Championships");
    // }
​
    var xAxis = d3.axisBottom(xScale).tickSize(0).tickPadding(10);
    
    svg.append("g")
      .attr("transform", "translate("+ padding +", "+ (stateMaxHeight - 3*padding/2) +")")
      .call(xAxis);
​
    var yAxis = d3.axisLeft(yScale).tickSize(0).tickPadding(10);
    
    svg.append("g")
      .attr("transform", "translate("+ padding +", "+ (padding/2) +")")
      .call(yAxis);
  }
​
</script>
</body>
    