Web Datavis researcher by day, Indie Game designer by night
{
const p1 = {x: 50, y: 50}
const p2 = {x: 250, y: 250}
return svg`
<svg width="${width}" height="300">
<path d="${ connector(p1, p2) }" fill="none" stroke="orange" stroke-width="4"/>
</svg>`
}
{
const context = DOM.context2d(width, 300)
const canvas = context.canvas
const p1 = {x: 50, y: 50}
const p2 = {x: 250, y: 250}
context.beginPath()
connector(p1, p2, {context})
context.lineWidth = 4
context.strokeStyle = "orange"
context.stroke()
return canvas
}
straight = (p1, p2, {context = d3.path(), start = true} = {}) => {
// the simplest connector: it links p1 to p2 with a straight segment
if(start)
context.moveTo(p1.x, p1.y)
context.lineTo(p2.x, p2.y)
return context
}
square = (p1, p2, {context = d3.path(), start = true, sweep = true} = {}) => {
// a connector that makes a square turn
if(start)
context.moveTo(p1.x, p1.y)
if(sweep) {
// first segment is horizontal
context.lineTo(p2.x, p1.y)
}
else {
// first segment is vertical
context.lineTo(p1.x, p2.y)
}
context.lineTo(p2.x, p2.y)
return context
}
beveled = (p1, p2, {context = d3.path(), start = true, sweep = true, corner_radius = 25} = {}) => {
// similar to the 'square' connector, but with a 45 degrees bevel
let r = clamped_radius(corner_radius, p1, p2)
let [rx, ry] = signed_radii(r, p1, p2)
if(start)
context.moveTo(p1.x, p1.y)
if(sweep) {
context.lineTo(p2.x-rx, p1.y)
context.lineTo(p2.x, p1.y+ry)
}
else {
context.lineTo(p1.x, p2.y-ry)
context.lineTo(p1.x+rx, p2.y)
}
context.lineTo(p2.x, p2.y)
return context
}
rounded = (p1, p2, {context = d3.path(), start = true, sweep = true, corner_radius = 25} = {}) => {
// similar to the 'beveled' connector, but with a rounded corner
let cw = clockwise(p1, p2) ? 0 : 1
let r = clamped_radius(corner_radius, p1, p2)
if(start)
context.moveTo(p1.x, p1.y)
if(sweep) {
context.arcTo(p2.x, p1.y, p2.x, p2.y, r)
}
else {
context.arcTo(p1.x, p2.y, p2.x, p2.y, r)
}
context.lineTo(p2.x, p2.y)
return context
}
xor = (a, b) => a ? !b : b
clockwise = (p1, p2) => xor(p2.x > p1.x, p2.y > p1.y) // curve is clockwise or counterclockwise according to the quadrant p2 lies in (using p1 as origin)
clamped_radius = (radius, p1, p2) => Math.min(radius, Math.abs(p2.x-p1.x), Math.abs(p2.y-p1.y)) // actual radius is constrained by the relative position of the two points
signed_radii = (r, p1, p2) => {
// radii need to change sign according to the relative displacement of points
const rx = p2.x > p1.x ? r : -r
const ry = p2.y > p1.y ? r : -r
return [rx, ry]
}
connectors = ({straight, square, beveled, rounded})
data = ({
nodes: [
{x: w/4, y: h/4},
{x: 3*w/4, y: 3*h/4}
],
links: [
{source: 0, target: 1}
]
})
Playground = ({value, connector, sweep, corner_radius} = {}) => {
const vis = d3.create('svg')
const node = vis.node()
// avoid unintended sharing of data structures
value = _.cloneDeep(value)
vis.classed('playground', true)
vis
.attr('width', w)
.attr('height', h)
vis.append('text')
.classed('title', true)
.text(connector)
.attr('x', 10)
.attr('y', h-20)
function update() {
vis.selectAll('.link')
.data(value.links)
.join('path')
.classed('link', true)
.attr('d', d => {
const p1 = value.nodes[d.source]
const p2 = value.nodes[d.target]
return connectors[connector](p1, p2, {sweep, corner_radius}).toString()
})
vis.selectAll('.node')
.data(d => value.nodes)
.join(
enter => enter.append('circle')
.classed('node', true)
.call(d3.drag()
.on('drag', (event, d) => {
// d3.pointer(event, vis) does not work...
d.x = event.x
d.y = event.y
set(node, value) // set this Input value and notify
})
)
)
.attr('r', 8)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
}
Object.defineProperty(node, 'value', {
get() {
return value
},
set(v) {
value = v
update()
}
})
node.value = value
return node
}
ex1 = Playground({value: this ? this.value : data, connector: 'straight'})
ex2 = Playground({value: this ? this.value : data, connector: 'square', sweep: sweep})
ex3 = Playground({value: this ? this.value : data, connector: 'beveled', sweep: sweep, corner_radius: corner_radius})
ex4 = Playground({value: this ? this.value : data, connector: 'rounded', sweep: sweep, corner_radius: corner_radius})
multibind(ex1, ex2, ex3, ex4)
w = 300
h = w/1.618
html`<style>
.playground {
border: 4px solid white;
background: whitesmoke;
box-sizing: border-box;
}
.node {
fill: white;
stroke: black;
stroke-width: 4;
}
.node:hover {
cursor: move;
}
.link {
fill: none;
stroke: steelblue;
stroke-width: 4;
}
.title {
font-family: sans-serif;
fill: #777;
pointer-events: none;
}
</style>`
_ = require("lodash")
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.