Public
Edited
Mar 5, 2022
rgbList = FileAttachment("rgb.json").json()
_ = require('lodash')
chroma = require('chroma-js')
d3 = require('d3')
randomRGBColors = _.sampleSize(rgbList, 60)
{
const svg = d3.select(DOM.svg(1200, 750));
let words = randomRGBColors.map(d => ({
text: d.input,
name: d.input,
color: d.target
}));
let rectWidth = 145;
let rectHeight = 30;
let columnSize = 6;
function draw(words) {
let region = svg
.append('g')
.attr('transform', `translate(${rectWidth / 2 + 10}, ${0})`);
let groups = region
.selectAll("g.rect")
.data(words)
.enter()
.append("g")
.attr('class', 'rect')
.attr("transform", (d, i) => {
let x = (i % columnSize) * (rectWidth + 15);
let y = Math.floor(i / columnSize) * (rectHeight + 42);
return `translate(${x}, ${y})`;
});
groups
.append('rect')
.attr('x', -rectWidth / 2)
// .attr('y', -rectHeight / 2)
.attr('rx', 2)
.attr('width', rectWidth)
.attr('height', rectHeight)
.style('stroke', 'hsla(0, 0%, 50%)')
.style('fill', d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', d => {
let curColor = chroma(d.text).hcl();
if (curColor[2] > 0) {
return 'black';
} else {
return 'white';
}
})
.attr('y', rectHeight + 5)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
.text(d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', 'black')
.attr('y', rectHeight + 18)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
// .style('font-style', 'italic')
.text(d => d.color);
}
draw(words);
return svg.node();
}
md`## Generate HEX`
hexList = FileAttachment("hex.json").json()
randomHexColors = _.sampleSize(hexList, 60)
{
const svg = d3.select(DOM.svg(1200, 750));
let words = randomHexColors.map(d => ({
text: d.input,
name: d.input,
color: d.target
}));
let rectWidth = 145;
let rectHeight = 30;
let columnSize = 6;
function draw(words) {
let region = svg
.append('g')
.attr('transform', `translate(${rectWidth / 2 + 10}, ${0})`);
let groups = region
.selectAll("g.rect")
.data(words)
.enter()
.append("g")
.attr('class', 'rect')
.attr("transform", (d, i) => {
let x = (i % columnSize) * (rectWidth + 15);
let y = Math.floor(i / columnSize) * (rectHeight + 42);
return `translate(${x}, ${y})`;
});
groups
.append('rect')
.attr('x', -rectWidth / 2)
// .attr('y', -rectHeight / 2)
.attr('rx', 2)
.attr('width', rectWidth)
.attr('height', rectHeight)
.style('stroke', 'hsla(0, 0%, 50%)')
.style('fill', d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', d => {
let curColor = chroma(d.text).hcl();
if (curColor[2] > 0) {
return 'black';
} else {
return 'white';
}
})
.attr('y', rectHeight + 5)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
.text(d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', 'black')
.attr('y', rectHeight + 18)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
// .style('font-style', 'italic')
.text(d => d.color);
}
draw(words);
return svg.node();
}
md`## Generate HSL`
hslList = FileAttachment("hsl.json").json()
randomHSLColors = _.sampleSize(hslList, 48)
{
const svg = d3.select(DOM.svg(1300, 860));
let words = randomHSLColors.map(d => ({
text: d.input,
name: d.input,
color: d.target
}));
let rectWidth = 185;
let rectHeight = 30;
let columnSize = 4;
function draw(words) {
let region = svg
.append('g')
.attr('transform', `translate(${rectWidth / 2 + 10}, ${0})`);
let groups = region
.selectAll("g.rect")
.data(words)
.enter()
.append("g")
.attr('class', 'rect')
.attr("transform", (d, i) => {
let x = (i % columnSize) * (rectWidth + 15);
let y = Math.floor(i / columnSize) * (rectHeight + 42);
return `translate(${x}, ${y})`;
});
groups
.append('rect')
.attr('x', -rectWidth / 2)
// .attr('y', -rectHeight / 2)
.attr('rx', 2)
.attr('width', rectWidth)
.attr('height', rectHeight)
.style('stroke', 'hsla(0, 0%, 50%)')
.style('fill', d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', d => {
let curColor = chroma(d.text).hcl();
if (curColor[2] > 0) {
return 'black';
} else {
return 'white';
}
})
.attr('y', rectHeight + 5)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
.text(d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', 'black')
.attr('y', rectHeight + 18)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
// .style('font-style', 'italic')
.text(d => d.color);
}
draw(words);
return svg.node();
}
md`## Generate HCL`
hclList = FileAttachment("hcl.json").json()
randomHCLColors = _.sampleSize(hclList, 48)
randomHCLColors[0].input
getHCL = string => {
let reg = /hcl\(([\d\.]*),\s([\d\.]*),\s([\d\.]*)\)/;
// let string = "hcl(344.69, 22.12, 44.36)";
let results = [];
let matched = string.match(reg);
results.push(Number(matched[1]));
results.push(Number(matched[2]));
results.push(Number(matched[3]));
return results;
}
{
const svg = d3.select(DOM.svg(1300, 860));
let words = randomHCLColors.map(d => ({
text: d.input,
name: d.input,
color: d.target
}));
let rectWidth = 185;
let rectHeight = 30;
let columnSize = 4;
function draw(words) {
let region = svg
.append('g')
.attr('transform', `translate(${rectWidth / 2 + 10}, ${0})`);
let groups = region
.selectAll("g.rect")
.data(words)
.enter()
.append("g")
.attr('class', 'rect')
.attr("transform", (d, i) => {
let x = (i % columnSize) * (rectWidth + 15);
let y = Math.floor(i / columnSize) * (rectHeight + 42);
return `translate(${x}, ${y})`;
});
groups
.append('rect')
.attr('x', -rectWidth / 2)
// .attr('y', -rectHeight / 2)
.attr('rx', 2)
.attr('width', rectWidth)
.attr('height', rectHeight)
.style('stroke', 'hsla(0, 0%, 50%)')
.style('fill', d => {
let color = getHCL(d.text);
let colorC = chroma.hcl(color[0], color[1], color[2]);
console.log(colorC.hex());
return colorC.hex();
});
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', 'black')
.attr('y', rectHeight + 5)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
.text(d => d.text);
groups
.append("text")
.style("font-size", 13)
.style("font-family", "-apple-system, BlinkMacSystemFont")
.style('fill', 'black')
.attr('y', rectHeight + 18)
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
// .style('font-weight', 600)
// .style('font-style', 'italic')
.text(d => d.color);
}
draw(words);
return svg.node();
}
jp = chroma('B0000F')
jp.rgb()
jp.hsl()
jp.hcl()
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.
