Public
Edited
Nov 7, 2022
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const nodes = svg
// Map graph vertices to text elements...
// Hint: .selectAll() .data() .join()
.selectAll("text")
.data(graph.nodes)
.join("text")
// Visualize STATE_ABBR and INCOME_PC attributes of each state...
// Hint: .text() .attr() pass function that takes vertex as an argument v=>?
.attr("font-size", (v) => v.INCOME_PC * 0.001)
.attr("fill", "royalblue")
.text((v) => v.STATE_ABBR);
const links = svg
.append("g")
.attr("stroke", "none")
.attr("stroke-width", 1)
.selectAll("line")
.data(graph.links)
.join("line");
// Drag interaction
setupDrag(svg, nodes, simulation);
// Callback after every iteration of the simulation
function update() {
// Modify text element locations based on the updated graph vertices' x,y from the simulation...
// Hint: nodes.attr() pass function that takes vertex as an argument v=>?
nodes.attr("x", (v) => v.x).attr("y", (v) => v.y);
links
.attr("x1", (e) => e.source.x)
.attr("y1", (e) => e.source.y)
.attr("x2", (e) => e.target.x)
.attr("y2", (e) => e.target.y);
}
simulation.on("tick", update);
update(); // Call it once now to set locations if the sim is already done
return svg.node();
}
simulation = {
var sim = d3
.forceSimulation(graph.nodes)
.force(
"spring",
d3
.forceLink(graph.links)
// What useful properties of the forceLink are needed here? ...
// Hint: give .distance() an appropriate function that takes an edge as argument e=>?
.distance((e) => e.distance*5)
// Hint: use .strength() to make long edges less strong, more flexible.
)
.force("center", d3.forceCenter(width / 2, height / 2));
// What other forces would be useful here? ...
invalidation.then(() => sim.stop()); //Terminates old simulation before this cell is re-run.
return sim;
}
// Set the fx,fy values of the dragged node to fix it to the mouse position.
// Simulation will not move nodes with fx,fy set, and will fix x=fx, y=fy.
function setupDrag(svg, nodes, simulation) {
// D3 Drag API
const drag = d3
.drag()
.on("start", dragstart)
.on("drag", dragging)
.on("end", dragend);
nodes.call(drag);
// Drag event callback functions
function dragstart(event) {
// set the fx,fy and run the sim...
// do stuff here...
//if (!event.active) // only needed in multi-touch scenarios
simulation.alphaTarget(0.3).restart(); // restart the sim and run indefinitely
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragging(event) {
// update the fx,fy ...
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragend(event) {
// clear the fx,fy and reset the sim...
simulation.alphaTarget(0); // return to normal sim stopping condition
event.subject.fx = null; // release the fix
event.subject.fy = null;
}
}
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.
