Platform
Resources
Pricing
Sign in
Get started
Chris Henrick
Maps, Data, Viz, UX, Design
Workspace
Fork
Public
3 collections
By
Chris Henrick
Edited
Jun 7, 2024
Paused
BSD 3-Clause
1 fork
Importers
13 stars
Insert cell
Insert cell
<
color-legend
titleText
=
"Snowfall (cm)"
scaleType
=
"continuous"
tickFormat
=
".0f"
domain
=
"[0, 100]"
range
=
"${JSON.stringify(d3.schemeBlues[5])}"
width
=
"${width > defaultWidth ? defaultWidth : width}"
/>
Insert cell
Insert cell
Insert cell
1
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
Insert cell
Insert cell
{
let
cle
=
cleInterpolator
.
cloneNode
(
true
)
;
cle
.
tickSize
=
tickSize
;
cle
.
tickValues
=
[
0
,
25
,
50
,
75
,
100
]
;
cle
.
tickFormat
=
tickFormat
;
return
cle
;
}
Insert cell
Insert cell
cleTickFormatter
=
htl
.
html
`<color-legend />`
Insert cell
{
cleTickFormatter
.
tickFormatter
=
(
d
)
=>
`${
d
*
100
}%`
;
}
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
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
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.5
px
;
--cle-color
:
white
;
--cle-background
:
#222
;
--cle-border-radius
:
6
px
;
--cle-padding
:
0.25
rem
0.25
rem
.75
rem
;
}
</
style
>
Insert cell
<
color-legend
class
=
"styled"
/>
Insert cell
Insert cell
<
style
>
color-legend
.
columns
{
--cle-columns
:
3
;
--cle-swatch-size
:
14
px
;
}
</
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 text 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.25
px
;
color
:
teal
;
margin
:
0.25
rem
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.5
rem
;
}
.
note
{
padding
:
1
rem
;
background-color
:
hsl
(
60
,
95
%
,
92
%
)
;
}
</
style
>
Insert cell
defaultWidth
=
325
Insert cell
version
=
"1.3.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
ColorLegendElement
=
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.
Try it for free
Learn more
Fork
View
Export
Listed in...
data visualization
Chris Henrick
featured
Chris Henrick
reusable-charts
Chris Henrick
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
install
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Show 1 comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dependencies
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
example_usage
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scheme
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
interpolator
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cleInterpolator
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
interpolatorOptions
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tickFormat
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
tickSize
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cleTickFormatter
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rangeLength
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rangeValues
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
domainValues
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
markType
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
categories
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
categoricalRange
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
defaultWidth
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
version
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
localUrl
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
prodUrl
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ColorLegendElement
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cle
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
schemes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
notPermitted
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML