Scientific software engineer with master degrees in both computer science and remote sensing working on data analysis and visualization.
function highlight_node_links(ev, node) {
var remainingNodes = [],
nextNodes = [];
if (d3.select(this).attr("data-clicked") == "1") {
d3.select(this).attr("data-clicked", "0");
d3.selectAll("path").style("opacity", 1); // back to default
d3.selectAll("rect").style("opacity", 1);
d3.selectAll("text")
.style("opacity", 1)
.style("font-size", 12)
.style("font-weight", "normal");
return;
} else {
d3.select(this).attr("data-clicked", "1");
d3.selectAll("path").style("opacity", 0.1);
d3.selectAll("rect").style("opacity", 0.1);
d3.selectAll("text").style("opacity", 0.1);
d3.select(this)
.select("rect")
.style("opacity", 1);
d3.select(this)
.select("text")
.style("opacity", 1)
.style("font-size", 16)
.style("font-weight", "bold");
}
var traverse = [
{
linkType: "sourceLinks",
nodeType: "target"
},
{
linkType: "targetLinks",
nodeType: "source"
}
];
traverse.forEach(function(step) {
node[step.linkType].forEach(function(link) {
remainingNodes.push(link[step.nodeType]);
d3.select("#link-" + link.id).style("opacity", 1);
});
while (remainingNodes.length) {
nextNodes = [];
remainingNodes.forEach(function(node) {
node[step.linkType].forEach(function(link) {
nextNodes.push(link[step.nodeType]);
d3.select("#link-" + link.id).style("opacity", 1);
});
d3.select("#rect-" + node.index).style("opacity", 1);
d3.select("#text-" + node.index).style("opacity", 1);
});
remainingNodes = nextNodes;
}
});
}
sankey = {
const sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])
.nodeWidth(15)
.nodePadding(10)
.extent([[1, 5], [width - 1, height - 5]]);
return ({nodes, links}) => sankey({
nodes: nodes.map(d => Object.assign({}, d)),
links: links.map(d => Object.assign({}, d))
});
}
format = {
const format = d3.format(",.0f");
return data.units ? d => `${format(d)} ${data.units}` : format;
}
color = {
const color = d3.scaleOrdinal(d3.schemeCategory10);
return d => color(d.category === undefined ? d.name : d.category);
}
data = {
const links = await FileAttachment("energy.csv").csv({typed: true});
const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, "")}));
return {nodes, links, units: "TWh"};
}
width = 1000
height = 600
d3 = require("d3@6", "d3-sankey@0.12")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
