Published
Edited
Oct 30, 2019
3 forks
40 stars
imageColors = {
let colors = [];
for (let i = 0; i < data.length; i += 4) {
colors.push(new Color(data[i], data[i + 1], data[i + 2]));
}
return colors;
}
uniqueColors = new Set(imageColors.map(color => color.toString()))
function getColorIndex(color, level) {
let index = 0;
let mask = 0b10000000 >> level;
if (color.red & mask) index |= 0b100;
if (color.green & mask) index |= 0b010;
if (color.blue & mask) index |= 0b001;
return index;
}
class Quantizer {
constructor() {
this.levels = Array.from({ length: MAX_DEPTH }, () => []);
this.root = new Node(0, this);
}
addColor(color) {
this.root.addColor(color, 0, this);
}
makePalette(colorCount) {
let palette = [];
let paletteIndex = 0;
let leafCount = this.leafNodes.length;
for (let level = MAX_DEPTH - 1; level > -1; level -= 1) {
if (this.levels[level]) {
for (let node of this.levels[level]) {
leafCount -= node.removeLeaves();
if (leafCount <= colorCount) break;
}
if (leafCount <= colorCount) break;
this.levels[level] = [];
}
}
for (let node of this.leafNodes) {
if (paletteIndex >= colorCount) break;
if (node.isLeaf) palette.push(node.color);
node.paletteIndex = paletteIndex;
paletteIndex++;
}
return palette;
}
*makePaletteIncremental(colorCount) {
let palette = [];
let paletteIndex = 0;
let leafCount = this.leafNodes.length;
for (let level = MAX_DEPTH - 1; level > -1; level -= 1) {
if (this.levels[level]) {
for (let node of this.levels[level]) {
leafCount -= node.removeLeaves();
if (leafCount <= colorCount) break;
}
if (leafCount <= colorCount) break;
this.levels[level] = [];
}
yield;
}
for (let node of this.leafNodes) {
if (paletteIndex >= colorCount) break;
if (node.isLeaf) palette.push(node.color);
node.paletteIndex = paletteIndex;
paletteIndex++;
}
yield;
return palette;
}
get leafNodes() {
return this.root.leafNodes;
}
addLevelNode(level, node) {
this.levels[level].push(node);
}
getPaletteIndex(color) {
return this.root.getPaletteIndex(color, 0);
}
}
class Node {
constructor(level, parent) {
this._color = new Color(0, 0, 0);
this.pixelCount = 0;
this.paletteIndex = 0;
this.children = [];
this._debugColor;
if (level < MAX_DEPTH - 1) parent.addLevelNode(level, this);
}
get isLeaf() {
return this.pixelCount > 0;
}
get leafNodes() {
let leafNodes = [];
for (let node of this.children) {
if (!node) continue;
if (node.isLeaf) {
leafNodes.push(node);
} else {
leafNodes.push(...node.leafNodes);
}
}
return leafNodes;
}
addColor(color, level, parent) {
if (level >= MAX_DEPTH) {
this._color.add(color);
this.pixelCount++;
return;
}
let index = getColorIndex(color, level);
if (!this.children[index]) {
this.children[index] = new Node(level, parent);
}
this.children[index].addColor(color, level + 1, parent);
}
getPaletteIndex(color, level) {
if (this.isLeaf) {
return this.paletteIndex;
}
let index = getColorIndex(color, level);
if (this.children[index]) {
return this.children[index].getPaletteIndex(color, level + 1);
} else {
for (let node of this.children) {
return node.getPaletteIndex(color, level + 1);
}
}
}
removeLeaves() {
let result = 0;
for (let node of this.children) {
if (!node) continue;
this._color.add(node._color);
this.pixelCount += node.pixelCount;
result++;
}
this.children = [];
return result - 1;
}
get debugColor() {
if (this._debugColor) return this._debugColor;
if (this.isLeaf) return this.color;
let c = new Color();
let count = 0;
function traverse(node) {
for (let child of node.children) {
if (child.isLeaf) {
c.add(child._color);
count++;
} else {
traverse(child);
}
}
}
traverse(this);
return c.normalized(count);
}
get color() {
return this._color.normalized(this.pixelCount);
}
}
class Color {
constructor(red = 0, green = 0, blue = 0) {
this.red = red;
this.green = green;
this.blue = blue;
}
clone() {
return new Color(this.red, this.green, this.blue);
}
// We use this to shuttle the color into a canvas element.
// The final element, a RGB sum, is used to do a rough color sort.
get array() {
return [this.red, this.green, this.blue, this.red + this.green + this.blue];
}
// Fast, easily reversible stringification. Used
// to create the initial list of unique colors.
toString() {
return [this.red, this.green, this.blue].join(",");
}
toCSS() {
return `rgb(${[this.red, this.green, this.blue]
.map(n => Math.floor(n))
.join(",")})`;
}
normalized(pixelCount) {
return new Color(
this.red / pixelCount,
this.green / pixelCount,
this.blue / pixelCount
);
}
add(color) {
this.red += color.red;
this.green += color.green;
this.blue += color.blue;
}
}
html`<style>
path.link { fill: transparent; stroke: #ccc; stroke-width: 1; }
</style>`
/**
Stash
// getNodesPixelCount() {
// let sum_count = this.pixelCount;
// for (let node of this.children) {
// if (node) {
// sum_count += node.pixelCount;
// }
// }
// return sum_count;
// }
*/
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.