Published
Edited
Dec 3, 2020
md`# Color Demo`
colors = {
let colorArray = [];
let seedColor = d3.hsl(
Math.random() * 60 + 300,
traditionSlider,
(traditionSlider + extravaganceSlider) / 2
);
let seedComplement1 = seedColor.copy();
seedComplement1.h += 120 % 360;
let seedComplement2 = seedColor.copy();
seedComplement2.h += 240 % 360;
seedComplement2.l = extravaganceSlider;
colorArray.push(seedColor);
colorArray.push(seedComplement1);
colorArray.push(seedComplement2);
return colorArray;
}
{
let svg = d3
.create('svg')
.attr("width", width)
.attr('height', height)
.attr('id', 'mainViz');
let bg = svg
.selectAll('.palettes')
.data(colors)
.enter()
.append('rect')
.attr("width", width / colorCount)
.attr('height', height)
.attr('fill', d => d)
.attr('x', (d, i) => (i * width) / colorCount)
.attr('class', 'palettes');
return svg.node();
}
genColor
aScale = d3
.scaleLinear()
.domain([0, .5, .75, 1])
.range([0, .1, .2, .3, 1])
colorScale = d3
.scaleLinear()
.domain([0, .25, .5, .75, 1])
.range([
d3.color('blue'),
d3.color('pink'),
d3.color('yellow'),
d3.color('blue'),
d3.color('purple')
])
d3.interpolateViridis(.5)
colorScale(.432)
function genColor(a, e, t) {
let hue = (0 + a * 25 + e * 80 + t * 9) % 360;
let sat = e * .6 + a * a * a;
let bri = aScale(a) + 1 - (a + e) * t * t;
return d3.hsl(hue, sat, bri);
}
function transformColor(color, a,e,t){
}
genColor(accessiblitySlider, extravaganceSlider, traditionSlider)
{
for (let i = 0; i < colors.length; i++) {
let tempColor = d3.rgb(colors[i]).copy();
if (tempColor.r > accessiblitySlider) {
tempColor.r += 100;
} else {
tempColor.r -= 100;
}
colors[i] = tempColor;
}
updateColors();
}
// updateColors()
updateColors = function() {
d3.select('#mainViz')
.selectAll('.palettes')
.data(colors)
.transition()
.duration(2000)
.attr('fill', d => d);
}
d3 = require("d3@5")
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.
