The avatar for @bumbeishvili
David B.
Data viz engineer | twitter.com/dbumbeishvili
Published
Techniques
Edited
Jan 26, 2022
Techniques
ClipPath
US Map - State Grid - Metro transitions on canvasAdjust Curve in parallel Sankey linksSvg Path Shape Smoothing TechniqueDefining class methods outside bodyD3 Pie Chart Update - v4-v7Extract empty hierarchy from flat dataNetwork Chart, Multiple Links, with shader arrowsd3.js zoom & minimap (forked)Dividing half circle to equal partsInputs in gridSvg Drop Shadows PlaygroundD3 Lasso selectionJsFiddle - embed notebookstroke-dasharray animationsPulse
Insert cell
Insert cell
<svg width=300 viewBox="0 0 100 70">
<clipPath id="blue-clip">
<rect width=100 height=10 y=0></rect>
</clipPath>
<clipPath id="green-clip">
<rect width=100 height=10 y=10></rect>
</clipPath>
<clipPath id="red-clip">
<rect width=100 height=10 y=20></rect>
</clipPath>
<clipPath id="orange-clip">
<rect width=100 height=10 y=30></rect>
</clipPath>
<clipPath id="yellow-clip">
<rect width=100 height=10 y=40></rect>
</clipPath>
<clipPath id="teal-clip">
<rect width=100 height=10 y=50></rect>
</clipPath>
<rect fill="blue" clip-path="url(#blue-clip)" rx=30 width=100 height=60></rect>
<rect fill="green" clip-path="url(#green-clip)" rx=30 width=100 height=60></rect>
<rect fill="red" clip-path="url(#red-clip)" rx=30 width=100 height=60></rect>
<rect fill="orange" clip-path="url(#orange-clip)" rx=30 width=100 height=60></rect>
<rect fill="yellow" clip-path="url(#yellow-clip)" rx=30 width=100 height=60></rect>
<rect fill="teal" clip-path="url(#teal-clip)" rx=30 width=100 height=60></rect>

</svg>
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