Maps and Chartjunk for @nprapps
Public
Edited
Jan 13, 2024
1 fork
<svg width="600px" height="600px" viewbox="0 0 600 600">
<defs>
<linearGradient id="wave" x1="0%" x2="100%" y1="0%" y2="0%"
spreadMethod="pad">
<stop offset="0%" stop-color="#ff00ff" stop-opacity="1"/>
<stop offset="100%" stop-color="ff00ff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="red-yellow" x1="0%" x2="100%" y1="0%" y2="100%"
spreadMethod="pad" gradientTransform="rotate(60)">
<stop offset="0%" stop-color="gold" stop-opacity="1" />
<stop offset="100%" stop-color="red" stop-opacity="0" />
</linearGradient>
<rect id="wave-rect" x="0" y="0" width="400" height="400" fill="url(#wave)"/>
<rect id="ry-rect" x="0" y="0" width="400" height="400" fill="url(#red-yellow)"/>
<filter id="blend-it" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="#wave-rect" result="myWave" x="100" y="100"/>
<feImage xlink:href="#ry-rect" result="myRY" x="100" y="100"/>
<feBlend in="myWave" in2="myRY" mode="multiply" result="blendedGrad"/>
<feComposite in="blendedGrad" in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<circle filter="url(#blend-it)" cx="300" cy="300" r="200"/>
</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.
