I am a Computer Scientist and Musician by training. A writer with interests in Philosophy, Economics, Technology, Politics, Business, the Arts and Fiction.
import { addDefaults } from '@nuuuwan/option-utils'
//create a simulation for an array of nodes, and compose the desired forces.
function drawNetworkGraph(graphData, options = {}) {
options = addDefaults(options, { height: 1000, width: 1000 });
const div = html`<div style='max-width: 1000px; overflow-x: auto; padding: 0px; margin: 0px;'></div>`;
const MARGIN = 0;
const svg = d3
.select(div)
.append("svg")
.attr("width", options.width + MARGIN + MARGIN)
.attr("height", options.height + MARGIN + MARGIN)
.append("g")
.attr("transform", `translate(${MARGIN},${MARGIN})`);
const simulation = d3
.forceSimulation()
.force("link", d3.forceLink().id(d => d.id))
.force("charge", d3.forceManyBody().strength(-10))
.force("center", d3.forceCenter(options.width / 2, options.height / 2));
const link = svg
.append("g")
.attr("class", "links")
.selectAll("line")
.data(graphData.links)
.enter()
.append("line")
.attr('stroke', 'blue');
const node = svg
.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graphData.nodes)
.enter()
.append("circle")
.attr('fill', 'gray')
.attr("r", 20);
const text = svg
.append("g")
.attr("class", "text")
.selectAll("text")
.data(graphData.nodes)
.enter()
.append("text")
.text(d => d.id);
simulation.nodes(graphData.nodes).on("tick", ticked);
simulation.force("link").links(graphData.links);
function ticked() {
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("cx", d => d.x).attr("cy", d => d.y);
text
.attr("x", d => d.x - 5) //position of the lower left point of the text
.attr("y", d => d.y + 5); //position of the lower left point of the text
}
return div;
}
{
const graphData = await getTestData();
return drawNetworkGraph(graphData);
}
async function getTestData() {
const graphData = await d3.json(
'https://raw.githubusercontent.com/nuuuwan/misc-sl-data/master/geography.sl.rivers.graph.json'
);
const nodeSet = graphData.links.reduce(function(nodeSet, link) {
nodeSet.add(link.source);
nodeSet.add(link.target);
return nodeSet;
}, new Set());
return {
nodes: graphData.nodes.filter(node => nodeSet.has(node.id)),
links: graphData.links
};
}
getTestData()
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.
