render()(1)
{
await visibility(); // wait until the cell is visible
const draw = render(); // return the drawing function from the render() method
//#return draw(1);
return renderGif(invalidation, draw, 1000, { preview: draw(0), pause: 1000 }); // render the gif
}
function graph_frame() {
// 1. Define initial vertices and edges
//Make SVG
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
/*svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "white")
.attr("stroke", "none");
*/
//Constants that do not change based on index
//scaling should be coded in original data
let spacing = 2
let node_radius = width/(num_states*spacing )
let x_scale = spacing *node_radius;
let x_shift = node_radius*spacing /2 ;
let y_scale = height/num_times;
let y_shift = 0;
//Functions
function updateLinks(links){
svg.selectAll("line").remove();
let link = svg.selectAll("line");
links.forEach(link => {
link.sourceX_dspl = link.sourceX*x_scale+x_shift;
link.sourceY_dspl = link.sourceY*y_scale+y_shift;
link.targetX_dspl = link.targetX*x_scale+x_shift;
link.targetY_dspl = link.targetY*y_scale+y_shift;
});
link = link.data(links)
.join(enter => enter.append("line")
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr('text', 'A')
//Deal with skips by representing as dashed lines
.style("stroke-dasharray", d=>{
if (d.label=='skip'){
return ("3, 3")}
else{
return ("3, 0")
}})
.style('opacity', d=>{
if (d.label=='skip'){
return (.5)}
else{
return (1)
}})
//X Y location of links
.attr("x1", d => d.sourceX_dspl )
.attr("y1", d => d.sourceY_dspl )
.attr("x2", d => d.targetX_dspl )
.attr("y2", d => d.targetY_dspl ),
// exit => exit.remove()
);
}
function updateTrails( t){
svg.selectAll("rect").remove();
let trail = svg.selectAll("rect");
let trail_shift = node_radius/4
trail = trail
.data( make_nodelayer(idx))
.join(
enter => enter.append("rect")
.attr("x", d => d.x*x_scale+x_shift- node_radius)
.attr("y", d => y_shift-trail_shift)
.attr('width', 2* node_radius)
.attr('height', d=>(t*y_scale)-trail_shift)
.attr('stroke', 'white')
.attr('fill', "transparent")
.style('opacity', .5),
// exit => exit.remove()
);
}
function updateNodes(idx){
svg.selectAll("circle").remove();
let node = svg.selectAll("circle");
node = node
.data( make_nodelayer(idx))
.join(
enter => enter.append("circle")
.attr("stroke", "white")
.attr("fill", "#6699FF")
.attr("r", node_radius)
.attr("cx", d => d.x*x_scale+x_shift)
.attr("cy", d => d.y*y_scale+y_shift),
// .attr("id", (d,i) => "v_"+i),
// exit => exit.remove()
);
}
//Time dependent elemnts (index-dependent)
return t => {
//Assume t is going to be in increments of .333 seconds
var idx = Math.round((t*30)); //unit of input in ms
var links = data_from_cadenza['links'][idx];
//perform updates
updateTrails( idx);
mutable inputtime=idx
if (links.length >0){
updateLinks(links);
}
updateNodes(idx);
return svg.node();
} ;
}
mutable inputtime = 0
gif_len = 2000
total_frames
graph_frame()(1.1)
example_duration = 3000
mutable idx = -1;
viewof example_start_render1 = Object.defineProperty(html`<button>Render GIF`, 'value', {value: undefined})
{
example_start_render1;
await visibility(); // wait until the cell is visible
const draw = graph_frame(); // return the drawing function from the render() method
//return draw(500);
return renderGif(invalidation, draw, gif_len+100, { preview: draw(0), pause: gif_len }); // render the gif
}
graph_frame()(1)
import {rasterize} from "@mbostock/saving-svg"
data_from_cadenza = {
if (select == "Sousa"){
return FileAttachment("sousa@15.json").json()
}
else if (select == "Rode"){
return FileAttachment("rode_newlink_1token@1.json").json()
}
}
num_states = Number(data_from_cadenza['num nodes'])
FRAMETIME = 33
num_times = 100//data_from_cadenza['links'].length
a =d3.range(num_states)
idx_arr={
var c=[];
var y=counter
for (var x=0; x < a.length; x++ ){
//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;
}
function make_nodelayer(t){
var c=[];
var y=t
var a = d3.range(num_states)
for (var x=0; x < a.length; x++ ){
//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;
}
b =d3.range(num_times)
all_links = {
var all_links = data_from_cadenza['links'];
for (var i = 0; i < all_links.length; i++){
let curentry = all_links[i]
for (var j =0; j < curentry.length; j++){
curentry[j]['id']= 'lnk'
}
}
return all_links
}
link_arr = data_from_cadenza['links'][counter]
data_from_cadenza['links'][2].length
single_path_link_arr= data_from_cadenza['single path vis links']
/*link_arr={
var c=[];
var node_cur_idx = 0;
for (var y = 0; y < counter; y++){
for (var x=0; x < a.length; x++ ){
//var bestparent = Math.floor((Math.random()*num_states)); //for now random generated
var target = node_cur_idx
var source =y*a.length-y;
if (node_cur_idx < a.length){
source=target
}
c.push( {source, target})
node_cur_idx ++;
}
}
return c;
}
*/
graph
height = 300
/* Old version that specifies location of every node
idx_arr={
var c=[];
for (var y = 0; y < counter; y++){
for (var x=0; x < a.length; x++ ){
//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;
}
*/
idx_arr[10].x
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.
