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
license: mit | |
height: 1000 | |
scrolling: no | |
border: |
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> | |
<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> |
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 |