Canvas Scatterplot

28:null 29:["$","title",null,{"children":"Canvas setup - random scatter plot | Brianna Wilson | Observable"}] 2e:T6e6,// If you want to run from a .html file // // // // // // Canvas Scatterplot // // // //

// // // // // 2f:[] 2c:{"id":"7527d8a0ff0a548b","slug":null,"title":"Canvas setup - random scatter plot","thumbnail":"df904013ea36fa5c0668eff956b1d26d1fccd02479a8912bb27b60fbb9b456af","access_level":"public","create_time":"$D2023-10-08T23:01:48.723Z","update_time":"$D2025-04-25T00:24:21.065Z","view_time":null,"first_public_time":"$D2023-10-08T23:01:48.723Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/e8378cd926f2998bd803d1651f90f4c1442c923062ce42676a4fc5460cf815fc","tier":"starter_2024"},"version":220,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null}],"members":[{"type":"individual","id":"dc0841074bf3ab25","login":"briannawilson","name":"Brianna Wilson","avatar_url":"https://avatars-next.observableusercontent.com/eee1750230ba4eac2ba9c81f461a7c2cb3c2448d6fd4b00a8f3f13a73e80c37c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"839d21f59c8d2be4","slug":"dvs-workshop","title":"DVS-workshop","owner":{"id":"bdd5b15ae58c174e","login":"bronna","name":"Brianna Wilson"}},"type":"notebook","body":{"title":"Canvas setup - random scatter plot","cells":[{"id":0,"value":"# Canvas setup - random scatter plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"## HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"### 1 - Create the canvas element you'll draw on","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"canvasElement = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"## Javascript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"### 2 - Grab the HTML canvas element","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"canvas = canvasElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"### 3 - Define your visualization's attributes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"value":"numberOfPoints = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"// // optional: make dynamic attributes\n// viewof numberOfPoints = Inputs.range([100, 10000], {label: \"number of points\", step: 10, value: 100})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"sizeOfPoints = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"pointColor = \"white\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"### 4 - Apply the '2D' context to the canvas, then draw your scatterplot!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"{\n // apply the '2D' Canvas context to the canvas element (as opposed to WebGL)\n const ctx = canvas.getContext('2d')\n\n // clear any existing points before drawing new ones\n ctx.clearRect(0, 0, canvas.width, canvas.height)\n\n // use a for loop to draw the dots at random x and y positions\n for (let i = 0; i < numberOfPoints; i++) {\n let x = Math.random() * canvas.width\n let y = Math.random() * canvas.height\n\n ctx.beginPath();\n ctx.arc(x, y, sizeOfPoints / 2, 0, 2 * Math.PI) //x-center, y-center, radius, start angle, end angle\n ctx.fillStyle = pointColor\n ctx.fill()\n ctx.closePath() // close the circle\n }\n\n return canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"