Quick demonstration of a way to visualise sports scores with area charts.
Last active
November 30, 2017 19:50
-
-
Save fogonwater/ef6972842ce6f27a3452 to your computer and use it in GitHub Desktop.
Rugby score area chart
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> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
text-align: center; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #aaa; | |
shape-rendering: crispEdges; | |
} | |
.area { | |
fill-opacity: 0.2; | |
stroke-opacity: 0.8; | |
} | |
.t1 { | |
fill:#888; | |
stroke: #444; | |
} | |
.t2 { | |
fill: yellow; | |
stroke: green; | |
} | |
.halftime { | |
stroke: #bbb; | |
stroke:width: 2; | |
stroke-dasharray: 4, 4; | |
} | |
h2, h3 { | |
color: #555; | |
font-weight: lighter; | |
} | |
.score { | |
padding-right: 30px; | |
margin: 0 auto; | |
width:600px; | |
text-align: right; | |
} | |
</style> | |
<h2>Fulltime score: All Blacks 34, Wallabies 17</h2> | |
<div id="chart"></div> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
width = 600 - margin.left - margin.right, | |
height = 200 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.domain([0, 80]) | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.domain([0,35]) | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.ticks(3) | |
.innerTickSize(3) | |
.outerTickSize(0) | |
.orient("right"); | |
var area1 = d3.svg.area() | |
.x(function(d) { return x(d.Minute); }) | |
.y0(height) | |
.y1(function(d) { return y(d.t1); }) | |
.interpolate("step-after") ; | |
var area2 = d3.svg.area() | |
.x(function(d) { return x(d.Minute); }) | |
.y0(height) | |
.y1(function(d) { return y(d.t2); }) | |
.interpolate("step-after"); | |
var svg = d3.select("#chart").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("rugby_world_cup_final_2015.csv", function(error, data) { | |
if (error) throw error; | |
data.forEach(function(d) { | |
d.Minute = +d.Minute; | |
d.t1 = +d.t1; | |
d.t2 = +d.t2; | |
}); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "area t1") | |
.attr("d", area1); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "area t2") | |
.attr("d", area2); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + width + ",0)") | |
.call(yAxis); | |
var halftime = svg.selectAll(".halftime") | |
.data([40]).enter() | |
.append("line") | |
.attr("x1", function(d) { return x(d);}) | |
.attr("y1", 0) | |
.attr("x2", function(d) { return x(d);}) | |
.attr("y2", height) | |
.attr("class", "halftime"); | |
}); | |
</script> |
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
Minute | t1 | t2 | |
---|---|---|---|
0 | 0 | 0 | |
7 | 3 | 0 | |
13 | 3 | 3 | |
26 | 6 | 3 | |
35 | 9 | 3 | |
38 | 14 | 3 | |
40 | 16 | 3 | |
41 | 21 | 3 | |
52 | 21 | 8 | |
53 | 21 | 10 | |
63 | 21 | 15 | |
64 | 21 | 17 | |
69 | 24 | 17 | |
74 | 27 | 17 | |
78 | 32 | 17 | |
79 | 34 | 17 | |
80 | 34 | 17 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment