Platform
Resources
Pricing
Sign in
Get started
Brett Cooper
In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage
Workspace
Fork
Public
By
Brett Cooper
Edited
May 20, 2022
1 star
1
Insert cell
Insert cell
${viewof brewColour} ${ColoursSVG}
Insert cell
viewof
brewColour
=
Inputs
.
select
(
brews
,
{
label
:
"Select one"
}
)
Insert cell
ColoursSVG
=
{
const
svg
=
d3
.
create
(
"svg"
)
.
attr
(
"viewBox"
,
[
0
,
0
,
width
,
80
]
)
.
style
(
'background'
,
'#fff'
)
.
attr
(
'width'
,
width
)
.
attr
(
'height'
,
80
)
;
const
out
=
svg
.
append
(
'g'
)
for
(
let
i
=
0
;
i
<
colours
.
length
;
i
++
)
{
out
.
append
(
'rect'
)
.
attr
(
'x'
,
i
*
80
)
.
attr
(
'y'
,
0
)
.
attr
(
'width'
,
80
)
.
attr
(
'height'
,
80
)
.
attr
(
'fill'
,
colours
[
i
]
)
}
return
svg
.
node
(
)
}
Insert cell
colorbrewer
=
FileAttachment
(
"colorbrewer.json"
)
.
json
(
)
Insert cell
brews
=
_
.
keys
(
colorbrewer
)
Insert cell
colours
=
chroma
.
brewer
[
brewColour
]
Insert cell
chroma
=
require
(
'chroma-js@2.4.2/chroma.js'
)
// https://www.npmjs.com/package/chroma-js
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
teHTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
brewColour
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ColoursSVG
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colorbrewer
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
brews
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colours
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chroma
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML