Hello, Plot.ly! Adapted from the Plot.ly scatterplot demo in Python
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 Plot.ly'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]; }
In Python... Python won't run in your browser (or your Observable notebook). The Python demo runs on Plot.ly because their site runs the Python for you on their servers. You could run the Python yourself by installing Jupyter notebook. Either way, the scatterplot make its way to your browser, which only knows JavaScript. And once there, Plot.ly uses D3.js. The differences between the JavaScript and Python versions are small. When it comes to generating random numbers and manipulating arrays of data, D3.js provides functionality similar to Python's numpy. Plot.ly APIs differ for each language. For comparison, here's the Python version: import plotly.plotly as py import plotly.graph_objs as go # Create random data with numpy import numpy as np N = 1000 random_x = np.random.randn(N) random_y = np.random.randn(N) # Create a trace trace = go.Scatter( x = random_x, y = random_y, mode = 'markers' ) data = [trace] # Plot and embed in ipython notebook! py.iplot(data, filename='basic-scatter')
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
d3 = require("d3")