Published
Edited
Oct 27, 2020
2 stars
col1 = 'coral'
col2 = 'aquamarine'
minCol = '#eee'
nSteps = 4
blendMode = 'multiply'; // 'multiply', 'darken', 'lighten', 'screen', 'overlay', 'burn', 'dodge'
drawScale = {
// bivariate color settings
let scaleSettings = { col1, col2, minCol, nSteps, blendMode }
// Build the color scale
let bvScale = new BivariateColorscale(scaleSettings);
//let colors = bvScale.getScale();
let nScaleSteps = bvScale.getNumSteps();
console.log(nScaleSteps);
// Draw the scale (for demo purposes)
let w = 200;
let h = 200;
let svg = d3.select('#scale')
.html('')
.append('svg')
.attr('width', w)
.attr('height', h);
let rectMargin = 2;
let rectHeight = (h / nScaleSteps) - rectMargin;
let rectWidth = (w / nScaleSteps) - rectMargin;
// loop over each step in the scale, add rectangle at each
for (let i = 0; i < nScaleSteps; i++) {
for (let j = 0; j < nScaleSteps; j++) {
svg.append('rect')
.attr('x', i * (rectWidth + rectMargin))
.attr('y', j * (rectHeight + rectMargin))
.attr('width', rectWidth)
.attr('height', rectHeight)
.attr('fill', bvScale.getColorAtIdx(i,j));
}
}
}
_ = require('lodash');
chroma = require('chroma-js');
d3 = require("d3-selection", "d3-selection-multi")
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.
