Published
Edited
Feb 18, 2021
md`# Blocks colors: triangle`
svg = {
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
svg.selectAll("rect")
//.data(["#ff0000", "#ffff00", "#00ff00","#0000ff", "#000000", "#00ffff"])
.data(colorsList)
.join("rect")
.attr("x", d => rgb2xy(d).x)
.attr("y", d => rgb2xy(d).y)
.attr("width", 5)
.attr("height", 5)
.attr("fill", d=>d);
return svg.node();
}
function rgb2xy(d){
//Based on https://stackoverflow.com/questions/9869167/generate-color-triangle
const color = d3.color(d);
const sum = color.r + color.g + color.b;
const r = (color.r / sum)||0;
const g = (color.g / sum)||0;
const b = (color.b / sum)||0;
const div0 = (r + g + b) > 0 ? (r + g + b) : 1;
const x = (r * -0.5 + b * 0.5) / div0;
const y = (r * 0.5 + g * -0.5 + b * 0.5) / div0;
console.log({x: colorScale(x), y: colorScale(y)});
return {x: colorScale(x), y: colorScale(y)};
}
colorScale = d3.scaleLinear()
.domain([-0.5, 0.5])
.range([0, height-10])
colorsList = {
const list = [];
blocksColors.forEach(block => Object.keys(block.colors).forEach(color=>!list.includes(color) && list.push(color)))
return list
}
height = 300
d3 = require("d3-hsv", "d3-color", "d3-scale", "d3-selection")
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.
