The avatar for @clhenrick
Chris Henrick
Maps, Data, Viz, UX, Design
Public
Edited
Feb 24, 2024
Fork of Color Legend Element
Insert cell
Insert cell
<color-legend
titleText="Snowfall (cm)"
scaleType="continuous"
tickFormat=".0f"
domain="[0, 100]"
width="${width < 325 ? width : 325}"
range="${JSON.stringify(d3.schemeBlues[5])}"
/>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<color-legend />
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<color-legend range="${JSON.stringify(d3[scheme][5])}" />
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cleInterpolator = {
let cle = htl.html`<color-legend
titleText="Temperature (°C)"
scaleType="continuous"
tickFormat=".0f"
domain="[0, 100]"
/>`;
cle.interpolator = d3[interpolator];
return cle;
}
Insert cell
Insert cell
cleInterpolator.outerHTML
Insert cell
Insert cell
Insert cell
{
let cle = cleInterpolator.cloneNode(true);
cle.tickSize = 10;
cle.tickValues = [0, 25, 50, 75, 100];
cle.tickFormat = ".0f";
return cle;
}
Insert cell
Insert cell
cleTickFormatter = htl.html`<color-legend />`
Insert cell
{
cleTickFormatter.tickFormatter = (d) => `${d}˚`;
}
Insert cell
Insert cell
Insert cell
<color-legend
titleText="Unemployment Rate (%)"
tickFormat=".2f"
scaletype="discrete"
domain="[0.1, 1]"
range='${JSON.stringify(rangeValues)}'
/>
Insert cell
Insert cell
### Threshold Legends

Threshold legends may be rendered by setting the `scaleType` property to "threshold", specifying the desired tick values as the `domain`, and the desired color values in the `range`. To render correctly, the length of the `range` should be one less than the length of the `domain`.
Insert cell
Insert cell
<color-legend
titleText="Number of Incidents"
scaletype="threshold"
tickFormat=".0f"
domain="[${domainValues.split(",").map(d => +d.trim())}]"
range='["#fee5d9", "#fcae91", "#fb6a4a", "#de2d26", "#a50f15"]'
/>
Insert cell
Insert cell
Insert cell
<color-legend
width="335"
height="32"
titleText="Business Sectors"
scaletype="categorical"
marktype="${markType}"
domain='${JSON.stringify(categories)}'
range='${JSON.stringify(categoricalRange)}'
/>
Insert cell
JSON.stringify(categories)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<style>
* {
/* try uncommenting the next line! */
/* border: 1px solid red !important; */
}
</style>
Insert cell
Insert cell
<style>
color-legend.styled {
--cle-font-family: serif;
--cle-font-family-title: Impact;
--cle-letter-spacing-title: 0.5px;
--cle-color: white;
--cle-background: #222;
--cle-border-radius: 6px;
--cle-padding: 0.25rem 0.25rem .75rem;
}
</style>
Insert cell
<color-legend class="styled" />
Insert cell
Insert cell
<style>
color-legend.columns {
--cle-columns: 3;
--cle-swatch-size: 14px;
}
</style>
Insert cell
<color-legend
class="columns"
width="500"
height=""
titleText="Business Sectors"
scaletype="categorical"
marktype="${markType}"
domain='${JSON.stringify(categories)}'
range='${JSON.stringify(categoricalRange)}'
/>
Insert cell
Insert cell
Insert cell
Insert cell
<color-legend>
<p slot="subtitle">A subtitle paragraph</p>
<p slot="footer"><small>Some footer here</small></p>
</color-legend>
Insert cell
Insert cell
<color-legend>
<p class="fancy" slot="subtitle">A subtitle paragraph</p>
<p class="fancy" slot="footer"><small>Some footer here</small></p>
</color-legend>
Insert cell
<style>
p.fancy {
font-family: serif;
font-style: italic;
letter-spacing: 0.25px;
color: teal;
margin: 0.25rem 0;
}
</style>
Insert cell
Insert cell
Insert cell
Insert cell
<style>
color-legend:not(:defined) {
display: none;
}
color-legend:defined {
display: inline-block;
margin-bottom: 0.5rem;
}
.note {
padding: 1rem;
background-color: hsl(60, 95%, 92%);
}
</style>
Insert cell
version = "1.1.0"
Insert cell
// Require a module from a local webserver, credit: https://observablehq.com/@john-guerra/require-npm-module-from-local-file
localUrl = `http://127.0.0.1:8080/assets/color-legend-element.umd.js?${Date.now()}`
Insert cell
prodUrl = `https://unpkg.com/color-legend-element@${version}`
Insert cell
require(prodUrl)
Insert cell
cle = () => "`<color-legend>`"
Insert cell
Insert cell
Insert cell

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.
Learn more