Published
Edited
Oct 23, 2018
1 fork
Importers
18 stars
function offsetLeft(pts, displacements) { return offset(pts, displacements, 1) }
function offsetRight(pts, displacements) { return offset(pts, displacements, -1) }
function offset(pts, displacements, mult=1) {
if(!Array.isArray(displacements)) {
displacements = relativeOffsets(pts, displacements)
}
return d3.zip(pts, displacements)
.map(([p, o]) => [p[0]+o[0]*mult, p[1]+o[1]*mult])
}
function renderPath(container, path, opts={}) {
container.append('path')
.attr('fill', opts.fill || 'none')
.attr('stroke', opts.stroke || '#000')
.attr('stroke-width', opts.strokeWidth || 2)
.attr('stroke-dasharray', opts.strokeDasharray || '')
.attr('d', (
Array.isArray(path[0][0])
? path.map(subpath => d3.line()(subpath))
: d3.line()(path)
) + (opts.close ? 'z' : ''))
}
function renderPathPoints(container, path, opts={}) {
container.selectAll('circle.path-point')
.data(path)
.enter()
.append('circle').attr('class', 'path-point')
.attr('cx', pt => pt[0])
.attr('cy', pt => pt[1])
.attr('r', opts.r || 2.5)
.attr('fill', opts.fill || 'white')
.attr('stroke', opts.stroke || '#000')
.attr('stroke-width', opts.strokeWidth || 1)
}
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.
