Public
Edited
Oct 11, 2024
1 fork
function colorInterpolate(colorArray, {type = 'default'} = {}){
// 构建一个渐变函数对象，用节点作为key
const colorFuncObj = {};
for (let i = 1; i < colorArray.length; ++i) {
colorFuncObj[`${i}`] = [colorArray[i-1], colorArray[i]]
}
// 返回一个函数
return function(number) {
if(number<0 || number>1){
throw new Error('Interpolate Number is out of range')
}
let mappedNumber = number * (colorArray.length - 1)
//根据 前景色 或者 背景色 映射
if(type == 'default'){
}else if(type == 'front'){
mappedNumber = mappedNumber * colorPercentage.frontColor
}else if(type == 'background'){
mappedNumber = mappedNumber * colorPercentage.backgroundColor + (1 - colorPercentage.backgroundColor) * (colorArray.length - 1)
}else{
throw new Error('"type" is illegal')
}
for (const key in colorFuncObj){
if((mappedNumber >= +key-1)&&(mappedNumber < +key)){
const ratio = mappedNumber - Math.trunc(mappedNumber)
const [color1, color2] = colorFuncObj[`${key}`]
return d3.color(d3.interpolate(color1, color2)(ratio)).formatHex()
}else if(mappedNumber == colorArray.length-1){
return colorArray[colorArray.length - 1]
}
}
}
}
function colorSampling(colorArray,n, {type = 'default'} = {}){
if(n == 1){
return [colorInterpolate(colorArray, {type})(0.35)]
}else if(n == 2){
return [colorInterpolate(colorArray, {type})(0.25),
colorInterpolate(colorArray, {type})(0.6)]
}else if(n == 3){
return [colorInterpolate(colorArray, {type})(0.2),
colorInterpolate(colorArray, {type})(0.45),
colorInterpolate(colorArray, {type})(0.8)]
}else if(n == 4){
return [colorInterpolate(colorArray, {type})(0.1),
colorInterpolate(colorArray, {type})(0.35),
colorInterpolate(colorArray, {type})(0.6),
colorInterpolate(colorArray, {type})(0.85)]
}else{
return d3.quantize(colorInterpolate(colorArray, {type}),n)
}
}
colorDataCategorical_origin = d3.csv(getCsvUrl(url_color_categorical), (e)=>{
if(e['Hex'].trim().charAt(0)==='#'){
return {
Source: e['Source'],
Hex: e['Hex'].toUpperCase(),
TextColor: e['TextColor'],
}
}else{
return {
Source: e['Source'],
Hex: ('#' + e['Hex']).toUpperCase(),
TextColor: e['TextColor'],
}
}
})
colorDataCategorical = colorDataCategorical_origin.filter(e=> !refArray.includes(e['Source']))
refArray =
// []
["WPS", "WHO", "Mckinsey", "Stripe", "DataWrapper", "Tabluea_20", "Tabluea_10", "Economist", "Mixpanel", "Excel", "UD"]
function ramp(color, n = 512) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = "calc(100% + 28px)";
canvas.style.height = "40px";
canvas.style.imageRendering = "-moz-crisp-edges";
canvas.style.imageRendering = "pixelated";
for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
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.
