Published
Edited
Dec 1, 2021
5 stars
display-p3CYM spectral mixHello, apcachHello, spectral.jsHello, Color.jsMetbrewer color schemesFabio Crameri’s ColormapsXKCD painbow color mapNamed CSS colorsOil SlickGrid illusionsUMAP SleepwalkSliced Optimal TransportCanvas path blurBlue FluoriteWalk on Spheres — segments editionWalk on SpheresGraphene Moiré 1.1CMasher color interpolators (#27)Interpolate colors with Catmull-Rom/Cubic/Monotone…?“Perceptually uniform”?Hue blurcmocean color interpolators (#27)Linde–Buzo–Gray RGB Color stipplingAutochromeforcePolarforceAngularcolor2cssRandom ColorsCanvas SpiralFrida Kahlo’s paletteHello glitchBlack and white colored castelo
Colorcet
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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.