Dr. Tanner is a research professor at the University of Tennessee working towards making data science accessible using AI tools.
colormaps = {
const parser = new DOMParser();
const $document = parser.parseFromString(FILE, 'text/xml');
const $colormaps = $document.querySelectorAll('colormap');
const colormaps = [];
for (const $colormap of $colormaps) {
const $name = $colormap.querySelector('name');
const $points = $colormap.querySelector('points');
const $colors = $colormap.querySelector('rgb_points');
const $range = $colormap.querySelector('range');
const name = $name.textContent;
const points = GROUPER(NUMBERS($points.textContent), 4).map(([x, a, ..._]) => ({ x, a }));
const colors = GROUPER(NUMBERS($colors.textContent), 4).map(([x, r, g, b]) => ({ x, r, g, b }));
const [lo, hi] = NUMBERS($range.textContent);
const range = { lo, hi };
const colormap = { name, points, colors, range };
colormaps.push(colormap);
}
return colormaps;
function NUMBERS(text) {
const re = /[ \t\n,]+/g;
text = text.replaceAll(re, ',');
return text.split(',').filter((d) => d !== '').map((d) => Number.parseFloat(d));
}
function GROUPER(values, k) {
const groups = [];
for (let i=0, n=values.length; i<n; i+=k) {
const group = values.slice(i, i+k);
groups.push(group);
}
return groups;
}
}
htl.html`
<dl>
${colormaps.map(({ name, colors }) => htl.html.fragment`
<dt>Colormap "${name}"
<dd>
${colors.map(({ r, g, b }) => htl.html.fragment`
<span style=${{
backgroundColor: `rgb(${255*r}, ${255*g}, ${255*b})`,
width: '2em',
height: '2em',
display: 'inline-block',
outline: '1px solid black',
outlineOffset: '2px',
margin: '10px',
}}>
`/* htl.html.fragment */)}
`/* htl.html.fragment */)}
`/* htl.html */;
embed({
datasets: {
r: colormaps[0].colors.map(({ x, r: y }, i, { length: n }) => ({ x, y })),
g: colormaps[0].colors.map(({ x, g: y }, i, { length: n }) => ({ x, y })),
b: colormaps[0].colors.map(({ x, b: y }, i, { length: n }) => ({ x, y })),
a: colormaps[0].points.map(({ x, a: y }, i, { length: n }) => ({ x, y })),
},
layer: ['r', 'g', 'b', 'a', 'x'].map((name) => ({
title: `Colormap "${colormaps[0].name}"`,
data: {
name,
},
mark: {
type: 'line',
stroke: { r: 'red', g: 'green', b: 'blue', a: 'black' }[name],
point: {
shape: 'diamond',
},
},
encoding: {
x: { field: 'x', type: 'quantitative', scale: { domainMin: 0, domainMax: 0.5 } },
y: { field: 'y', type: 'quantitative', scale: { domainMin: 0, domainMax: 1.0 } },
},
})),
})
embed = require("vega-embed@6")
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.
