“Any problem in computer science can be solved with another level of misdirection.”
— David Wheeler
viewof v = html`<input type='number' min='0' max='1' value='0.5' step=0.001>`
tbl= html`<table>
<thead>
<tr>
<th>Name</th>
<th>Palette</th>
<th>Color</th>
<th>Code</th>
</tr>
</thead>
<tbody></tbody>
</table>`
palettes = [
'RdBu',
'PuOr',
'Viridis',
'Inferno',
'Turbo',
'Magma',
'Plasma',
'Cividis',
'Warm',
'Cool',
'CubehelixDefault',
'BuPu',
'BuGn',
'GnBu',
'PuBu',
'PuRd',
'RdPu',
'PuBuGn',
'OrRd',
'YlGnBu',
'YlGn',
'YlOrRd',
'YlOrBr'
]
d3 = require('d3');
{
d3.select(tbl)
.selectAll('tbody > tr')
.remove();
const w = 20,
h = 20;
for (const [i, palette] of palettes.entries()) {
var tr = d3
.select(tbl)
.select('tbody')
.append('tr');
var scale = d3[`interpolate${palette}`];
var color = d3.color(scale(v)).formatHex();
var step = 0.05;
var gradient = d3
.range(0, 1 + step / 2, step)
.map(x => scale(x))
.reduce((s, c) => `${s},${c}`, '');
tr.append('td')
.append('span')
.text(palette);
tr.append('td')
.append('div')
.attr(
'style',
`background: linear-gradient(to right${gradient}); width: 100px; height: ${h}px;`
);
tr.append('td')
.append('div')
.attr('style', `background: ${color}; width: ${w}px; height: ${h}px;`);
tr.append('td')
.append('span')
.text(color)
.attr('style', 'font-family:monospace;');
}
}
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.
