Published
Edited
Jun 1, 2020
Fork of Networks
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart2 = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));

const simulation = d3
.forceSimulation(nodes)
.force("link", d3.forceLink(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]);

const link = svg
.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke-width", d => Math.sqrt(d.value));

const node = svg
.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 5)
.attr("fill", color)
.call(drag(simulation));

node.append("title").text(d => d.id);

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("cx", d => d.x).attr("cy", d => d.y);
});

invalidation.then(() => simulation.stop());

return svg.node();
}
Insert cell
Insert cell
Insert cell
html`<input id='string' type='text'>`
Insert cell
viewof submitBtn = button({ value: 'Submit' })
Insert cell
{
submitBtn;

const inputArray = document.getElementById('string').value.split(" ");

if (inputArray[0] != "" && inputArray[1] != "") {
data.nodes.unshift({
id: inputArray[0],
group: inputArray[1]
});
}
}
Insert cell
data
Insert cell
md`## Adding New Links
source target length --> split`
Insert cell
html`<input id='string2' type='text'>`
Insert cell
viewof submitBtn2 = button({ value: 'Submit' })
Insert cell
{
submitBtn2;

const inputArray2 = document.getElementById('string2').value.split(" ");

if (inputArray2[0] != "" && inputArray2[1] != "" && inputArray2[2] != "") {
data.links.unshift({
source: inputArray2[0],
target: inputArray2[1],
length: inputArray2[2]
});
}
}
Insert cell
data
Insert cell
Insert cell
appendix = md`## Appendix`
Insert cell
import { displayCaution, table_styles } from "@info474/utilities"
Insert cell
import { text, button } from "@jashkenas/inputs"
Insert cell
table_styles
Insert cell
d3 = require("d3@5")
Insert cell
import { chart, height, color, drag } from "@d3/force-directed-graph"
Insert cell

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.
Learn more