Skip to content

Instantly share code, notes, and snippets.

@dbetebenner

dbetebenner/.block

Last active January 18, 2017 11:05
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 dbetebenner/7016dbb8d49f0e385bfd9161a82823f1 to your computer and use it in GitHub Desktop.
Save dbetebenner/7016dbb8d49f0e385bfd9161a82823f1 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Block-a-Day: Day 14: January 14th, 2017
Raw
.block
license:gpl-3.0
height:600
border:no
Raw
Raw
README.md

D3 Block-a-Day: Day 14, January, 14th 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 14. This example builds a basic scatter-plot using baseball data scraped from the web of wins by Major League Baseball Teams. This example will be extended over the next several days to help fully explore the data. This examples copies and extends Michele Weigle's excellent D3 Scatterplot Example.

Raw
baseball_team_wins.csv
TEAM YEAR_2016 YEAR_2015 YEAR_2014 YEAR_2013 YEAR_2012 YEAR_2011 YEAR_2010 YEAR_2009 YEAR_2008 YEAR_2007 YEAR_2006 YEAR_2005 YEAR_2004 YEAR_2003 YEAR_2002 YEAR_2001 YEAR_2000 YEAR_1999 YEAR_1998 YEAR_1997 YEAR_1996 YEAR_1995 YEAR_1994 YEAR_1993 YEAR_1992 YEAR_1991 YEAR_1990 YEAR_1989 YEAR_1988 YEAR_1987 YEAR_1986 YEAR_1985 YEAR_1984 YEAR_1983 YEAR_1982 YEAR_1981 YEAR_1980 YEAR_1979 YEAR_1978 YEAR_1977 YEAR_1976 YEAR_1975 YEAR_1974 YEAR_1973 YEAR_1972 YEAR_1971 YEAR_1970 YEAR_1969 YEAR_1968 YEAR_1967 YEAR_1966 YEAR_1965 YEAR_1964 YEAR_1963 YEAR_1962 YEAR_1961 YEAR_1960 YEAR_1959 YEAR_1958 YEAR_1957 YEAR_1956 YEAR_1955 YEAR_1954 YEAR_1953 YEAR_1952 YEAR_1951 YEAR_1950 YEAR_1949 YEAR_1948 YEAR_1947 YEAR_1946 YEAR_1945 YEAR_1944 YEAR_1943 YEAR_1942 YEAR_1941 YEAR_1940 YEAR_1939 YEAR_1938 YEAR_1937 YEAR_1936 YEAR_1935 YEAR_1934 YEAR_1933 YEAR_1932 YEAR_1931 YEAR_1930 YEAR_1929 YEAR_1928 YEAR_1927 YEAR_1926 YEAR_1925 YEAR_1924 YEAR_1923 YEAR_1922 YEAR_1921 YEAR_1920 YEAR_1919 YEAR_1918 YEAR_1917 YEAR_1916 YEAR_1915 YEAR_1914 YEAR_1913 YEAR_1912 YEAR_1911 YEAR_1910 YEAR_1909 YEAR_1908 YEAR_1907 YEAR_1906 YEAR_1905 YEAR_1904 YEAR_1903 YEAR_1902 YEAR_1901
Arizona Diamondbacks 69 79 64 81 81 94 65 70 82 90 76 77 51 84 98 92 85 100 65
Atlanta Braves 68 67 79 96 94 89 91 86 72 84 79 90 96 101 101 88 95 103 106 101 96 90 68 104 98 94 65 63 54 69 72 66 80 88 89 50 81 66 69 61 70 67 88 76 70 82 76 93 81 77 85 86 88 84 86 83 88 86 92 95 92 85 89 92 64 76 83 75 91 86 81 67 65 68 59 62 65 63 77 79 71 38 78 83 77 64 70 56 50 60 66 70 53 54 53 79 62 57 53 72 89 83 94 69 52 44 53 45 63 58 49 51 55 58 73 69
Baltimore Orioles 50 68
Baltimore Orioles 89 81 96 85 93 69 66 64 68 69 70 74 78 71 67 63 74 78 79 98 88 71 63 85 89 67 76 87 54 67 73 83 85 98 94 59 100 102 90 97 88 90 91 97 80 101 108 109 91 76 97 94 97 86 77 95 89 74 74 76 69 57 54 54 64 52 58 53 59 59 66 81 89 72 82 70 67 43 55 46 57 65 67 55 63 63 64 79 82 59 62 82 74 74 93 81 76 67 58 57 79 63 71 57 53 45 47 61 83 69 76 54 65 65 78 48
Boston Red Sox 93 78 71 97 69 90 89 95 95 96 86 95 98 95 93 82 85 94 92 78 85 86 54 80 73 84 88 83 89 78 95 81 86 78 89 59 83 91 99 97 83 95 84 89 85 85 87 87 86 92 72 62 72 76 76 76 65 75 79 82 84 84 69 84 76 87 94 96 96 83 104 71 77 68 93 84 82 89 88 80 74 78 76 63 43 62 52 58 57 51 46 47 67 61 61 75 72 66 75 90 91 101 91 79 105 78 81 88 75 59 49 78 95 91 77 79
Chicago Cubs 103 97 73 66 61 71 75 83 97 85 66 79 89 88 67 88 65 67 90 68 76 73 49 84 78 77 77 93 77 76 70 77 96 71 73 38 64 80 79 81 75 75 66 77 85 83 84 92 84 87 59 72 76 82 59 64 60 74 72 62 60 72 64 65 77 62 64 61 64 69 82 98 75 74 68 70 75 84 89 93 87 100 86 86 90 84 90 98 91 85 82 68 81 83 80 64 75 75 84 74 67 73 78 88 91 92 104 104 99 107 116 92 93 82 68 53
Chicago White Sox 78 76 73 63 85 79 88 79 89 72 90 99 83 86 81 83 95 75 80 80 85 68 67 94 86 87 94 69 71 77 72 85 74 99 87 54 70 73 71 90 64 75 80 77 87 79 56 68 67 89 83 95 98 94 85 86 87 94 82 90 85 91 94 89 81 81 60 63 51 70 74 71 71 82 66 77 82 85 65 86 81 74 53 67 49 56 62 59 72 70 81 79 66 69 77 62 96 88 57 100 89 93 70 78 78 77 68 78 88 87 93 92 89 60 74 83
Cincinnati Reds 68 64 76 90 97 79 91 78 74 72 80 73 76 69 78 66 85 96 77 76 81 85 66 73 90 74 91 75 87 84 86 89 70 74 61 66 89 90 92 88 102 108 98 99 95 79 102 89 83 87 76 89 92 86 98 93 67 74 76 80 91 75 74 68 69 68 66 62 64 73 67 61 89 87 76 88 100 97 82 56 74 68 52 58 60 58 59 66 78 75 87 80 83 91 86 70 82 96 68 78 60 71 60 64 75 70 75 77 73 66 64 79 88 74 70 52
Cleveland Indians 94 81 85 92 68 80 69 65 81 96 78 93 80 68 74 91 90 97 89 86 99 100 66 76 76 57 77 73 78 61 84 60 75 70 78 52 79 81 69 71 81 79 77 71 72 60 76 62 86 75 81 87 79 79 80 78 76 89 77 76 88 93 111 92 93 93 92 89 97 80 68 73 72 82 75 75 89 87 86 83 80 82 85 75 87 78 81 81 62 66 88 70 67 82 78 94 98 84 73 88 77 57 51 86 75 80 71 71 90 85 89 76 86 77 69 54
Colorado Rockies 75 68 66 74 64 73 83 92 74 90 76 67 68 74 73 73 82 72 77 83 83 77 53 67
Detroit Tigers 86 74 90 93 88 95 81 86 74 88 95 71 72 43 55 66 79 69 65 79 53 60 53 85 75 84 79 59 88 98 87 84 104 92 83 60 84 85 86 74 74 57 72 85 86 91 79 90 103 91 88 89 85 79 85 101 71 76 77 78 82 79 68 60 50 73 95 87 78 85 92 88 88 78 73 75 90 81 84 89 83 93 101 75 76 61 75 70 68 82 79 81 86 83 79 71 61 80 55 78 87 100 80 66 69 89 86 98 90 92 71 79 62 65 52 74
Houston Astros 84 86 70 51 55 56 76 74 86 73 82 89 92 87 84 93 72 97 102 84 82 76 66 85 81 65 75 86 82 76 96 83 80 85 77 61 93 89 74 81 80 64 81 82 84 79 79 81 72 69 72 65 66 66 64
Kansas City Royals 81 95 89 86 72 71 67 65 75 69 62 56 58 83 62 65 77 64 72 67 75 70 64 84 72 82 75 92 84 83 76 91 84 79 90 50 97 85 92 102 90 91 77 88 76 85 65 69
Anaheim Angels 74 85 98 78 89 86 80 97 100 94 89 95 92 77 99 75 82 70 85 84 70 78 47 71 72 81 80 91 75 75 92 90 81 70 93 51 65 88 87 74 76 72 68 79 75 76 86 71 67 84 80 75 82 70 86 70
Los Angeles Dodgers 91 92 94 92 86 82 80 95 84 82 88 71 93 85 92 86 86 77 83 88 90 78 58 81 63 93 86 77 94 73 73 95 79 91 88 63 92 79 95 98 92 88 102 95 85 89 87 85 76 73 95 97 80 99 102 89 82 88 71 84 93 98 92 105 96 97 89 97 84 94 96 87 63 81 104 100 88 84 69 62 67 70 71 65 81 79 86 70 77 65 71 68 92 76 76 77 93 69 57 70 94 80 75 65 58 64 64 55 53 65 66 48 56 70 75 79
Florida Marlins 79 71 77 62 69 72 80 87 84 71 78 83 83 91 79 76 79 64 54 92 80 67 51 64
Milwaukee Brewers 73 68 82 74 83 96 77 80 90 83 75 81 67 68 56 68 73 74 74 78 80 65 53 69 92 83 74 81 87 91 77 71 67 87 95 62 86 95 93 67 66 68 76 74 65 69 65 64
Minnesota Twins 59 83 70 66 66 63 94 87 88 79 96 83 92 90 94 85 69 63 70 68 78 56 53 71 90 95 74 80 91 85 71 77 81 70 60 41 77 82 73 84 85 76 82 81 77 74 98 97 79 91 89 102 79 91 91 70 73 63 61 55 59 53 66 76 78 62 67 50 56 64 76 87 64 84 62 70 64 65 75 73 82 67 66 99 93 92 94 71 75 85 81 96 92 75 69 80 68 56 72 74 76 85 81 90 91 64 66 42 67 49 55 64 38 43 61 61
New York Mets 87 90 79 74 74 77 79 70 89 88 97 83 71 66 75 82 94 97 88 88 71 69 55 59 72 77 91 87 100 92 108 98 90 68 65 41 67 63 66 64 86 82 71 82 83 83 83 100 73 61 66 50 53 51 40
New York Yankees 84 87 84 85 95 97 95 103 89 94 97 95 101 101 103 95 87 98 114 96 92 79 70 88 76 71 67 74 85 89 90 97 87 91 79 59 103 89 100 100 97 83 89 80 79 82 93 80 83 72 70 77 99 104 96 109 97 79 92 98 97 96 103 99 95 98 98 97 94 97 87 81 83 98 103 101 88 106 99 102 102 89 94 91 107 94 86 88 101 110 91 69 89 98 94 98 95 80 60 71 80 69 70 57 50 76 88 74 51 70 90 71 92 72
Oakland A's 69 68 88 96 94 74 81 75 75 76 93 88 91 96 103 102 91 87 74 65 78 67 51 68 96 84 103 99 104 81 76 77 77 74 68 64 83 54 69 63 87 98 90 94 93 101 89 88 82 62 74 59 57 73 72 61 58 66 73 59 52 63 51 59 79 70 52 81 84 78 49 52 72 49 55 64 54 55 53 54 53 58 68 79 94 107 102 104 98 91 83 88 71 69 65 53 48 36 52 55 36 43 99 96 90 101 102 95 68 88 78 92 81 75 83 74
Philadelphia Phillies 71 63 73 73 81 102 97 93 92 89 85 88 86 86 80 86 65 77 75 68 67 69 54 97 70 78 77 67 65 80 86 75 81 90 89 59 91 84 90 101 101 86 80 71 59 67 73 63 76 82 87 85 92 87 81 47 59 64 69 77 71 77 75 83 87 73 91 81 66 62 69 46 61 64 42 43 50 45 45 61 54 64 56 60 78 66 52 71 43 51 58 68 55 50 57 51 62 47 55 87 91 90 74 88 73 79 78 74 83 83 71 83 52 49 56 83
Pittsburgh Pirates 78 98 88 94 79 72 57 62 67 68 67 67 72 75 72 62 69 78 69 79 73 58 53 75 96 98 95 74 85 80 64 57 75 84 84 46 83 98 88 96 92 92 88 80 96 97 89 88 80 81 92 90 80 74 93 75 95 78 84 62 66 60 53 50 42 64 57 71 83 62 63 82 90 80 66 81 78 68 86 86 84 86 74 87 86 75 80 88 85 94 84 95 90 87 85 90 79 71 65 51 65 73 69 78 93 85 86 110 98 91 93 96 87 91 103 90
San Diego Padres 68 74 77 76 76 71 90 75 63 89 88 82 87 64 66 79 76 74 98 76 91 70 47 61 82 84 75 89 83 65 74 83 92 81 81 41 73 68 84 69 73 71 60 60 58 61 63 52
San Francisco Giants 87 84 88 76 94 86 92 88 72 71 76 75 91 100 95 90 97 86 89 90 68 67 55 103 72 75 85 92 83 90 83 62 66 79 87 56 75 71 89 75 74 80 72 88 69 90 86 90 88 91 93 95 90 88 103 85 79 83 80 69 67 80 97 70 92 98 86 73 78 81 61 78 67 55 85 74 72 77 83 95 92 91 93 91 72 87 87 84 93 92 74 86 93 95 93 94 86 87 71 98 86 69 84 101 103 99 91 92 98 82 96 105 106 84 48 52
Seattle Mariners 86 76 87 71 75 67 61 85 61 88 78 69 63 93 93 116 91 79 76 90 85 79 49 82 64 83 77 73 68 78 67 74 74 60 76 44 59 67 56 64
Saint Louis Cardinals 86 100 90 97 88 90 86 91 86 78 83 100 105 85 97 93 95 75 83 73 88 62 53 87 83 84 70 86 76 95 79 101 84 79 92 59 74 86 69 83 72 82 86 81 75 90 76 87 97 101 83 80 93 93 84 80 86 71 72 87 76 68 72 83 88 81 78 96 85 89 98 95 105 105 106 97 84 92 71 81 87 96 95 82 72 101 92 78 95 92 89 77 65 79 85 87 75 54 51 82 60 72 81 51 63 75 63 54 49 52 52 58 75 43 56 76
Tampa Bay Devil Rays 68 80 77 92 90 91 96 84 97 66 61 67 70 63 55 62 69 69 63
Texas Rangers 95 88 67 91 93 96 90 87 79 75 80 79 89 71 72 73 71 95 88 77 90 74 52 86 77 85 83 83 70 75 87 62 69 77 64 57 76 83 87 94 76 79 84 57 54 63 70 86 65 76 71 70 62 56 60 61
Toronto Blue Jays 89 93 83 74 73 81 85 75 86 83 87 80 67 86 78 80 83 84 88 76 74 56 55 95 96 91 86 89 87 96 86 99 89 89 78 37 67 53 59 54
Washington Nationals 95 83 96 86 98 80 69 59 59 73 71 81 67 83 83 68 67 68 65 78 88 66 74 94 87 71 85 81 81 91 78 84 78 82 86 60 90 95 76 75 55 75 79 79 70 71 73 52
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>D3 Block-a-Day: Day 14, January 14, 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["YEAR_2015"];}, // 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["YEAR_2016"];}, // 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.csv("baseball_team_wins.csv", function(error, data) {
// change string (from CSV) into number format
data.forEach(function(d) {
d['YEAR_2015'] = +d['YEAR_2015'];
d['YEAR_2016'] = +d['YEAR_2016'];
});
// 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");
// draw dots
svg.selectAll(".dot")
.data(data)
.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["TEAM"] + "</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