Tech Staff @ MIT Lincoln Lab, with a focus on visual analytics, information visualization, and human-centered AI.
Public
Edited
Nov 23, 2022
// ModifiedForceGraph = (dataset, {width, height}) => {
ModifiedForceGraph = ({
nodes,
links
}, {
nodeId = d => d.id,
nodeGroup = d => d.group,
nodeDegree,
width,
height
} = {}) => {
// const links = dataset.links.map(d => Object.create(d));
// const nodes = dataset.nodes.map(d => Object.create(d));
const simulation_links = links.map(d => Object.create(d));
const simulation_nodes = nodes.map(d => Object.create(d));
const simulation = d3.forceSimulation(simulation_nodes)
.force("link", d3.forceLink(simulation_links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto; height: intrinsic;");
// map link weight
var minEdgeWeight = d3.min(simulation_links, function(d) { return d.value });
var maxEdgeWeight = d3.max(simulation_links, function(d) { return d.value });
var edgeScale = d3.scaleSqrt()
.domain ([minEdgeWeight, maxEdgeWeight])
.range( [1, 15] );
// map node degree
var minNodeDegree = d3.min(nodes.map( (d) => parseInt(d.degree) ));
var maxNodeDegree = d3.max(nodes.map( (d) => parseInt(d.degree) ));
var nodeScale = d3.scaleSqrt()
.domain ([minNodeDegree, maxNodeDegree])
.range( [5, 15] );
var colorScale = d3.scaleSqrt()
.domain ([minNodeDegree, maxNodeDegree])
.range( [0, 1] );
console.log(d3.interpolateRdBu(colorScale(maxNodeDegree)));
const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", .4)
.attr("stroke-linecap", "round")
.selectAll("line")
.data(simulation_links)
.join("line")
.attr("stroke-width", d => {
return edgeScale(d.value);
});
const node = svg.append("g")
.selectAll(".node")
.data(simulation_nodes)
.join("g")
.attr('class', 'node')
.call(drag(simulation));
node.append('circle')
.attr("r", (d, i) => {
return nodeScale(nodes[i].degree);
})
.attr("fill", (d, i) => {
// if (colorOn && (nodes[i].degree > 50 || nodes[i].id ==='Snyder, Rick')){
// return '#e31a1c';
// }
// return '#1f78b4';
if (colorOn) {
return d3.interpolateYlOrRd(colorScale(nodes[i].degree))
}
return '#1f78b4';
})
.attr("fill-opacity", 0.7)
.attr("stroke", "black")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 1)
.on("mouseover", (d, i) => {
console.log("hovering on ", d.id);
svg.append("text")
.attr("id", "hovertext")
.text(d.id)
.style('fill', '#000')
.style('font-size', '20px')
.attr('x', 10)
.attr('y', 30);
})
.on("mouseout", (d, i) => {
d3.select("#hovertext").remove();
});
const highestDegrees = ["Wisniewski, Wendy", "Baird, Richard", "Wurfel, Sara", "Murray, David", "Croft, Howard", "Clayton, Stacie", "Murphy, Elizabeth", "Snyder, Rick"];
simulation.on("tick", () => {
link
.attr("x1", d => d.source.x)
.attr("y1", d => d.source.y)
.attr("x2", d => d.target.x)
.attr("y2", d => d.target.y);
node
.attr("transform", d => `translate(${d.x}, ${d.y})`);
});
invalidation.then(() => simulation.stop());
if (labelsOn) {
node.append("text")
.text(function(d) {
return d.id;
})
.style('fill', '#000')
.style('font-size', '12px')
.attr('x', 6)
.attr('y', 3);
}
// SHOWS RICK SNYDER
else {
node.append("text")
.text(function(d, i) {
// if (nodes[i].degree > 50 || nodes[i].id ==='Snyder, Rick'){
if (highestDegrees.includes(nodes[i].id)) {
return d.id;
} else {
return;
}
})
.style('fill', '#000')
.style('font-size', '16px')
.style('font-weight', 'bold')
.attr('x', 6)
.attr('y', 3);
}
return svg.node();
}
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.
