Published unlisted
Edited
Jul 7, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable info = []
Insert cell
mutable brushed_nodes = []
Insert cell
mutable brushed_source = new Set()
Insert cell
mutable corresponding_dest = new Set()
Insert cell
height = 680
Insert cell
margin = 20
Insert cell
local_margin = 10
Insert cell
local_height = 500
Insert cell
local_width = width / 2 - margin
Insert cell
Insert cell
subgraph = {
function success(resp){
return resp;
}
return await $.ajax({
url:'http://localhost:5000/get_subgraph_by_node_id',
dataType: 'json',
type: 'POST',
data: JSON.stringify(Array.from(brushed_nodes)),
contentType: "application/json",
success: success
});
}
Insert cell
subgraph_nodes = subgraph.nodes.map(d => d.id)
Insert cell
timestamps = {
return await $.ajax({
url: 'http://localhost:5000//get_timestamps',
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
type: 'GET'
})
}
Insert cell
graph = {

return await $.ajax({
url:'http://localhost:5000/get_graph',
dataType: 'json',
type: 'GET',
contentType: "application/json;charset=UTF-8",
});
}
Insert cell
tsne = {
function success(resp){
return resp;
}

if (subgraph_nodes.length > 0) {
return await $.ajax({
url:'http://localhost:5000/perform_tsne2',
dataType: 'json',
type: 'POST',
data: JSON.stringify(subgraph_nodes),
contentType: "application/json",
success: success
});
}

}
Insert cell
source_data = tsne.source_nodes.map( (d,i) => {
let ret = new Object()
ret.node = d
ret.x = tsne.source_x[i]
ret.y = tsne.source_y[i]
return ret
})
Insert cell
dest_data = tsne.dest_nodes.map( (d,i) => {
let ret = new Object()
ret.node = d
ret.x = tsne.dest_x[i]
ret.y = tsne.dest_y[i]
return ret
})
Insert cell
Insert cell
dest_x_ext = d3.extent(tsne.dest_x)
Insert cell
dest_x_scale = d3.scaleLinear().domain(dest_x_ext).range([margin, local_width-margin])
Insert cell
dest_y_ext = d3.extent(tsne.dest_y)
Insert cell
dest_y_scale = d3.scaleLinear().domain(dest_y_ext).range([local_height-margin-local_margin, margin])
Insert cell
source_x_ext = d3.extent(tsne.source_x)
Insert cell
source_x_scale = d3.scaleLinear().domain(source_x_ext).range([margin, local_width-margin])
Insert cell
source_y_ext = d3.extent(tsne.source_y)
Insert cell
source_y_scale = d3.scaleLinear().domain(source_y_ext).range([local_height-margin-local_margin,margin])
Insert cell
prob_ext = d3.extent(graph.edges, d => d.prob)
Insert cell
timestamps_ext = d3.extent(timestamps)
Insert cell
edge_color_scale = d3.scaleLog().domain(timestamps_ext).range([d3.hsl(106,.2, .3),d3.hsl(106,1,.6)])
Insert cell
edge_opacity_scale = d3.scaleLinear().domain(prob_ext).range([0.1,1])
Insert cell
Insert cell
d3 = require('d3@6')
Insert cell
import {drawdom} from '91007ee9d5fd152b'
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell
import { jQuery as $ } from "@ddspog/useful-libs"
Insert cell
import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from "@observablehq/inputs"
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell
Insert cell
// drag = simulation => {
// function dragstarted(event,d) {
// if (!event.active) simulation.alphaTarget(0.3).restart();
// d.fx = event.subject.x;
// d.fy = event.subject.y;
// }
// function dragged(event,d) {
// d.fx = event.x;
// d.fy = event.y;
// }
// function dragended(event,d) {
// if (!event.active) simulation.alphaTarget(0);
// d.fx = null;
// d.fy = null;
// }
// return d3.drag()
// .on("start", dragstarted)
// .on("drag", dragged)
// .on("end", dragended);
// }
Insert cell
// viewof time = Scrubber(timestamps, {
// delay: 100,
// loop: true,
// }) // TIMESTAMP SCRUBBER
Insert cell
// plot = {
// const simulation = d3.forceSimulation()
// .force("charge", d3.forceManyBody())
// .force("link", d3.forceLink().id(d => d.id))
// .force("x", d3.forceX())
// .force("y", d3.forceY())
// .on("tick", ticked);

// const svg = d3.create("svg")
// .attr("viewBox", [-width / 2, -height / 2, width, height]);

// let link = svg.append("g")
// .attr("stroke", "#999")
// .attr("stroke-opacity", 0.6)
// .attr('stroke-widht',1)
// .selectAll("line")
// function nodeover(d,i) {
// let cx = d3.select(this).attr('cx')
// let cy = d3.select(this).attr('cy')

// d3.select(this)
// .attr('fill', d3.hcl(0,0,75))
// .attr('r', 9)

// svg.append('text')
// .classed('node_id',true)
// .attr('x', () => cx)
// .attr('y', () => cy)
// .attr('font-size',12)
// .text(() => d.id.toString())
// }
// function nodeoff(d,i) {
// d3.select(this).attr('r',5).attr('fill',d3.hcl('black'))
// svg.selectAll('.node_id').remove()
// }
// function linkover(d,i) {
// let x1 = d3.select(this).attr('x1')
// let x2 = d3.select(this).attr('x2')
// let y1 = d3.select(this).attr('y1')
// let y2 = d3.select(this).attr('y2')
// d3.select(this).attr('stroke-width',6)
// let msg = timeframe.edges[i].prob.toString()+'\n'
// +timeframe.edges[i].timestamp.toString()+'\n'
// +timeframe.edges[i].ground_truth.toString()
// svg.append('text')
// .classed('edge_msg',true)
// .attr('x', () => (x1+x2)/2)
// .attr('y', () => (y1+y2)/2)
// .attr('font-size',12)
// .text(() => msg)
// }
// function linkoff(d,i) {
// d3.select(this).attr('stroke-width',1)
// svg.selectAll('.edge_msg').remove()
// }

// let node = svg.append("g")
// .attr("stroke", "#fff")
// .attr("stroke-width", 1.5)
// .selectAll("circle");

// function ticked() {
// node.attr("cx", d => d.x)
// .attr("cy", d => d.y);

// link.attr("x1", d => d.source.x)
// .attr("y1", d => d.source.y)
// .attr("x2", d => d.target.x)
// .attr("y2", d => d.target.y);
// }

// invalidation.then(() => simulation.stop());

// return Object.assign(svg.node(), {
// update({nodes, links}) {

// const old = new Map(node.data().map(d => [d.id, d]));
// nodes = nodes.map(d => Object.assign(old.get(d.id) || {}, d));
// links = links.map(d => Object.assign({}, d));
// node = node
// .data(nodes, d => d.id)
// .join(enter => enter.append("circle")
// .attr("r", 5)
// .call(drag(simulation)))
// .on('mouseover',nodeover)
// .on('mouseout',nodeoff);
// link = link
// .data(links, d => [d.source, d.target])
// .join("line")
// .attr('stroke',d => edge_color_scale(d.timestamp))
// .on('mouseover',linkover)
// .on('mouseout',linkoff);

// simulation.nodes(nodes);
// simulation.force("link").links(links);
// simulation.alpha(1).restart().tick();
// ticked(); // render now!
// }
// });
// }
Insert cell
// update = {
// let nodes = timeframe.nodes
// let links = timeframe.edges
// plot.update({nodes,links});
// }
Insert cell
// tsne1 = {
// function success(resp){
// return resp;
// }
// return await $.ajax({
// url:'http://localhost:5000/perform_tsne1',
// dataType: 'json',
// type: 'POST',
// data: JSON.stringify(timeframe_nodes),
// contentType: "application/json",
// success: success
// });

// }
Insert cell
// timeframe = {
// function success(resp){
// return resp;
// }
// return await $.ajax({
// url:'http://localhost:5000/get_timeframe',
// dataType: 'json',
// type: 'POST',
// data: JSON.stringify(timestamps.indexOf(time)),
// contentType: "application/json",
// success: success
// });

// }
Insert cell
// timeframe_nodes = timeframe.nodes.map(d => d.id)
Insert cell
// SCATTER HOVERING
// hovering interaction
// function mouseover_response(d,i) {
// d3.select(this)
// .attr('fill', d3.hcl('blue'))
// d3.select(this).attr('r',6)
// svg.append('text')
// .classed('node_id',true)
// .attr('x', d3.select(this).attr('cx'))
// .attr('y', d3.select(this).attr('cy') - 5)
// .attr('font-size',12)
// .text(() => d.node)
// }

// function destover_response(d,i) {
// d3.select(this)
// .attr('fill', d3.hcl('blue'))
// d3.select(this).attr('r',6)
// dest_g.append('text')
// .classed('node_id',true)
// .attr('x', d3.select(this).attr('cx'))
// .attr('y', d3.select(this).attr('cy') - 5)
// .attr('font-size',12)
// .text(() => d.node)
// }
// function mouseout_response(d,i) {
// d3.select(this).attr('fill', d3.hcl(0,0,75))
// d3.select(this).attr('r',4)
// svg.selectAll('.node_id').remove()
// }
Insert cell
viewof id = Text({label: "Enter NodeID", placeholder: "0", submit: true, multiple: true})
Insert cell
selected_nodes = new Set()
Insert cell
selected_nodes.add(id)
Insert cell
viewof plot_view = drawdom(plot,5)
Insert cell
viewof subgraph_view = drawdom(plot_subgraph,5)
Insert cell
viewof scatter_view = drawdom(scatterplot,5)
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more