Design engineer, visualization researcher.
Published
Edited
Nov 3, 2020
// pick one of the (four hardcoded) routes. click this cell and press shift-enter to reroll me.
world = examples()
// storylet adjacency - brush 'i' below to explore each kind of route
edges = world[i]
figure = {
const hw = 100, hh = 75
const ret = html`<svg width=${hw*2} height=${hh*2}><g transform="translate(${hw},${hh})"></g></svg>`,
sel = d3.select(ret).select('g')
sel.html(`<rect x=${-hw} y=${-hh} width=${hw*2} height=${hh*2} style="fill: #111"></rect>`)
sel.selectAll('g.node').data(nodes).join('g').attr('class', 'node')
.html(d => `<circle r=8 cx=${d[0]} cy=${d[1]} style="stroke:#444; stroke-width:2px; fill:none;"></circle>`)
sel.selectAll('g.edge').data(edges).join('g').attr('class', 'edge')
.html(d => makeStroke(d[0], d[1]))
function makeStroke(i,j) {
if (i == j) return `<circle r=2 cx=${nodes[i][0]} cy=${nodes[i][1]} style="fill: lightgray;"></circle>`
let [x1, y1] = nodes[i]
let [x2, y2] = nodes[j]
return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke: lightgray; stroke-width:1.5px; stroke-dasharray: 7;"></line>`
}
return ret
}
html`<a href=${svgDataUrl(figure)}>download</a>`
// http://bl.ocks.org/curran/7cf9967028259ea032e8
function svgDataUrl(svg) {
var svgAsXML = (new XMLSerializer).serializeToString(svg);
return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
}
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.
