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

Built during d3.unconf(2016) and (un)inspired by the "Believen" posters at AT&T Park.

forked from anonymous's block: It's been a good 15 years for Californians who kind-of-don't-really care about sports

<!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>

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 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 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>

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

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js