Public
Edited
May 9, 2023
generate(33)
function generate(n) {
let rows = html``;
for (const shade of ["blue", "red", "yellow"]) {
for (let i = 0; i < n; i++) {
const c = generateColor(shade);
const row = html`
<div>
rgb(${c.join(", ")})
<span style="display: inline-block; background-color: rgb(${c.join(", ")})">${shade}</span>
</div>`
rows = html`${rows}${row}`;
}
}
return rows;
}
function generateColor(shade) {
const randomValue = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
let red, green, blue;
switch (shade.toLowerCase()) {
case "blue":
red = randomValue(0, 150);
green = randomValue(0, 150);
blue = randomValue(200, 255);
break;
case "red":
red = randomValue(200, 255);
green = randomValue(0, 150);
blue = randomValue(0, 150);
break;
case "yellow":
red = randomValue(200, 255);
green = randomValue(200, 255);
blue = randomValue(0, 150);
break;
default:
throw new Error("Invalid shade specified. Please provide 'blue', 'red', or 'yellow'.");
}
return [red, green, blue];
}
function generateJSON(n) {
const rows = [];
const onehot = shade =>
shade === "blue"
? [1, 0, 0]
: shade === "red"
? [0, 1, 0]
: [0, 0, 1];
for (const shade of ["blue", "red", "yellow"]) {
for (let i = 0; i < n; i++) {
const c = generateColor(shade);
rows.push([c, onehot(shade)]);
}
}
return JSON.stringify(rows);
}
generateJSON(2000)
{
const ixp = 0;
const xs = [-1272.3535608944271, -487.61920540755017, -1016.3440854455009];
const xp = xs[ixp];
const xsv = xs.map(x => x);
const D = -Math.max(...xsv);
const exps = xs.map(x => Math.exp(x + D));
const sum = exps.reduce((acc, e) => acc + e, 0);
const quot = Math.exp(xp + D) / sum;
const sce = -Math.log(quot);
return { D, exps, num: Math.exp(xp + D), sum, quot, sce };
}
xs = [-1272.3535608944271, -487.61920540755017, -1016.3440854455009]
{
const r = [];
const max = Math.max(...xs);
for (const x of xs) {
r.push([x, max, x-max, Math.exp(x-max)]);
}
return r;
}
Math.exp(-1759.9727663019773)
failures = FileAttachment("failures@2.json").json()
failures[0]
function isDark(rgb) {
const [r, g, b] = rgb;
const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness < 128;
}
function generateFailures(actualColorFilter) {
let rows = html`
<div class="failure title">
<h2>Actual: <em>${actualColorFilter}</em></h2>
</div>
<div class="failure header">
<div class="rgb">RGB values</div>
<div class="color-sample">Predicted</div>
<div class="color-sample">Actual</div>
<div class="prob">P<sub>white</sub></div>
<div class="prob">P<sub>green</sub></div>
<div class="prob">P<sub>yellow</sub></div>
</div>`;
for (const { X, predicted_color, actual_color, probabilities } of failures) {
if (actualColorFilter && actual_color !== actualColorFilter) {
continue;
}
const [probW, probG, probY] = probabilities;
const rgb = X.map(x => x * 255);
const row = html`
<div class="failure">
<div class="rgb">${X.map(v => v.toFixed(3)).join(", ")}</div>
<div class="color-sample" style="background-color: rgb(${rgb.join(", ")}); color: ${isDark(rgb) ? "white" : "black"}">${predicted_color}</div>
<div class="color-sample" style="background-color: rgb(${rgb.join(", ")}); color: ${isDark(rgb) ? "white" : "black"}">${actual_color}</div>
<div class="prob">${probW.toFixed(3)}</div>
<div class="prob">${probG.toFixed(3)}</div>
<div class="prob">${probY.toFixed(3)}</div>
</div>`
rows = html`${rows}${row}`;
}
return rows;
}
generateFailures("white")
generateFailures("yellow")
generateFailures("green")
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.
