I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
// The matrix M is computed from the data in code below.
strengths = {
let step = math.ones(M.size()[0]);
for (let i = 0; i < 55; i++) {
step = math.multiply(M, step);
step = math.divide(step, math.norm(step));
}
return step.toArray();
}
games = d3
.csvParse(await FileAttachment("B1GScores2019@1.csv").text())
.map(function(o) {
o.score1 = parseInt(o.score1);
o.score2 = parseInt(o.score2);
return o;
})
M = {
let n = d3.max(games.map(g => parseInt(g.team1))) + 1;
let M = math.zeros(n, n);
games.forEach(function(o) {
M.subset(math.index(parseInt(o.team1), parseInt(o.team2)), o.score1);
M.subset(math.index(parseInt(o.team2), parseInt(o.team1)), o.score2);
});
return M;
}
teams = {
let teams = [];
games.forEach(function (r) {
if (teams.indexOf(r.name1) == -1) {
teams.push(r.name1);
}
if (teams.indexOf(r.name2) == -1) {
teams.push(r.name2);
}
});
teams.sort();
// Add idx, strength, and rank fields used in subsequent code
teams = teams.map((t, idx) => ({
idx: idx,
name: t
}));
for (let i = 0; i < teams.length; i++) {
teams[i]["strength"] = strengths[i];
}
teams.sort((a, b) => a.strength < b.strength).map((d, i) => (d.rank = i + 1));
teams.sort((a, b) => parseInt(a.idx) > parseInt(b.idx));
return teams;
}
links = {
let links = [];
games.forEach(function(o) {
let teams = [o.team1, o.team2];
teams.sort();
if (o.score1 == 0) {
links.push({
source: o.team2,
target: o.team1,
score: o.score2,
other_score: 0,
team1: o.name2,
team2: o.name1,
type: 'single'
});
} else if (o.score2 == 0) {
links.push({
source: o.team1,
target: o.team2,
score: o.score1,
other_score: 0,
team1: o.name1,
team2: o.name2,
type: 'single'
});
} else {
links.push({
source: o.team1,
target: o.team2,
score: o.score1,
other_score: o.score2,
team1: o.name1,
team2: o.name2,
type: 'double'
});
links.push({
source: o.team2,
target: o.team1,
score: o.score2,
other_score: o.score1,
team1: o.name2,
team2: o.name1,
type: 'double'
});
}
});
return links;
}
function make_graph(opts = {}) {
// I've got a few options to re-orient for a specific webpage
let {
rotation = 0,
scale = 1,
svg_width = 0.7 * width,
svg_height = 0.5 * svg_width,
translation = '0 0'
} = opts;
let svg = d3
.create("svg")
.attr('width', svg_width)
.attr('height', svg_height);
// .attr("viewBox", [0, 0, svg_width, svg_height])
// .style("max-width", `${svg_width}px`);
let main = svg
.append('g')
.attr(
'transform',
` translate(${translation}) scale(${scale}) rotate(${rotation})`
);
// Define a common arrowhead
main
.append("svg:defs")
.selectAll("marker")
.data(["end"])
.enter()
.append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 15 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr('transform', 'rotate(-10)')
.attr("d", "M0,-5L10,0L0,5");
// Lay down the links
let link = main
.append("g")
.attr("class", "links")
.selectAll("path")
.data(links)
.enter()
.append("path")
.attr('class', 'link')
.style('fill', 'none')
.style('stroke', '#000')
.style('opacity', 0.3)
.style("stroke-width", d => Math.max(0.06 * d.score, 1))
.attr("marker-end", "url(#end)")
.attr(
'title',
d => `${d.team1}: ${d.score}<br />${d.team2}: ${d.other_score}`
)
// The source and target functions need to account for the fact that
// the simulation will rewrite the link.source and link.target attributes.
.attr("source", function(d) {
if (d.source.idx) {
return d.source.idx;
} else {
return d.source;
}
})
.attr("target", function(d) {
if (d.target.idx) {
return d.target.idx;
} else {
return d.target;
}
})
// Highlight this edge's neighborhood on mouseenter.
.on('mouseenter', function(d) {
svg.selectAll("circle").style("opacity", 0.1);
svg.selectAll("path.link").style("opacity", 0.05);
d3.select(this).style('opacity', 0.8);
svg
.select(
"path[source=\'" +
d.target.idx +
"\'][target=\'" +
d.source.idx +
"\']"
)
.style("opacity", 0.8);
svg.select(`circle#c${parseInt(d.source.idx)}`).style('opacity', 1);
svg.select(`circle#c${parseInt(d.target.idx)}`).style('opacity', 1);
});
let node = main
.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(teams)
.enter()
.append("circle")
.attr('id', d => 'c' + d.idx)
.attr(
'title',
d =>
`${d.name.replace('_', ' ')}<br />
Ranking: ${d.rank}<br />
Rating: ${d3.format('.2f')(d.strength)}<br />
Index: ${d.idx}`
)
.attr("r", d => Math.sqrt(60 * parseFloat(d.strength)))
.attr("fill", "#ff7f0e")
.style('opacity', 1)
// Highlight this node's neighborhood on mouseenter.
.on('mouseenter', function(d) {
svg.selectAll("circle").style("opacity", 0.1);
svg.selectAll("path.link").style("opacity", 0.05);
let nbd = neighbors(d.idx);
nbd.push(d.idx);
nbd.forEach(function(idx) {
d3.select("circle#c" + idx).style("opacity", 1);
});
svg.selectAll("path[source=\'" + d.idx + "\']").style("opacity", 0.8);
svg.selectAll("path[target=\'" + d.idx + "\']").style("opacity", 0.8);
});
let simulation = d3
.forceSimulation()
.nodes(teams)
.force(
"link",
d3
.forceLink()
.id(d => d.idx)
.strength(function(d) {
return d.score / 100;
})
.distance(250)
)
.force("center", d3.forceCenter(svg_width / 2, svg_height / 2))
.force('squish', d3.forceY(svg_width / 2).strength(0.2))
.on('tick', function() {
link
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.x)
.attr('d', linkArc);
node.attr('cx', d => d.x).attr('cy', d => d.y);
});
simulation.force("link").links(links);
// Turn off the highlighting when we leave the svg
svg.on('mouseleave', function() {
svg.selectAll('path.link').style('opacity', 0.3);
svg.selectAll('circle').style('opacity', 1);
});
// Add Tippy tooltips on mouseover.
svg
.selectAll('circle')
.nodes()
.forEach(e =>
tippy(e, {
delay: [500, 200],
duration: [100, 50]
})
);
svg
.selectAll('path.link')
.nodes()
.forEach(e =>
tippy(e, {
distance: 5,
placement: 'right',
delay: [500, 200]
})
);
return svg.node();
}
// Compute the neighbors of a vertex.
function neighbors(idx) {
return games
.filter(d => d.team1 == idx || d.team2 == idx)
.map(function(d) {
if (d.team1 == idx) {
return d.team2;
} else {
return d.team1;
}
});
}
// Create a curved arc from a source node to a target node.
// A minor modification of http://bl.ocks.org/mbostock/1153292.
function linkArc(d) {
let x1 = d.source.x;
let y1 = d.source.y;
let x2 = d.target.x;
let y2 = d.target.y;
let dx = x2 - x1;
let dy = y2 - y1;
let dr = Math.sqrt(dx * dx + dy * dy);
return "M" + x1 + "," + y1 + "A" + dr + "," + dr + " 0 0,1 " + x2 + "," + y2;
}
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
math = require('mathjs@7.6.0')
d3 = require('d3@5')
side_pic = {
let w = 0.2 * width;
let h = 1.6 * w;
return make_graph({
rotation: `90 ${w / 2} ${h / 2}`,
scale: 0.00042238648 * width,
translation: `${w / 4} ${h / 4}`,
svg_width: w,
svg_height: h
});
}
require('mathjs')
math.parse(M.format()).toTex()
M.get([1, 3])
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.