2d:null 2e:["$","title",null,{"children":"Hello, Plot.ly!-- Create an array that counts # of earthquakes for range of values | mbschissell | Observable"}] 33:T468,{ const N = 1000; let x, y; // 1. Pure JavaScript Array of uniform random variables between -.5 and .5 // for (x=[], y=[], i=0; i Plotly.newPlot('myDiv', data, layout); // Return the arrays so we can inspect the data return [x, y]; }34:T442,md`## 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') `35:[] 31:{"id":"77aca382de7b9036","slug":"hello-plot-ly","title":"Hello, Plot.ly!-- Create an array that counts # of earthquakes for range of values","thumbnail":"0e5162b73f28fea5fdf1e1ae3a92ca2f5b0a95f7a52562d39b2059e6b975a411","access_level":"public","create_time":"$D2019-05-10T00:32:12.362Z","update_time":"$D2019-05-10T00:43:01.110Z","view_time":null,"first_public_time":"$D2019-05-10T00:37:21.672Z","has_unpublished_edits":null,"fork":{"id":"4ba9f1ffbe23fbbb","slug":"the-javascript-version","title":"Hello, Plotly.js!","owner":{"id":"f49bbe5451a36df9","login":"pbogden","name":"pbogden"}},"stars":0,"starred":false,"owner":{"type":"team","id":"801c2f61e7096b3e","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":"starter_2024","bio":""},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"bio":""}],"members":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello, Plot.ly!-- Create an array that counts # of earthquakes for range of values","cells":[{"id":8,"value":"md`# Hello, Plot.ly!-- Create an array that counts # of earthquakes for range of values\n\nAdapted from the [Plot.ly scatterplot demo in Python](https://plot.ly/python/line-and-scatter/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"quakes = {\n let response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson');\n let json = await response.json();\n return json;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"f = quakes.features.map(d => d.properties.mag)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"d3.range(10).map(d => f.filter(m => d <= m && (m < (d+1)) ).length ) //create an array of 10 events and show values of f if mag is >= d or >= d+1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"y = x.map(d => f.filter(m => (d <= m) && (m < (d+1)) ).length )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"x = d3.range(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"{\n var data = [\n {\n x: x,\n y: y,\n type: 'bar'\n }\n];\n\nPlotly.newPlot('myDiv', data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"