Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
num_states = 25
num_times = 8
counter = {
start;
let i = 0;
while (i < num_times) {
// play(random_walk[i].note);
// yield Promises.delay(random_walk[i].duration / speed, ++i);
yield Promises.delay(1000, ++i);// time is in ms
}
}
viewof start = html`<form>${Object.assign(html`<button type=button class="start-walk">Start visualization`, {onclick: event => event.currentTarget.dispatchEvent(new CustomEvent("input", {bubbles: true}))})}`
chart = {
const width = 928; // uncomment for responsive width
const height = 900;
const state_gap = width/(num_states+3);
const height_gap = 30;
const state_radius = 10;
//functions
const x_transform = function(d){
return 30 + d * state_gap;
}
const y_transform = function(d){
return d*50 +height_gap;
}
const makelink = function(d){
return [{ "x":x_transform(d.x), "y":y_transform(d.y)},
{"x":x_transform(d.bestparent), "y":y_transform(d.y-1)}]
}
//make svg
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
//Make Nodes
svg.append("g")
.selectAll("circle")
.data(idx_arr)
.join("circle")
.attr("cx", d => x_transform(d.x))
.attr("cy", d=> y_transform(d.y))
.attr("r", d => state_radius)
.attr("fill", "#001b42");
//Make Links
/*
svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("path")
.data(link_arr, d => `${d.curnode_name.nodename}\t${d.prevnode_name.nodename}`)
.join("path")
.attr("stroke-width", 50 )
.join("line")
*/
/* Links attmpt 2
svg.append("g")
.attr("stroke", "#000")
.attr("stroke-width", 1.5)
.selectAll("line")
.data(link_arr)
.attr("x1", d => d.curnode_name.x)
.attr("y1", d => d.curnode_name.y)
.attr("x2", d => d.prevnode_name.x)
.attr("y2", d => d.prevnode_name.y)
.join("line");
*/
//Links attempt 3
// https://observablehq.com/d/b8ee3b5c79cb72e0
const links = link_arr
links.forEach(link => {
link.sourceX = nodes[link.source].x;
link.sourceY = nodes[link.source].y;
link.targetX = nodes[link.target].x;
link.targetY = nodes[link.target].y;
});
link.data(links)
.join(enter => enter.append("line")
.attr("stroke", "#5c6166")
.attr("stroke-width", 2)
.attr("x1", d => d.sourceX)
.attr("y1", d => d.sourceY)
.attr("x2", d => d.targetX)
.attr("y2", d => d.targetY));
return svg.node();
}
a =d3.range(num_states)
b =d3.range(num_times)
idx_arr={
var c=[];
for (var x=0; x < a.length; x++ ){
for (var y = 0; y < counter; y++){
//var bestparent = Math.floor((Math.random()*num_states)); //for now random generated
var nodename = String(x)+"_"+String(y)
c.push( {x,y, nodename})
}
}
return c;
}
link_arr={
var c=[];
for (var x=0; x < a.length; x++ ){
for (var y = 0; y < counter; y++){
//var bestparent = Math.floor((Math.random()*num_states)); //for now random generated
var curnode_name = String(x)+"_"+String(y)
if (x<1){
var prevnode_name = curnode_name
}
else{
var prevnode_name = String(x-1)+"_"+String(y)
}
c.push( {curnode_name, prevnode_name})
}
}
return c;
}
a.length
score = `{"array":
[
[{"idx":1, "parent_idx": 1}, {"idx":2, "parent_idx": 2}, {"idx":3, "parent_idx": 3}],
[{"idx":1, "parent_idx": 2}, {"idx":2, "parent_idx": 1}, {"idx":3, "parent_idx": 1}]
]}`
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.
JSON.parse(score)
range = (start, end) => [...Array(end - start + 1).keys()].map((n) => n + start)
range(1,4)
make_nr = (A, [start, end], { expected = Math.PI, seriesIdx } = {}) =>
range(start, end)
.map((n) => ({ n, An: A(n) }))
Shanks = (A, n = 1) => [...Array(n).keys()].reduce(S, A)
//S = (A) => (n) =>
// (A(n + 1) * A(n - 1) - A(n) ** 2) / (A(n + 1) - 2 * A(n) + A(n - 1))
// An equivalent and more numerically stable form:
S = (A) => (n) =>
A(n + 1) - (A(n + 1) - A(n)) ** 2 / (A(n + 1) - 2 * A(n) + A(n - 1))
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.
