UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.node().update = chartData => {
const links = chartData.links.map(d => Object.create(d));
const nodes = chartData.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 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)
// added code to show name of node
.on('mouseover', function(d) {
const m = d3.mouse(this);
const datum = Object.getPrototypeOf(d);
svg
.append('text')
.attr('x', m[0])
.attr('y', m[1] - 10)
.attr('id', 'tooltip')
.attr('fill', 'black')
.text(datum.id);
})
.on('mouseout', d => {
d3.select('#tooltip').remove();
})
.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();
}
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
import { text, button } from "@jashkenas/inputs"
viewof name = text()
viewof group = text()
viewof btn = button({ value: 'submit' })
{
btn;
// note: initially the node will not be connected to anything so it'll fly off the screen
if (name != "" && group != "") {
data.nodes.push({
id: name,
group: group
});
chart.update(data);
}
}
viewof name1 = text()
viewof name2 = text()
viewof length = text()
viewof linkBtn = button({ value: 'submit' })
{
linkBtn;
data.links.push({
source: name1,
target: name2,
length: +length
});
chart.update(data);
}
feedback = md`## Feedback
In the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`
appendix = md`## Appendix`
import { displayCaution, table_styles } from "@info474/utilities"
table_styles
d3 = require('d3')
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.
