Maps and Chartjunk for @nprapps
midDistance = 1
width = 600
cx = width/2
maxOpacity = 1
r = width/2
rSmall = width/2
gradRadius = 0.7
{
let gradients = "";
let rects = "";
let feImage = "";
for (let i = 0; i < dummy.length; ++i) {
gradients += `<radialGradient id="grad${i}"
cx="${(Math.cos(rad((i*60)-90))*rSmall+r)/width}"
cy="${(Math.sin(rad((i*60)-90))*rSmall+r)/width}"
r="${gradRadius}"
spreadMethod="pad"
gradientTransform="rotate(${0})"
>
<stop offset="0%" stop-color="${c[dummy[i]]}" stop-opacity="${maxOpacity}" />
<stop offset="${midDistance}" stop-color="${c[dummy[i]]}" stop-opacity="0" />
</radialGradient>`
rects += `<rect id="grad${i}-rect" x="0" y="0" width="${2*width/2}" height="${2*width/2}"
fill="url(#grad${i})"/>`
feImage += `<feImage xlink:href="#grad${i}-rect" result="fe${i}" x="${0}" y="${0}"/>`
}
return html`<svg style="background-color:black" width="${width}px" height="${width}px" viewbox="0 0 ${width} ${width}">
<defs>
${gradients}
${rects}
<filter id="blend-it" x="0%" y="0%" width="100%" height="100%">
${feImage}
<feBlend in="fe0" in2="fe1" mode="multiply" result="fe01"/>
<feBlend in="fe01" in2="fe2" mode="multiply" result="fe02"/>
<feBlend in="fe02" in2="fe3" mode="multiply" result="fe03"/>
<feBlend in="fe03" in2="fe4" mode="multiply" result="fe04"/>
<feBlend in="fe04" in2="fe5" mode="multiply" result="fe05"/>
<feComposite in="fe05" in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<circle filter="url(#blend-it)" cx="${cx}" cy="${cy}" r="${r}"/>
</svg>`
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
c = ["#ff00ff", "#00ffff", "#ffff00", "orange"]
.map(d => d3.cubehelix(d))
.sort((a, b) => d3.ascending(a.h, b.h))
.map(d => d.hex()).reverse()
dummy = [0,2,1,1,1,1]
function rad(deg) {
return deg*(Math.PI/180)
}
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.
