fullscreen = {
const button = html`<button>Fullscreen`;
button.onclick = () => chart.requestFullscreen();
return button;
}
// code from https://observablehq.com/@mbostock/fullscreen-canvas
update = chart.update(data, counter)
md`# Input Parameters`
viewof speed = {
return slider({
min: .3,
max: 10,
step: .1,
title: "Playback Speed",
value: 1
})
}
md`# Data and Random Walk`
md` # Other Parameters`
md` ## Parameters for link selection`
mutable chosen_edge = null
palette_outer = d3.interpolateViridis
palette_inner = d3.interpolateRdBu
/*color = d3.scaleLinear().range([.1,1]).domain(d3.extent(data.nodes,d=>d.comm[0])) */
color_outer = {
const scale = d3.scaleOrdinal(d3.schemePastel1);
return d => scale(d);
}
color_inner = {
const scale = d3.scaleOrdinal(d3.schemeDark2);
return d => scale(d);
}
md `## Scale Link Color`
color_link = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.comm);
}
md`## Scale Node Opacity to show level 1 communities`
l2scale = {
const scale = d3.scaleLinear().range([.3, 1]);
return d => scale(d.comm[1]);
}
viewof counter = Inputs.button([["Increment", value => value + 1],["Reset", value=> -1]], {value: -1})
play(random_walk[counter].note);
counter
/*
counter = {
let i=0;
while(i < random_walk.length) {
start_walk;
play(random_walk[i].note);
yield ++i;
//yield Promises.delay(random_walk[i].duration / speed, ++i);
}
}
*/
/*code adapted from https://observablehq.com/@d3/collapsible-tree */
chart_dendro = {
const root = d3.hierarchy(data_dendro);
root.x0 = dy / 2;
root.y0 = 0;
root.descendants().forEach((d, i) => {
d.id = i;
d._children = d.children;
if (d.depth && d.data.name.length !== 7) d.children = null;
});
const svg = d3.create("svg")
.attr("viewBox", [-margin.left, -margin.top, width, dx])
.style("font", "15px sans-serif")
.style("user-select", "none");
const gLink = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5);
const gNode = svg.append("g")
.attr("cursor", "pointer")
.attr("pointer-events", "all");
function update(source) {
const duration = d3.event && d3.event.altKey ? 2500 : 250;
const nodes = root.descendants().reverse();
const links = root.links();
// Compute the new tree layout.
tree(root);
let left = root;
let right = root;
root.eachBefore(node => {
if (node.x < left.x) left = node;
if (node.x > right.x) right = node;
});
const height_dendro = right.x - left.x + margin.top + margin.bottom;
const transition = svg.transition()
.duration(duration)
.attr("viewBox", [-margin.left, left.x - margin.top, width, height_dendro])
.tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle"));
// Update the nodes…
const node = gNode.selectAll("g")
.data(nodes, d => d.id);
// Enter any new nodes at the parent's previous position.
const nodeEnter = node.enter().append("g")
.attr("transform", d => `translate(${source.y0},${source.x0})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
.on("click", (event, d) => {
d.children = d.children ? null : d._children;
update(d);
});
nodeEnter.append("circle")
.attr("r", d=>d._children ? 8 : 4)//radius/4)
.attr("fill", function(d){
if(d.data.level == -1){
return 'gray'
}
else if(d.data.level == 0){
return color_inner(d.data.comm);
}
else{
return color_outer(d.data.comm);
}
})//color_outer) fill this with community color
.attr("stroke-width", 10);
nodeEnter.append("text")
.attr("dy", ".31em")
.attr("x", d => d._children ? -6 : 6)
.attr("text-anchor", d => d._children ? "end" : "start")
.text(d => d.data.name)
.clone(true).lower()
.attr("stroke-linejoin", "round")
.attr("stroke-width", 10)
.attr("stroke", "white");
// Transition nodes to their new position.
const nodeUpdate = node.merge(nodeEnter).transition(transition)
.attr("transform", d => `translate(${d.y},${d.x})`)
.attr("fill-opacity", 1)
.attr("stroke-opacity", 1);
// Transition exiting nodes to the parent's new position.
const nodeExit = node.exit().transition(transition).remove()
.attr("transform", d => `translate(${source.y},${source.x})`)
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0);
// Update the links…
const link = gLink.selectAll("path")
.data(links, d => d.target.id);
// Enter any new links at the parent's previous position.
const linkEnter = link.enter().append("path")
.attr("d", d => {
const o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.merge(linkEnter).transition(transition)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition(transition).remove()
.attr("d", d => {
const o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
});
// Stash the old positions for transition.
root.eachBefore(d => {
d.x0 = d.x;
d.y0 = d.y;
});
}
update(root);
return svg.node();
}
dy = width / 4
dx=width/40
data_dendro = FileAttachment("dendrogram@1.json").json()
tree = d3.tree().nodeSize([dx, dy])
margin = ({top: 10, right: 10, bottom: 10, left: width/5})
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
md `# Imports`
d3 = require("d3@6")
import {slider} from "@jashkenas/inputs"
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.
