Published
Edited
May 8, 2020
1 fork
Importers
1 star
{
const data = [
{ index: 0, value: 50 },
{ index: 1, value: 100 },
{ index: 2, value: 150 }
];
return render('barchart', data);
}
{
const rows = 5;
const cols = 5;
const values = [];
for (let i = 0; i < rows; i++) {
const row = [];
for (let j = 0; j < cols; j++) {
row.push(Math.round(Math.random() * 50));
}
values.push(row);
}
const data = { values };
return render('confusionMatrix', data);
}
{
const cols = 50;
const rows = 20;
const values = [];
for (let i = 0; i < cols; i++) {
const col = [];
for (let j = 0; j < rows; j++) {
col.push(i * j);
}
values.push(col);
}
const data = { values };
return render('heatmap', data);
}
{
const data = Array(100)
.fill(0)
.map(x => Math.random() * 100 - Math.random() * 50);
// Push some special values for the stats table.
data.push(Infinity);
data.push(NaN);
data.push(0);
return render('histogram', data);
}
{
const series1 = Array(100)
.fill(0)
.map(y => Math.random() * 100 - Math.random() * 50)
.map((y, x) => ({ x, y }));
const series2 = Array(100)
.fill(0)
.map(y => Math.random() * 100 - Math.random() * 150)
.map((y, x) => ({ x, y }));
const series = ['First', 'Second'];
const data = { values: [series1, series2], series };
return render('linechart', data);
}
{
const series1 = Array(100)
.fill(0)
.map(y => Math.random() * 100 - Math.random() * 50)
.map((y, x) => ({ x, y }));
const series2 = Array(100)
.fill(0)
.map(y => Math.random() * 100 - Math.random() * 150)
.map((y, x) => ({ x, y }));
const series = ['First', 'Second'];
const data = { values: [series1, series2], series };
return render('scatterplot', data);
}
{
const headers = ['Col 1', 'Col 2', 'Col 3'];
const values = [[1, 2, 3], ['4', '5', '6'], ['7', true, false]];
const surface = { name: 'Table', tab: 'Charts' };
return render('table', { headers, values }, { height: 150 });
}
{
const model = tf.sequential({
layers: [
tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),
tf.layers.dense({ units: 10, activation: 'softmax' })
]
});
return showLayer(model.getLayer(undefined, 1));
}
{
const model = tf.sequential({
layers: [
tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),
tf.layers.dense({ units: 10, activation: 'softmax' })
]
});
return showModelSummary(model);
}
{
const tensor = tf.tensor1d([0, 0, 0, 0, 2, 3, 4]);
return showValuesDistribution(tensor);
}
history = {
const model = tf.sequential({
layers: [
tf.layers.dense({ inputShape: [784], units: 32, activation: 'relu' }),
tf.layers.dense({ units: 10, activation: 'softmax' })
]
});
model.compile({
optimizer: 'sgd',
loss: 'categoricalCrossentropy',
metrics: ['accuracy']
});
const data = tf.randomNormal([100, 784]);
const labels = tf.randomUniform([100, 10]);
// Train for 5 epochs with batch size of 32.
const history = await model.fit(data, labels, {
epochs: 5,
batchSize: 32
});
return history;
}
showHistory(history, ['loss', 'acc'], { height: 200 })
render = async (chartType, data, options) => {
const defaultOptions = {
width: 880,
height: 400
};
if (!tfvis.render.hasOwnProperty(chartType)) {
throw new Error(`Invalid chart type: ${chartType}`);
}
options = { ...defaultOptions, ...options };
const elem = html`<div></div>`;
elem.style.height = `${options.height}px`;
await tfvis.render[chartType](elem, data, options);
return elem;
}
showLayer = async layer => {
const elem = html`<div></div>`;
tfvis.show.layer(elem, layer);
return elem;
}
showModelSummary = async model => {
const elem = html`<div></div>`;
tfvis.show.modelSummary(elem, model);
return elem;
}
showValuesDistribution = async tensor => {
const elem = html`<div></div>`;
tfvis.show.valuesDistribution(elem, tensor);
return elem;
}
showHistory = async (history, metrics, options) => {
const defaultOptions = {
width: 880,
height: 400
};
options = { ...defaultOptions, ...options };
const elem = html`<div></div>`;
await tfvis.show.history(elem, history, metrics, options);
return elem;
}
tf = require('@tensorflow/tfjs@1.7')
tfvis = require('https://bundle.run/@tensorflow/tfjs-vis@latest')
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.
