Skip to content

Instantly share code, notes, and snippets.

/.block

Created October 18, 2016 05:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/ca835c42bade469740f1d7faa7d78a1d to your computer and use it in GitHub Desktop.
Save anonymous/ca835c42bade469740f1d7faa7d78a1d to your computer and use it in GitHub Desktop.
Download ZIP
It's been a good 15 years for Californians who kind-of-don't-really care about sports
Raw
.block
license: mit
Raw
README.md

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

Raw
index.html
<!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>
Raw
nationalchampionships.csv
sport year state info
baseball 2000 NY New York Yankees
baseball 2001 AZ Arizona Diamondbacks
baseball 2002 CA Anaheim Angels
baseball 2003 FL Florida Marlins
baseball 2004 MA Boston Red Sox
baseball 2005 IL Chicago White Sox
baseball 2006 MO St. Louis Cardinals
baseball 2007 MA Boston Red Sox
baseball 2008 PA Philadelphia Phillies
baseball 2009 NY New York Yankees
baseball 2010 CA San Francisco Giants
baseball 2011 MO St. Louis Cardinals
baseball 2012 CA San Francisco Giants
baseball 2013 MA Boston Red Sox
baseball 2014 CA San Francisco Giants
baseball 2015 MO Kansas City Royals
baseball 2016
football 2000 MO St. Louis Rams
football 2001 MD Baltimore Ravens
football 2002 MA New England Patriots
football 2003 FL Tampa Bay Buccaneers
football 2004 MA New England Patriots
football 2005 MA New England Patriots
football 2006 PA Pittsburgh Steelers
football 2007 IN Indianapolis Colts
football 2008 NY New York Giants
football 2009 PA Pittsburgh Steelers
football 2010 LA New Orleans Saints
football 2011 WI Green Bay Packers
football 2012 NY New York Giants
football 2013 MD Baltimore Ravens
football 2014 WA Seattle Seahawks
football 2015 MA New England Patriots
football 2016 CO Denver Broncos
basketball 2000 CA Los Angeles Lakers
basketball 2001 CA Los Angeles Lakers
basketball 2002 CA Los Angeles Lakers
basketball 2003 TX San Antonio Spurs
basketball 2004 MI Detroit Pistons
basketball 2005 TX San Antonio Spurs
basketball 2006 FL Miami Heat
basketball 2007 TX San Antonio Spurs
basketball 2008 MA Boston Celtics
basketball 2009 CA Los Angeles Lakers
basketball 2010 CA Los Angeles Lakers
basketball 2011 TX Dallas Mavericks
basketball 2012 FL Miami Heat
basketball 2013 FL Miami Heat
basketball 2014 TX San Antonio Spurs
basketball 2015 CA Golden State Warriors
basketball 2016 OH Cleveland Cavaliers
hockey 2000 NJ New Jersey Devils
hockey 2001 CO Colorado Avalanche
hockey 2002 MI Detroit Red Wings
hockey 2003 NJ New Jersey Devils
hockey 2004 FL Tampa Bay Lightning
hockey 2005
hockey 2006 NC Carolina Hurricanes
hockey 2007 CA Anaheim Ducks
hockey 2008 MI Detroit Red Wings
hockey 2009 PA Pittsburgh Penguins
hockey 2010 IL Chicago Blackhawks
hockey 2011 MA Boston Bruins
hockey 2012 CA Los Angeles Kings
hockey 2013 IL Chicago Blackhawks
hockey 2014 CA Los Angeles Kings
hockey 2015 IL Chicago Blackhawks
hockey 2016 PA Pittsburgh Penguins
soccer 2000 KS Kansas City Wizards
soccer 2001 CA San Jose Earthquakes
soccer 2002 CA Los Angeles Galaxy
soccer 2003 CA San Jose Earthquakes
soccer 2004 DC D.C. United
soccer 2005 CA Los Angeles Galaxy
soccer 2006 TX Houston Dynamo
soccer 2007 TX Houston Dynamo
soccer 2008 OH Columbus Crew
soccer 2009 UT Real Salt Lake
soccer 2010 CO Colorado Rapids
soccer 2011 CA Los Angeles Galaxy
soccer 2012 CA Los Angeles Galaxy
soccer 2013 KS Sporting Kansas City
soccer 2014 CA Los Angeles Galaxy
soccer 2015 OR Portland Timbers
soccer 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment