You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.8 KiB
134 lines
3.8 KiB
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
body {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
.notes {
|
|
font-size:14px;
|
|
}
|
|
|
|
.group-tick line {
|
|
stroke: #ddd;
|
|
}
|
|
|
|
.groups,
|
|
.ribbons {
|
|
fill-opacity: 0.8;
|
|
}
|
|
|
|
</style>
|
|
<svg width="500" height="500"></svg>
|
|
<script src="http://d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
|
|
<script src="http://d3js.org/d3-chord.v0.0.min.js"></script>
|
|
<script src="teams.json"></script>
|
|
<script src="rounds.json"></script>
|
|
<script src="games.json"></script>
|
|
<script>
|
|
|
|
// use lookup table to build this array:
|
|
// - traverse events, get team A and team B
|
|
// - put team A and team B IDs into lookup, assign them matrix array positions
|
|
// - for each event, go to lookupA and put in scoreB, then lookupB and scoreA
|
|
|
|
var matrix = [
|
|
[ null, 0, 2, 3, 0, 1],
|
|
[ 1, null, 2, null, 1, 3 ],
|
|
[ 2, 3, null, 5, 0, 2 ],
|
|
[ 0, null, 1, null, 2, 3 ],
|
|
[ 2, 4, 2, 5, null, 5 ],
|
|
[ 4, 3, 9, 3, 6, null ],
|
|
];
|
|
|
|
|
|
var svg = d3.select("svg"),
|
|
width = +svg.attr("width"),
|
|
height = +svg.attr("height"),
|
|
outerArcThickness = 15,
|
|
outerRadius = Math.min(width, height) * 0.5 - 40,
|
|
innerRadius = outerRadius - outerArcThickness;
|
|
|
|
var chord = d3.chord()
|
|
.padAngle(0.25)
|
|
.sortSubgroups(d3.descending);
|
|
var arc = d3.arc()
|
|
.innerRadius(innerRadius)
|
|
.outerRadius(outerRadius);
|
|
|
|
var ribbon = d3.ribbon()
|
|
.radius(innerRadius);
|
|
|
|
var color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
// d3.scaleOrdinal()
|
|
// .range(["#f0f9e8", "#bae4bc", "#7bccc4", "#2b8cbe"]);
|
|
|
|
var g = svg.append("g")
|
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
|
|
.datum(chord(matrix));
|
|
|
|
var group = g.append("g")
|
|
.attr("class", "groups")
|
|
.selectAll("g")
|
|
.data(function(chords) { return chords.groups; })
|
|
.enter().append("g");
|
|
|
|
group.append("path")
|
|
.style("fill", function(d) { return color(d.index); })
|
|
// .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
|
|
.attr("d", arc);
|
|
|
|
var groupTick = group.selectAll(".group-tick")
|
|
.data(function(d) { return groupTicks(d, 1); })
|
|
.enter().append("g")
|
|
.attr("class", "group-tick")
|
|
.attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
|
|
|
|
groupTick.append("line")
|
|
.attr("x2", 6);
|
|
|
|
groupTick
|
|
.filter(function(d) { return d.value % 3 === 0; })
|
|
.append("text")
|
|
.attr("x", 8)
|
|
.attr("dy", ".35em")
|
|
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
|
|
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
|
|
.text(function(d) { return d.value; });
|
|
|
|
g.append("g")
|
|
.attr("class", "ribbons")
|
|
.selectAll("path")
|
|
.data(function(chords) { return chords; })
|
|
.enter().append("path")
|
|
.attr("d", ribbon)
|
|
.style("fill", function(d) { return color(d.target.index); })
|
|
// .style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
|
|
|
|
// Returns an array of tick angles and values for a given group and step.
|
|
function groupTicks(d, step) {
|
|
var k = (d.endAngle - d.startAngle) / d.value;
|
|
return d3.range(0, d.value, step).map(function(value) {
|
|
return {value: value, angle: value * k + d.startAngle};
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="notes">
|
|
<h5>Lessons learned</h5>
|
|
scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c<br>
|
|
ribbon source vs index (change fill them differently)
|
|
|
|
<a href="https://github.com/d3/d3-scale-chromatic">https://github.com/d3/d3-scale-chromatic</a>
|
|
|
|
https://github.com/jokecamp/sportdb-build-scripts
|
|
https://groups.google.com/forum/#!topic/opensport/593H1O7yIdE
|
|
https://github.com/openfootball/datafile/blob/master/worldcup.rb
|
|
https://openfootball.github.io/questions.html
|
|
|
|
<h5>TODO</h5>
|
|
add team name to each arc
|
|
build dataset
|
|
</div>
|
|
|