UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
chart
viewof name = text({ title: "Enter a name", submit: null })
viewof group = text({ title: "Enter a group number", submit: null })
{
const button = html`<button>submit`;
button.onclick = submitNode;
return button;
}
viewof name1 = select({
title: "Select a name",
options: getName(data),
value: "Myriel"
})
viewof name2 = select({
title: "Select another name",
options: getName(data),
value: "Napoleon"
})
viewof length = text({ title: "Enter length of link", submit: null })
{
const btn = html`<button>submit`;
btn.onclick = submitLink;
return btn;
}
import { chart } with { data } from '@d3/force-directed-graph'
mutable data = FileAttachment("miserables.json").json()
import { text, button, select } from "@jashkenas/inputs"
_ = require('lodash')
getName = function(data) {
let result = [];
for (let i = 0; i < data.nodes.length; i++) {
result.push(data.nodes[i].id);
}
return result;
}
submitNode = () => {
const Data = _.cloneDeep(data);
if (name != "" && group != "") {
data.nodes.unshift({
id: name,
group: group
});
mutable data = Data;
}
}
submitLink = () => {
if (name1 != "" && name2 != "" && length != "") {
let Data = _.cloneDeep(data);
Data.links.unshift({
source: name1,
target: name2,
length: +length
});
mutable data = Data;
}
}
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.
