Data visualization and analytics at Elastic. Past clients: Plotly, World Bank, UBS, JPMorgan Chase / Bank, fintech, IoT and healthcare startups.
Published
Edited
Apr 26, 2020
5 stars
svg`<svg width="960" height="550"
style="font: 16px 'Andale Mono', monospace">
<filter id="map" x="0%" y="0%" width="100%" height="100%">
<!--MAKE ELEVATION DATA-->
<!--generate noise-->
<feTurbulence seed="641746" type="fractalNoise" baseFrequency=".002"
numOctaves="7"/>
<!--scale the noise and keep the alpha channel only-->
<feComponentTransfer result="bump">
<feFuncA type="table" tableValues="0 0 1 1"/>
<feFuncR type="gamma" amplitude="0"/>
<feFuncG type="gamma" amplitude="0"/>
<feFuncB type="gamma" amplitude="0"/>
</feComponentTransfer>
<!--FINE CONTOURS-->
<!--make a bump map out of the noise
Safari chokes on multiline attrs so we must keep attr string in one line -->
<feConvolveMatrix result="fine" kernelMatrix="9 9 9 9 -72 9 9 9 9"/>
<!--MEDIUM CONTOURS-->
<!--make a posterized bump map -->
<feComponentTransfer in="bump">
<feFuncA type="discrete" tableValues=".05 .05 .05 .05 .05 .1 .1 .1 .1 .1 .14 .14 .14 .14 .14 .19 .19 .19 .19 .19 .24 .24 .24 .24 .24 .29 .29 .29 .29 .29 .33 .33 .33 .33 .33 .38 .38 .38 .38 .38 .43 .43 .43 .43 .43 .48 .48 .48 .48 .48 .52 .52 .52 .52 .52 .57 .57 .57 .57 .57 .62 .62 .62 .62 .62 .67 .67 .67 .67 .67 .71 .71 .71 .71 .71 .76 .76 .76 .76 .76 .81 .81 .81 .81 .81 .86 .86 .86 .86 .86 .9 .9 .9 .9 .9 .95 .95 .95 .95 .95 1"/>
</feComponentTransfer>
<!--for coarse elevation lines-->
<feConvolveMatrix result="medium" kernelMatrix="5 6 5 6 -44 6 5 6 5"/>
<!--COARSE CONTOURS-->
<!--make a posterized bump map -->
<feComponentTransfer in="bump">
<feFuncA type="discrete" tableValues=".2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .2 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .4 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .6 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 .8 1"/>
</feComponentTransfer>
<!--for coarse elevation lines-->
<feConvolveMatrix result="coarse" order="5"
kernelMatrix="0 0 2 0 0 0 2 3 2 0 2 3 -28 3 2 0 2 3 2 0 0 0 2 0 0"/>
<!--APPLY PALETTE-->
<!--convert the alpha channel to grayscale RGB channels for palette -->
<feColorMatrix in="bump" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1"/>
<!--pick up colors from the palette and map them into the channels-->
<!--Derivative of ESRI Europe2. Palette license: http://soliton.vm.bytemark.co.uk/pub/cpt-city/esri/copying.html-->
<feComponentTransfer>
<feFuncR type="discrete" tableValues=".68 .44 .44 .47 .47 .5 .5 .52 .52 .55 .55 .59 .59 .61 .61 .64 .64 .67 .67 .69 .69 .73 .73 .77 .77 .79 .79 .82 .82 .84 .84 .85 .85 .87 .87 .89 .89 .91 .91 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .94 .93 .93 .91 .91 .9 .9 .88 .88 .87 .87 .85 .85 .84 .84 .82 .82 .8 .8 .79 .79 .77 .77 .76 .76 .77 .77 .79 .79 .8 .8 .82 .82 .84 .84 .86 .86 .87 .87 .89 .89 .91 .91 .92 .92 .94 .94 .96 .96 .97 .97 .97 .97 .97 .97 .97 .97 .98 .98 .98 .98 .98 .98 .98 .98 .99 .99 .99 .99 .99 .99 .99 .99 .99 .99 .99"/>
<feFuncG type="discrete" tableValues=".84 .6 .6 .62 .62 .65 .65 .67 .67 .7 .7 .73 .73 .75 .75 .78 .78 .81 .81 .83 .83 .86 .86 .89 .89 .91 .91 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .93 .94 .94 .91 .91 .89 .89 .87 .87 .85 .85 .82 .82 .8 .8 .77 .77 .75 .75 .73 .73 .71 .71 .69 .69 .66 .66 .65 .65 .62 .62 .6 .6 .58 .58 .57 .57 .55 .55 .57 .57 .6 .6 .62 .62 .65 .65 .68 .68 .71 .71 .73 .73 .76 .76 .8 .8 .82 .82 .85 .85 .88 .88 .9 .9 .91 .91 .91 .91 .92 .92 .93 .93 .94 .94 .95 .95 .95 .95 .97 .97 .98 .98 .98 .98 .98 .98 .99 .99 .99"/>
<feFuncB type="discrete" tableValues=".94 .35 .35 .36 .36 .39 .39 .4 .4 .43 .43 .45 .45 .47 .47 .49 .49 .52 .52 .53 .53 .56 .56 .59 .59 .6 .6 .62 .62 .6 .6 .6 .6 .58 .58 .58 .58 .58 .58 .57 .57 .56 .56 .55 .55 .55 .55 .54 .54 .53 .53 .53 .53 .52 .52 .52 .52 .52 .52 .52 .52 .51 .51 .51 .51 .51 .51 .5 .5 .49 .49 .5 .5 .49 .49 .49 .49 .5 .5 .52 .52 .54 .54 .56 .56 .58 .58 .61 .61 .63 .63 .66 .66 .68 .68 .71 .71 .73 .73 .77 .77 .8 .8 .8 .8 .82 .82 .84 .84 .86 .86 .88 .88 .89 .89 .91 .91 .93 .93 .95 .95 .96 .96 .98 .98 .99 .99 .99"/>
</feComponentTransfer>
<!--SUPERIMPOSE OVERLAYS-->
<feMerge>
<feMergeNode/>
<feMergeNode in="fine"/>
<feMergeNode in="medium"/>
<feMergeNode in="coarse"/>
</feMerge>
</filter>
<path filter="url(#map)" d="M0 0h960v550H0z"/>
<text x="800" y="545">@monfera</text>
<text x="8" y="545">Lake Whistleman. Hypsometry palette: Europe2 ©ESRI.</text>
</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.
