The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Dec 13, 2022
15 forks
Importers
179 stars
y = {
const minValue = 0;
const maxValue = d3.max(data, d => d.frequency);
const minY = height - margin.bottom;
const maxY = margin.top;
return function(value) {
return (value - minValue)
/ (maxValue - minValue)
* (maxY - minY)
+ minY;
};
}
foo = "🌎" // A cell named foo.
bar = foo + "bar" // A (reactive) reference to the cell foo.
baz = {
let foo = "🏠"; // A local foo, masking the cell foo.
return foo + "baz"; // A reference to the local foo.
}
cycle1 = cycle2 + 1
cycle2 = cycle1 + 1
function computeNodes() {
const map = new Map;
function get(name) {
let node = map.get(name);
if (!node) map.set(name, node = new Node(name));
return node;
}
for (const [i, o] of edges) {
const nodeIn = get(i);
const nodeOut = get(o);
nodeIn.outputs.add(nodeOut);
nodeOut.inputs.add(nodeIn);
}
return [...map.values()];
}
function* computeSequence() {
const nodes = computeNodes();
const queue = [];
for (const node of nodes) {
if (!(node.indegree = node.inputs.size)) {
queue.push(node);
}
}
let node;
yield {nodes, first: true};
while (node = queue.pop()) {
node.computed = true;
for (const output of node.outputs) {
if (!--output.indegree) {
queue.push(output);
}
}
yield {node, nodes};
}
yield {nodes};
}
class Node {
constructor(name) {
this.name = name;
this.computed = false;
this.indegree = 0;
this.inputs = new Set;
this.outputs = new Set;
}
}
edges = [
["d3", "chart"],
["DOM", "chart"],
["width", "chart"],
["height", "chart"],
["data", "chart"],
["x", "chart"],
["y", "chart"],
["xAxis", "chart"],
["yAxis", "chart"],
["require", "data"],
["d3", "x"],
["data", "x"],
["margin", "x"],
["width", "x"],
["d3", "y"],
["data", "y"],
["height", "y"],
["margin", "y"],
["d3", "xAxis"],
["height", "xAxis"],
["margin", "xAxis"],
["x", "xAxis"],
["d3", "yAxis"],
["margin", "yAxis"],
["y", "yAxis"],
["require", "d3"]
]
margin = ({top: 30, right: 0, bottom: 30, left: 40})
height = 500
data = FileAttachment("alphabet.csv").csv({typed: true})
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.
