Published
Edited
Dec 1, 2021
5 stars
colors = scheme(nameg)
Plot.barX(cet, { title: cet, fill: cet, x: 1 }).plot({
facet: {
data: cet,
y: (d) =>
d.match(/cyclic/)
? "cyclic"
: d.match(/diverging/)
? "diverging"
: d.match(/linear/)
? "linear"
: "other",
marginLeft: 60
},
x: { axis: null },
marginLeft: 60,
width,
height: 140,
color: { range: colors }
})
interpolator = (t) => r[Math.floor(t * (r.length - 1e-7))]
interpolator(0.5)
cet = `circle_mgbm_67_c31_n256
circle_mgbm_67_c31_n256_s25
cyclic-protanopic-deuteranopic_bwyk_16-96_c31_n256
cyclic-protanopic-deuteranopic_wywb_55-96_c33_n256
cyclic-tritanopic_cwrk_40-100_c20_n256
cyclic-tritanopic_wrwc_70-100_c20_n256
cyclic_bgrmb_35-70_c75_n256
cyclic_bgrmb_35-70_c75_n256_s25
cyclic_grey_15-85_c0_n256
cyclic_grey_15-85_c0_n256_s25
cyclic_mrybm_35-75_c68_n256
cyclic_mrybm_35-75_c68_n256_s25
cyclic_mybm_20-100_c48_n256
cyclic_mybm_20-100_c48_n256_s25
cyclic_mygbm_30-95_c78_n256
cyclic_mygbm_30-95_c78_n256_s25
cyclic_mygbm_50-90_c46_n256
cyclic_mygbm_50-90_c46_n256_s25
cyclic_rygcbmr_50-90_c64_n256
cyclic_rygcbmr_50-90_c64_n256_s25
cyclic_wrkbw_10-90_c43_n256
cyclic_wrkbw_10-90_c43_n256_s25
cyclic_wrwbw_40-90_c42_n256
cyclic_wrwbw_40-90_c42_n256_s25
cyclic_ymcgy_60-90_c67_n256
cyclic_ymcgy_60-90_c67_n256_s25
diverging-isoluminant_cjm_75_c23_n256
diverging-isoluminant_cjm_75_c24_n256
diverging-isoluminant_cjo_70_c25_n256
diverging-linear-protanopic-deuteranopic_bjy_57-89_c34_n256
diverging-linear_bjr_30-55_c53_n256
diverging-linear_bjy_30-90_c45_n256
diverging-protanopic-deuteranopic_bwy_60-95_c32_n256
diverging-rainbow_bgymr_45-85_c67_n256
diverging-tritanopic_cwr_75-98_c20_n256
diverging_bkr_55-10_c35_n256
diverging_bky_60-10_c30_n256
diverging_bwg_20-95_c41_n256
diverging_bwr_20-95_c54_n256
diverging_bwr_40-95_c42_n256
diverging_bwr_55-98_c37_n256
diverging_cwm_80-100_c22_n256
diverging_gkr_60-10_c40_n256
diverging_gwr_55-95_c38_n256
diverging_gwv_55-95_c39_n256
isoluminant_cgo_70_c39_n256
isoluminant_cgo_80_c38_n256
isoluminant_cm_70_c39_n256
linear-protanopic-deuteranopic_kbjyw_5-95_c25_n256
linear-protanopic-deuteranopic_kbw_5-95_c34_n256
linear-protanopic-deuteranopic_kbw_5-98_c40_n256
linear-protanopic-deuteranopic_kyw_5-95_c49_n256
linear-tritanopic_kcw_5-95_c22_n256
linear-tritanopic_krjcw_5-95_c24_n256
linear-tritanopic_krjcw_5-98_c46_n256
linear-tritanopic_krw_5-95_c46_n256
linear_bgy_10-95_c74_n256
linear_bgyw_15-100_c67_n256
linear_bgyw_15-100_c68_n256
linear_bgyw_20-98_c66_n256
linear_blue_95-50_c20_n256
linear_bmw_5-95_c86_n256
linear_bmw_5-95_c89_n256
linear_bmy_10-95_c71_n256
linear_bmy_10-95_c78_n256
linear_gow_60-85_c27_n256
linear_gow_65-90_c35_n256
linear_grey_0-100_c0_n256
linear_grey_10-95_c0_n256
linear_kbc_5-95_c73_n256
linear_kbgoy_20-95_c57_n256
linear_kbgyw_10-98_c63_n256
linear_kbgyw_5-98_c62_n256
linear_kgy_5-95_c69_n256
linear_kry_0-97_c73_n256
linear_kry_5-95_c72_n256
linear_kry_5-98_c75_n256
linear_kryw_0-100_c71_n256
linear_kryw_5-100_c64_n256
linear_kryw_5-100_c67_n256
linear_ternary-blue_0-44_c57_n256
linear_ternary-green_0-46_c42_n256
linear_ternary-red_0-50_c52_n256
linear_wcmr_100-45_c42_n256
linear_worb_100-25_c53_n256
linear_wyor_100-45_c55_n256
rainbow_bgyr_10-90_c83_n256
rainbow_bgyr_35-85_c72_n256
rainbow_bgyr_35-85_c73_n256
rainbow_bgyrm_35-85_c69_n256
rainbow_bgyrm_35-85_c71_n256`.split(/\n/)
scheme = (name) =>
d3
.text(
`https://raw.githubusercontent.com/holoviz/colorcet/master/assets/${
name.match(/^glasbey/) ? "Glasbey" : "CET"
}/${name}.csv`
)
.then((d) =>
d3
.dsvFormat(",")
.parseRows(d, (d) =>
d3.rgb(255 * d[0], 255 * d[1], 255 * d[2]).formatHex()
)
)
glasbey = `glasbey_bw_minc_20_hue_150_280_n256
glasbey_bw_minc_20_hue_330_100_n256
glasbey_bw_minc_20_maxl_70_n256
glasbey_bw_minc_20_minl_30_n256
glasbey_bw_minc_20_n256
glasbey_bw_n256
glasbey_category10_n256
glasbey_hv_n256`.split(/\n/)
import { ramp } from "@mbostock/color-ramp"
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.
