Published
Edited
Dec 6, 2020
2 forks
1 star
html`<div id='myDiv'></div>`
{
const N = 1000;
let x, y;
// 1. Pure JavaScript Array of uniform random variables between -.5 and .5
// for (x=[], y=[], i=0; i<N; ++i) {
// x[i] = Math.random() - .5;
// y[i] = Math.random() - .5;
// }
// 2. As above, except Gaussian distribution, mean = 0, standard deviation = 1
var randomNormal = d3.randomNormal(0, 1); // Use D3 for Normal/Gaussian distribution
// for (x=[], y=[], i=0; i<N; ++i) {
// x[i] = randomNormal();
// y[i] = randomNormal();
// }
// 3. As in #2, except concise array notation using D3
x = d3.range(0, N).map(randomNormal);
y = d3.range(0, N).map(randomNormal);
// Layout uses Plotly's default aspect ratio, with Observable's "width"
var layout = {
title: 'Scatterplot demo',
height: 450 * width / 700
};
// Plotly's data model for scatterplots
var data = [{x: x, y: y, mode: 'markers', type: 'scatter'}];
// The call to Plotly.js, using the string "myDiv", which puts the graph in: "<div id='myDiv'></div>
Plotly.newPlot('myDiv', data, layout);
// Return the arrays so we can inspect the data
return [x, y];
}
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.
