📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Jun 11, 2022
5 stars
cle = require('color-legend-element@1.0.4/build/color-legend-element.umd.js')
<color-legend></color-legend>
<color-legend
range='["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"]'
domain="[100, 500]"
tickFormat=".0f"
tickValues="[100, 300, 500]"
>
</color-legend>
<color-legend
class="continuous-with-interpolator"
titletext="Temperature (°C)"
scaletype="continuous"
tickFormat=".0f"
domain="[0, 100]"
>
</color-legend>
<color-legend
titleText="Unemployment Rate (%)"
tickFormat=".1f"
scaleType="discrete"
domain="[0.1, 1]"
range='["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]'
>
</color-legend>
<color-legend>
<small slot="subtitle">
Some subtitle text here perhaps?
</small>
<p slot="footer" class="no-data">
= No data
</p>
</color-legend>
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.
