Created
June 1, 2019 23:22
-
-
Save jchakko/7efe7fbf4ce735d36546dd8199ba1024 to your computer and use it in GitHub Desktop.
Stacked area chart displaying Melee tournament data using D3 v5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <meta charset="utf-8"> | |
| <head> | |
| <!-- Load in the d3 library --> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style> | |
| html { | |
| background: #eff4f0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 align = 'center'>Melee Major Wins by Player (2004-2018)</h1> | |
| <div id="visualization" align="center"></div> | |
| <!--SVG is appended to this div--> | |
| </div> | |
| <h3 align = 'center'>Source: <a href="https://liquipedia.net/smash/Major_Tournaments/Melee">https://liquipedia.net/smash/Major_Tournaments/Melee</a></h3> | |
| <script> | |
| let margin = {top: 20, right: 20, bottom: 20, left: 50}, | |
| width = 1060 - margin.left - margin.right, | |
| height = 560 - margin.top - margin.bottom; | |
| let svg = d3.select("#visualization").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| d3.csv("meleemajors.csv").then(function(data) { | |
| let keys = data.columns.slice(1); | |
| let totals = {}; | |
| data.forEach(function(d,i) { | |
| let row = d; | |
| for(let key in row) { | |
| if(key in totals) { | |
| totals[key] = totals[key] + parseInt(row[key]); | |
| } else { | |
| totals[key] = parseInt(row[key]); | |
| } | |
| } | |
| }) | |
| let formatxAxis = d3.format('.0f'); | |
| let x = d3.scaleLinear() | |
| .domain(d3.extent(data, function(d) { return d.year; })) | |
| .range([ 0, width ]); | |
| svg.append("g") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(d3.axisBottom(x).ticks(10).tickFormat(formatxAxis)); | |
| let y = d3.scaleLinear() | |
| .domain([0, 25]) | |
| .range([ height, 0 ]); | |
| svg.append("g") | |
| .call(d3.axisLeft(y)); | |
| let colors = ['#061733','#940818','#407015','#958D96', | |
| '#1797C5','#DB3731','#63d1ff','#000307','#871217', | |
| '#C8B359','#03B630','#8C63FF','#214A63', | |
| '#FE8A99','#FFC444']; | |
| let stackedData = d3.stack() | |
| .keys(keys) | |
| (data) | |
| svg | |
| .selectAll("mylayers") | |
| .data(stackedData) | |
| .enter() | |
| .append("path") | |
| .style("fill", function(d,i) { | |
| return colors[i]; | |
| }) | |
| .attr("d", d3.area() | |
| .x(function(d, i) { return x(d.data.year); }) | |
| .y0(function(d) { return y(d[0]); }) | |
| .y1(function(d) { return y(d[1]); }) | |
| ) | |
| .attr("opacity", 8) | |
| .on("mouseover", function(d,i) { | |
| label.text(d.key); | |
| label.style("fill", colors[i]); | |
| label.attr("opacity", 1); | |
| label2.text("Total Wins: " + totals[d.key]); | |
| label2.style("fill", colors[i]); | |
| label2.attr("opacity", 1); | |
| d3.select(this).attr("opacity", 1) | |
| }) | |
| .on("mouseout", function(d,i) { | |
| label.attr("opacity", 0); | |
| label2.attr("opacity", 0); | |
| d3.select(this).attr("opacity", .9) | |
| }); | |
| let legend = svg.append('g') | |
| .attr("class", "legend"); | |
| let label = legend | |
| .append("text") | |
| .attr("x", 40) | |
| .attr("y", 150) | |
| .attr("font-size", "140px") | |
| .text("howdy") | |
| .attr("opacity", 0); | |
| let label2 = legend.selectAll('text') | |
| .data(keys) | |
| .enter() | |
| .append("text") | |
| .attr("x", 240) | |
| .attr("y", 260) | |
| .attr("font-size", "70px") | |
| .text("Total Wins:") | |
| .attr("opacity", 0); | |
| }) //End CSV | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| year | Zain | S2J | PPMD | Plup | PC Chris | Mew2King | Mango | Leffen | Ken | Isai | Hungrybox | ChuDat | Azen | Armada | Amsah | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2004 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | |
| 2005 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 5 | 1 | 0 | 0 | 0 | 0 | 0 | |
| 2006 | 0 | 0 | 0 | 0 | 3 | 0 | 0 | 0 | 5 | 0 | 0 | 0 | 2 | 0 | 0 | |
| 2007 | 0 | 0 | 0 | 0 | 1 | 3 | 0 | 0 | 1 | 0 | 0 | 1 | 1 | 0 | 0 | |
| 2008 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | |
| 2009 | 0 | 0 | 0 | 0 | 0 | 0 | 2 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 0 | |
| 2010 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 0 | |
| 2011 | 0 | 0 | 1 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | |
| 2012 | 0 | 0 | 1 | 0 | 0 | 0 | 3 | 0 | 0 | 0 | 0 | 0 | 0 | 3 | 0 | |
| 2013 | 0 | 0 | 0 | 0 | 0 | 1 | 2 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | |
| 2014 | 0 | 0 | 2 | 0 | 0 | 1 | 6 | 2 | 0 | 0 | 1 | 0 | 0 | 2 | 0 | |
| 2015 | 0 | 0 | 1 | 0 | 0 | 0 | 3 | 6 | 0 | 0 | 2 | 0 | 0 | 7 | 0 | |
| 2016 | 0 | 0 | 0 | 0 | 0 | 1 | 4 | 2 | 0 | 0 | 7 | 0 | 0 | 9 | 0 | |
| 2017 | 0 | 0 | 0 | 1 | 0 | 2 | 2 | 2 | 0 | 0 | 9 | 0 | 0 | 5 | 0 | |
| 2018 | 1 | 1 | 0 | 1 | 0 | 1 | 0 | 3 | 0 | 0 | 9 | 0 | 0 | 2 | 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment