Public
Edited
Jul 4, 2020
// interpolateJet = function(x){
// //The steps in the jet colorscale
// const jet_data_lin = [
// [0,0,0.5],
// [0,0,1],
// [0,0.5,1],
// [0,1,1],
// [0.5,1,0.5],
// [1,1,0],
// [1,0.5,0],
// [1,0,0],
// [0.5,0,0]
// ]
// const jet_rgb = jet_data_lin.map(x => {
// return d3.rgb.apply(null, x.map(y=>y*255))
// })
// //perform piecewise interpolation between each color in the range
// return d3.piecewise(d3.interpolateRgb, jet_rgb)
// }
md`Cool article from fil with perceptual uniformity estimation. https://observablehq.com/@fil/perceptually-uniform`
cscale_plot('interpolateViridis', 300, 300)
cscale_plot('interpolateMike', 300, 300)
interpolateJet = function(x){
//The steps in the jet colorscale
const jet_data_lin = [
[0,0,0.5],
[0,0,1],
[0,0.5,1],
[0,1,1],
[0.5,1,0.5],
[1,1,0],
[1,0.5,0],
[1,0,0],
[0.5,0,0]
]
const jet_rgb = jet_data_lin.map(x => {
return d3.rgb.apply(null, x.map(y=>y*255))
})
//perform piecewise interpolation between each color in the range
return d3.piecewise(d3.interpolateRgb, jet_rgb)
}
interpolateJD = function(x){
//The steps in the jet colorscale
const jd_data_lin = [
[0.5411764705882353, 0.0, 0.0],
[0.8, 0.0, 0.0],
[1.0, 0.2, 0.0],
[1.0, 0.47058823529411764, 0.0],
[1.0, 0.6862745098039216, 0.0],
[1.0, 0.9333333333333333, 0.0],
[0.8, 0.8862745098039215, 0.0],
[0.5098039215686274, 0.8, 0.0],
[0.0, 0.7137254901960784, 0.0],
[0.0, 0.5411764705882353, 0.2],
[0.0, 0.4, 0.2]
]
const jd_rgb = jd_data_lin.map(x => {
return d3.rgb.apply(null, x.map(y=>y*255))
})
//perform piecewise interpolation between each color in the range
return d3.piecewise(d3.interpolateRgb, jd_rgb)
}
interpolateJD()(1)
d3.interpolateJD = interpolateJD()
cscale_plot('interpolateJD', 300, 300)
d3.interpolateMike = function(x) {
//lightness (J), redness-to-greenness (a), and blueness-to-yellowness (b)
//J 20 - 80
const j_min = 90
const j_max = 40
var j = j_min + x*(j_max-j_min)
//a -20 - 20
const a_min = -10
const a_max = 50
var a = a_min + x*(a_max - a_min)
//b 0
const b_min = 30
const b_max = 20
var b = b_min + x*(b_max - b_min)
return d3.jab(j,a,b)
}
d3.interpolateRedToGreen = function(x) {
//lightness (J), redness-to-greenness (a), and blueness-to-yellowness (b)
//J 20 - 80
const j_min = 60
const j_max = 60
var j = j_min + x*(j_max-j_min)
//a -20 - 20
const a_min = -10
const a_max = 10
var a = a_min + x*(a_max - a_min)
//b 0
var b_min = 50
const b_max = b_min = 50
var b = b_min + x*(b_max - b_min)
return d3.jab(j,a,b)
}
color_lightness_d = function(colorscale, width, height) {
var line_width = width - margin.left - margin.right
line_width = width
var c_scale = d3.scaleLinear()
.domain([0, line_width])
.interpolate(d => colorscale);
var lightness = d3.range(line_width).map(x => {
var col = c_scale(x)
var jab = d3.jab(col)
return jab.J
})
var data = d3.pairs(lightness, (a,b)=> b-a)
return line_plot(data, width, height)
}
color_lightness = function(colorscale, width, height) {
var line_width = width - margin.left - margin.right
var c_scale = d3.scaleLinear()
.domain([0, line_width])
.interpolate(d => colorscale);
var data = d3.range(line_width).map(x => {
var col = c_scale(x)
var jab = d3.jab(col)
return jab.J
})
return line_plot(data, width, height)
}
color_scale = function(colorscale, width, height, margin){
if (!margin){
margin = {left: 0, right: 0, top: 0, bottom: 0}
}
var cbar_width = width - margin.left - margin.right;
const svg = d3.select(DOM.svg(width, height));
var colorScale = d3.scaleSequential(colorscale)
.domain([0, cbar_width])
// var x = d3.scaleLinear()
// .domain([0, cbar_width])
// .range([margin.left, cbar_width - margin.right])
var bars = svg.selectAll(".bars")
.data(d3.range(cbar_width), function(d) { return d; })
.enter().append("rect")
.attr("class", "bars")
.attr("x", function(d, i) { return i + margin.left; })
.attr("y", 0)
.attr("height", height)
.attr("width", 1)
.style("fill", function(d, i ) { return colorScale(d); })
return svg.node();
}
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.
