Web Datavis researcher by day, Indie Game designer by night
Published
Edited
Nov 3, 2021
Importers
svg`<svg width="${width}" height="300">
<defs>
<style>
.band {
opacity: 0.5;
mix-blend-mode: multiply;
}
</style>
</defs>
<path d="${ Band({source: [0, 0], target: [250, 150], width: 80})}" class="band" fill="teal"/>
<path d="${ Band({source: [0, 80], target: [250, 0], width: 120})}" class="band" fill="brown"/>
<path d="${ Band({source: [0, 200], target: [250, 250], width: 20})}" class="band"/>
</svg>`
Band = ({source, target, width} = {}) => fatLinkHorizontal().width(width)({ source: [source[0], source[1]+width/2], target: [target[0], target[1]+width/2]})
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.
