Published
Edited
Feb 16, 2018
Insert cell
Insert cell
renderDot = {
const Viz = await require('viz.js').catch(() => window.Viz);
return function renderDot(string) {
const fragment = html([Viz(string)]);
return fragment.removeChild(fragment.firstElementChild);
}
}
Insert cell
Insert cell
Insert cell
Insert cell
renderDot(graph1)
Insert cell
Insert cell
Insert cell
Insert cell
{
const element = renderDot(graph2);
yield element;
var nodes = d3.select(element).selectAll('g.node');
nodes.selectAll('ellipse').attr('fill', 'white');
nodes.on('mouseenter', function () {
console.log(this);
d3.select(this).select('ellipse').attr('stroke', 'blue').attr('stroke-width', 2);
})
.on('mouseleave', function() {
d3.select(this).select('ellipse').attr('stroke', 'black').attr('stroke-width', 1);
})
}
Insert cell
Insert cell
function dot(strings) {
let string = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) string += arguments[i] + "" + strings[i];
return renderDot(string);
}
Insert cell
dot`${graph2}`
Insert cell
Insert cell
Insert cell

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.
Learn more