html`<svg width="800" height="230" xmlns="http://www.w3.org/2000/svg">
<path d="${path_d}" stroke="#000" fill="none" stroke-width="1px" transform="translate(0,-150)"/>
</svg>`
html`<svg width="800" height="230" xmlns="http://www.w3.org/2000/svg">
<filter id="noise1">
<feTurbulence baseFrequency="0.5"/>
<feDisplacementMap in="SourceGraphic" scale="7"/>
</filter>
<path filter="url(#noise1)" d="${path_d}" stroke="#000" fill="none" stroke-width="1px" transform="translate(0,-150)"/>
</svg>`
html`<svg width="800" height="230" xmlns="http://www.w3.org/2000/svg">
<filter id="noise2">
<feTurbulence baseFrequency="0.035"/>
<feDisplacementMap in="SourceGraphic" scale="10"/>
</filter>
<path filter="url(#noise2)" d="${path_d}" stroke="#000" fill="none" stroke-width="3px" transform="translate(0,-150)"/>
</svg>`
html`<svg width="800" height="230" xmlns="http://www.w3.org/2000/svg">
<filter id="noise3">
<feTurbulence baseFrequency="0.035"/>
<feDisplacementMap in="SourceGraphic" scale="10"/>
</filter>
<filter id="noise4">
<feTurbulence baseFrequency="0.06"/>
<feDisplacementMap in="SourceGraphic" scale="13"/>
</filter>
<path filter="url(#noise3)" d="${path_d}" stroke="#000" fill="none" stroke-width="3px" transform="translate(0,-150)"/>
<path filter="url(#noise4)" d="${path_d}" stroke="#000" fill="none" stroke-width="2px" transform="translate(0,-150)"/>
</svg>`
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.
