ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refining chord matrices.

Browse Source
master
Ben Burlingham 9 years ago
parent 4fa2fb679b
commit c1508be6b6
2 changed files with 135 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 192
      index.html
  2. 17
      teams.hs

192
index.html
Unescape View File

@ -14,13 +14,19 @@ body {
stroke: #ddd;
}
.groups,
.ribbons {
fill-opacity: 0.8;
.ribbon {
fill-opacity: 0.4;
stroke-width: 1;
stroke-opacity: 0.1;
}
.ribbon:hover {
fill-opacity: 1;
stroke-opacity: 1;
}
</style>
<svg width="1000" height="1000"></svg>
<svg width="700" height="700"></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>
@ -36,7 +42,7 @@ const listener = (resolve, reject, { srcElement: req }) => {
req.status === 200 ? resolve(req.responseText) : reject("busted");
};
const parseAndSet = (endpoints, result) => {
const buildLookup = (endpoints, result) => {
const lookup = {};
result.map((v, i) => {
@ -45,66 +51,79 @@ const parseAndSet = (endpoints, result) => {
lookup[address] = json;
});
return lookup;
};
// Team list is ~220 items; assign indices to only teams in this tournament.
lookup.reducedTeams = lookup.games.reduce((acc, v) => {
if (acc[v.t1] === undefined) {
acc[v.t1] = Object.keys(acc).length;
}
const buildMatrix = (games) => {
const max = games.reduce((acc, v) => Math.max(acc, v.t1, v.t2), 1) + 1;
return acc;
}, {});
const empty = Array.apply(null, Array(max));
return lookup;
};
const result = empty.map(
() => empty.map(() => null)
);
const buildChordMatrix = (games, reducedTeams) => {
// Create A x A array of nulls; null-null relationships are omitted.
const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
const result = empty.map(() => empty.map(() => null));
games.forEach(v => {
if (v.rId < 77) {
return;
}
// Use indexes from reduced lists to populate final matrix.
const t1 = reducedTeams[v.t1];
const t2 = reducedTeams[v.t2];
result[v.t1][v.t2] = v.s1 + v.s1e + v.s1p;
result[v.t2][v.t1] = v.s2 + v.s2e + v.s2p;
result[t1][t2] = v.s1 + v.s1e + v.s1p;
result[t2][t1] = v.s2 + v.s2e + v.s2p;
}, []);
return result;
};
const buildMeta = (data) => {
// console.warn(data)
return data;
const buildMetaMatrix = (games, reducedTeams) => {
// Identical structure of chord matrix but with { game, team }.
// (Was this a useful comment? I was considering deleting it. Ben 161017)
const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
const matrix = empty.map(() => empty.map(() => null));
games.forEach(g => {
const t1 = reducedTeams[g.t1];
const t2 = reducedTeams[g.t2];
matrix[t1][t2] = { game: g, team: g.t1 };
matrix[t2][t1] = { game: g, team: g.t2 };
}, []);
return matrix;
};
const endpoints = ['teams.json', 'rounds.json', 'games.json'];
const teamNameFromIndex = (lookup, index) => {
for (let i in lookup.reducedTeams) {
if (lookup.reducedTeams[i] === index) {
return lookup.teams[i];
}
}
const buildMain = (data) => {
const lookup = parseAndSet(endpoints, data);
const meta = buildMeta(lookup);
const matrix = buildMatrix(lookup.games)
foo(matrix)
return "Unknown";
};
Promise.all(endpoints.map(get)).then(buildMain);
const endpoints = ['teams.json', 'rounds.json', 'games.json'];
function foo(matrix2) {
const 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 ],
];
const main = (data) => {
const lookup = buildLookup(endpoints, data);
const chordMatrix = buildChordMatrix(lookup.games, lookup.reducedTeams)
const metaMatrix = buildMetaMatrix(lookup.games, lookup.reducedTeams)
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
outerArcThickness = 5,
outerRadius = Math.min(width, height) * 0.5 - 40,
outerRadius = Math.min(width, height) * 0.5 - 100,
innerRadius = outerRadius - outerArcThickness;
const chord = d3.chord()
.padAngle(0.25)
.sortSubgroups(d3.descending);
.padAngle(0.05);
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
@ -112,13 +131,22 @@ function foo(matrix2) {
const ribbon = d3.ribbon()
.radius(innerRadius);
const color = d3.scaleOrdinal(d3.schemeCategory10);
// d3.scaleOrdinal()
// .range(["#f0f9e8", "#bae4bc", "#7bccc4", "#2b8cbe"]);
// const color = d3.scaleOrdinal(d3.schemeCategory20);
// const color = d3.scaleOrdinal(d3.schemeCategory10);
// const color = d3.scaleOrdinal(d3.interpolateCool);
// const color = d3.scaleSequential(d3.interpolateRainbow);
const color = d3.scaleLinear().domain([0,10]).range(["red", "blue"]).interpolate(d3.interpolateRgb)
// const colors = ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"];
// const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"];
// const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
// const colors = ["#1B9E77", "#D95F02", "#7570B3", "#E7298A", "#66A61E", "#E6AB02", "#A6761D", "#666666"];
// const color = i => colors[i % colors.length];
const g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.datum(chord(matrix));
.datum(chord(chordMatrix));
const group = g.append("g")
.attr("class", "groups")
@ -128,26 +156,27 @@ function foo(matrix2) {
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);
const 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; });
.style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
.attr("d", arc)
group.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + (innerRadius + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : "");
})
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) {
// SORT BY GOALS SCORED
// SORT BY ALPHABETICAL
// SORT BY COUNTRY SIZE
// SORT BY COUNTRY POPULATION
// COLOR BY CONTINENT
// STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND?
return teamNameFromIndex(lookup, d.index);
});
g.append("g")
.attr("class", "ribbons")
@ -156,16 +185,30 @@ function foo(matrix2) {
.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(); });
.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
.attr("class", "ribbon")
.append("title")
.text(function(d) {
const meta1 = metaMatrix[d.target.index][d.source.index];
const meta2 = metaMatrix[d.source.index][d.target.index];
// Returns an array of tick angles and values for a given group and step.
function groupTicks(d, step) {
const 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};
});
}
}
const g = meta1.game;
const t1 = lookup.teams[g.t1];
const t2 = lookup.teams[g.t2];
const e1 = g.s1e ? `(+${g.s1e} in extended time)` : '';
const e2 = g.s2e ? `(+${g.s2e} in extended time)` : '';
const p1 = g.s1p ? `(+${g.s1p} in penalties)` : '';
const p2 = g.s2p ? `(+${g.s2p} in penalties)` : '';
return `${t1}: ${g.s1} ${e1} ${p1}\n${t2}: ${g.s2} ${e2} ${p2}`;
});
};
//===== Entry point
Promise.all(endpoints.map(get)).then(main);
</script>
@ -179,7 +222,8 @@ function foo(matrix2) {
https://bost.ocks.org/mike/uberdata/
http://bl.ocks.org/mbostock/1046712
https://bl.ocks.org/mbostock/4062006
http://projects.delimited.io/experiments/chord-transitions/demos/trade.html
https://github.com/jokecamp/sportdb-build-scripts
https://groups.google.com/forum/#!topic/opensport/593H1O7yIdE
https://github.com/openfootball/datafile/blob/master/worldcup.rb

17
teams.hs
Unescape View File

@ -8,6 +8,23 @@ import Data.ByteString.Lazy.Char8 as BL8
import Data.HashMap.Strict as HM
import Prelude as P
-- "id":7,
-- "key":"gam",
-- "title":"Gambia",
-- "title2":null,
-- "code":"GAM",
-- "synonyms":null,
-- "country_id":43,
-- "city_id":null,
-- "club":"f",
-- "since":null,
-- "address":null,
-- "web":null,
-- "assoc_id":null,
-- "national":"f",
-- "created_at":"2016-10-16 20:00:51.702726",
-- "updated_at":"2016-10-16 20:00:51.702726"
data Team = Team { _id :: Value, country :: Value } deriving (Show)
instance ToJSON Team where

Write Preview
Loading…
Cancel
Save