New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 16. This example builds on yesterday's scatterplot adding in a label indicating the year-to-year correlation. This correlation is supplied in the data set which is now JSON instead of csv (first try to use JSON data instead of a flat format like csv).
-
-
Save bclinkinbeard/ad063d6f7873d934971d7b41ca61bbbe to your computer and use it in GitHub Desktop.
D3 Block-a-Day: Day 16, January 16th, 2017
This file contains hidden or 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
| license:gpl-3.0 | |
| height:600 | |
| border:no | |
| Raw |
This file contains hidden or 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": 2016, | |
| "correlation": 0.552, | |
| "teams": [{ | |
| "name": "Arizona Diamondbacks", | |
| "wins": 69 | |
| }, { | |
| "name": "Atlanta Braves", | |
| "wins": 68 | |
| }, { | |
| "name": "Baltimore Orioles", | |
| "wins": null | |
| }, { | |
| "name": "Baltimore Orioles", | |
| "wins": 89 | |
| }, { | |
| "name": "Boston Red Sox", | |
| "wins": 93 | |
| }, { | |
| "name": "Chicago Cubs", | |
| "wins": 103 | |
| }, { | |
| "name": "Chicago White Sox", | |
| "wins": 78 | |
| }, { | |
| "name": "Cincinnati Reds", | |
| "wins": 68 | |
| }, { | |
| "name": "Cleveland Indians", | |
| "wins": 94 | |
| }, { | |
| "name": "Colorado Rockies", | |
| "wins": 75 | |
| }, { | |
| "name": "Detroit Tigers", | |
| "wins": 86 | |
| }, { | |
| "name": "Houston Astros", | |
| "wins": 84 | |
| }, { | |
| "name": "Kansas City Royals", | |
| "wins": 81 | |
| }, { | |
| "name": "Anaheim Angels", | |
| "wins": 74 | |
| }, { | |
| "name": "Los Angeles Dodgers", | |
| "wins": 91 | |
| }, { | |
| "name": "Florida Marlins", | |
| "wins": 79 | |
| }, { | |
| "name": "Milwaukee Brewers", | |
| "wins": 73 | |
| }, { | |
| "name": "Minnesota Twins", | |
| "wins": 59 | |
| }, { | |
| "name": "New York Mets", | |
| "wins": 87 | |
| }, { | |
| "name": "New York Yankees", | |
| "wins": 84 | |
| }, { | |
| "name": "Oakland A's", | |
| "wins": 69 | |
| }, { | |
| "name": "Philadelphia Phillies", | |
| "wins": 71 | |
| }, { | |
| "name": "Pittsburgh Pirates", | |
| "wins": 78 | |
| }, { | |
| "name": "San Diego Padres", | |
| "wins": 68 | |
| }, { | |
| "name": "San Francisco Giants", | |
| "wins": 87 | |
| }, { | |
| "name": "Seattle Mariners", | |
| "wins": 86 | |
| }, { | |
| "name": "Saint Louis Cardinals", | |
| "wins": 86 | |
| }, { | |
| "name": "Tampa Bay Devil Rays", | |
| "wins": 68 | |
| }, { | |
| "name": "Texas Rangers", | |
| "wins": 95 | |
| }, { | |
| "name": "Toronto Blue Jays", | |
| "wins": 89 | |
| }, { | |
| "name": "Washington Nationals", | |
| "wins": 95 | |
| }] | |
| }, { | |
| "year": 2015, | |
| "correlation": 0.3164, | |
| "teams": [{ | |
| "name": "Arizona Diamondbacks", | |
| "wins": 79 | |
| }, { | |
| "name": "Atlanta Braves", | |
| "wins": 67 | |
| }, { | |
| "name": "Baltimore Orioles", | |
| "wins": null | |
| }, { | |
| "name": "Baltimore Orioles", | |
| "wins": 81 | |
| }, { | |
| "name": "Boston Red Sox", | |
| "wins": 78 | |
| }, { | |
| "name": "Chicago Cubs", | |
| "wins": 97 | |
| }, { | |
| "name": "Chicago White Sox", | |
| "wins": 76 | |
| }, { | |
| "name": "Cincinnati Reds", | |
| "wins": 64 | |
| }, { | |
| "name": "Cleveland Indians", | |
| "wins": 81 | |
| }, { | |
| "name": "Colorado Rockies", | |
| "wins": 68 | |
| }, { | |
| "name": "Detroit Tigers", | |
| "wins": 74 | |
| }, { | |
| "name": "Houston Astros", | |
| "wins": 86 | |
| }, { | |
| "name": "Kansas City Royals", | |
| "wins": 95 | |
| }, { | |
| "name": "Anaheim Angels", | |
| "wins": 85 | |
| }, { | |
| "name": "Los Angeles Dodgers", | |
| "wins": 92 | |
| }, { | |
| "name": "Florida Marlins", | |
| "wins": 71 | |
| }, { | |
| "name": "Milwaukee Brewers", | |
| "wins": 68 | |
| }, { | |
| "name": "Minnesota Twins", | |
| "wins": 83 | |
| }, { | |
| "name": "New York Mets", | |
| "wins": 90 | |
| }, { | |
| "name": "New York Yankees", | |
| "wins": 87 | |
| }, { | |
| "name": "Oakland A's", | |
| "wins": 68 | |
| }, { | |
| "name": "Philadelphia Phillies", | |
| "wins": 63 | |
| }, { | |
| "name": "Pittsburgh Pirates", | |
| "wins": 98 | |
| }, { | |
| "name": "San Diego Padres", | |
| "wins": 74 | |
| }, { | |
| "name": "San Francisco Giants", | |
| "wins": 84 | |
| }, { | |
| "name": "Seattle Mariners", | |
| "wins": 76 | |
| }, { | |
| "name": "Saint Louis Cardinals", | |
| "wins": 100 | |
| }, { | |
| "name": "Tampa Bay Devil Rays", | |
| "wins": 80 | |
| }, { | |
| "name": "Texas Rangers", | |
| "wins": 88 | |
| }, { | |
| "name": "Toronto Blue Jays", | |
| "wins": 93 | |
| }, { | |
| "name": "Washington Nationals", | |
| "wins": 83 | |
| }] | |
| }] |
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>D3 Block-a-Day: Day 16, January 16, 2017</title> | |
| </head> | |
| <!-- Example based on Michele Weigle's D3 Scatterplot Example http://bl.ocks.org/weiglemc/6185069 --> | |
| <style> | |
| body { | |
| font: 16pt Helvectical Neue; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .dot { | |
| stroke: black; | |
| stroke-width: 2px; | |
| fill: #ffe0e0; | |
| } | |
| .tooltip { | |
| background-color: #fff8dc; | |
| padding: 7px; | |
| text-shadow: #f5f5f5 0 1px 0; | |
| font: 13px Helvetica Neue; | |
| border: 2px solid; | |
| border-color: black; | |
| border-radius: 5px; | |
| position: absolute; | |
| box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px; | |
| } | |
| .xaxis { | |
| font: 14px Helvetica Neue; | |
| } | |
| .yaxis { | |
| font: 14px Helvetica Neue; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var margin = { top: 20, right: 20, bottom: 50, left: 70 }, | |
| width = 960 - margin.left - margin.right, | |
| height = 600 - margin.top - margin.bottom; | |
| /* | |
| * value accessor - returns the value to encode for a given data object. | |
| * scale - maps value to a visual display encoding, such as a pixel position. | |
| * map function - maps from data value to display value | |
| * axis - sets up axis | |
| */ | |
| // setup x | |
| var xValue = function (d) { return d.winsPrev; }, // data -> value | |
| xScale = d3.scaleLinear().range([0, width]), // value -> display | |
| xMap = function (d) { return xScale(xValue(d)); }, // data -> display | |
| xAxis = d3.axisBottom(xScale); | |
| // setup y | |
| var yValue = function (d) { return d.wins; }, // data -> value | |
| yScale = d3.scaleLinear().range([height, 0]), // value -> display | |
| yMap = function (d) { return yScale(yValue(d)); }, // data -> display | |
| yAxis = d3.axisLeft(yScale); | |
| // add the graph canvas to the body of the webpage | |
| var svg = d3.select("body").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 + ")"); | |
| // add the tooltip area to the webpage | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // load data | |
| d3.json("baseball_team_wins_current.json", function (error, data) { | |
| if (error) return console.warn(error); | |
| // change string into number format | |
| data.forEach(function (d) { | |
| d['year'] = +d['year']; | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([40, 120]); | |
| yScale.domain([40, 120]); | |
| // x-axis | |
| svg.append("g") | |
| .attr("class", "xaxis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("text") | |
| .attr("transform", | |
| "translate(" + (width * 0.1) + " ," + | |
| (height + margin.top + 30) + ")") | |
| .style("text-anchor", "left") | |
| .style("font-family", "Helvetica Neue") | |
| .text("Wins 2015"); | |
| // y-axis | |
| svg.append("g") | |
| .attr("class", "yaxis") | |
| .call(yAxis); | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 10 - margin.left) | |
| .attr("x", - 0.75 * height) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "middle") | |
| .style("font-family", "Helvetica Neue") | |
| .text("Wins 2016"); | |
| var activeYear = 2016; | |
| var years = data.filter(y => { | |
| return y.year === activeYear || y.year === activeYear - 1; | |
| }); | |
| var teams = years[0].teams; | |
| teams.forEach((t, i) => { | |
| var sameTeamPrevYear = years[1].teams.filter(t2 => { | |
| return t2.name === t.name; | |
| }); | |
| t.winsPrev = sameTeamPrevYear[0].wins; | |
| }); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(teams) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 10) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .on("mouseover", function (d) { | |
| tooltip.transition() | |
| .duration(150) | |
| .style("opacity", .9); | |
| tooltip.html("<b>" + d.name + "</b>" + "<br/> 2015: " + xValue(d) | |
| + " Wins, 2016: " + yValue(d) + " Wins") | |
| .style("left", (d3.event.pageX + 5) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function (d) { | |
| tooltip.transition() | |
| .duration(300) | |
| .style("opacity", 0); | |
| }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment