Public
Edited
Oct 27, 2022
1 star
Insert cell
Insert cell
Plot.plot({
inset: 12,
height: 1152,
width: 1152,
color: {
scheme: "viridis",
label: "Angle",
zero: true,
legend: true
},
marks: [
Plot.vector(samples, {
length: ([x, y]) => ((x + 2, y) + 0.5) * 24,
rotate: ([x, y]) => (x, y) * 360,
stroke: ([x, y]) => (x, y) * 360
})
]
})
Insert cell
samples = Array(10000)
.fill(0)
.map((d, i) => {
const angle = i * Math.random();
return [Math.cos(angle * Math.random()), Math.sin(angle * Math.random())];
})
Insert cell
x0 = tf.tensor1d([1, 2])
Insert cell
{
const canvas = htl.html`<canvas/>`;

const rotatedTensor = tf.tidy(() => {
const batchRotatedTensors = tf.image.rotateWithOffset(
batchHummingTensorRgb.div(255),
-0.7
);
return tf.squeeze(batchRotatedTensors);
});
tf.browser.toPixels(rotatedTensor, canvas).then(() => {
rotatedTensor.dispose();
});

return canvas;
}
Insert cell
batchHummingTensorRgb[(0, 1)]
Insert cell
batchHummingTensorRgb = tf.expandDims(hummingTensorRgb)
Insert cell
{
const width = 400;
const height = 400;
const canvas = htl.html`<canvas width="${width}" height="${height}"></canvas>`;

tf.browser.toPixels(
hummingTensorGrayscale - tf.browser.fromPixels(hummingImg, 2),
canvas
);

return canvas;
}
Insert cell
hummingTensorGrayscale = tf.browser.fromPixels(hummingImg, 1)
Insert cell
hummingTensorRgb = tf.browser.fromPixels(hummingImg)
Insert cell
hummingImg = new Promise((resolve, reject) => {
const width = 400;
const height = 300;
const img = htl.html`<img width=${width} height=${height} />`;
img.src = hummingUrl;
img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
})
Insert cell
hummingUrl = "https://static.observableusercontent.com/files/fcd5bd8043494f7dac50ef6a679cb833c95fc2086e6281c8c3795546fc07d46235923b379c765122ca1e89348078a5a930e3e4f949eb32e787932e473b5239c4"
Insert cell
tf = require("@tensorflow/tfjs")
Insert cell
import { DuckDBClient } from "@cmudig/duckdb"
Insert cell

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.
Learn more