32:T487,map = { //A basic D3 map requires creating a new "svg" element and defining a window in which to draw the map const svg = d3.create("svg") .attr("width", width + 100) .attr("height", height); // this block will display the states svg .append("g") //add a G element, which is basiscally a group that holds elements .selectAll("path") //tells d3 to select path elements to modify .data(states) //defines the data we'll use to show .enter() //joins the data above to DOM elements .append("path") //for each data element, add a path .attr("d", path) //defines coordinates .attr("fill","lightgray") .attr("fill-opacity",0.5) .attr("stroke", "gray") .attr("stroke-opacity",0.3) .attr("stroke-width",0.75) //if we want to add counties, we can duplicate our code above and *only* change the data and styling svg .append("g") .selectAll("path") .data(counties) .enter() .append("path") .attr("d", path) .attr("fill", "none") .attr("fill-opacity",0.3) .attr("stroke", "gray") .attr("stroke-opacity",0.2) .attr("stroke-width",0.4); return svg.node(); }33:[{"id":"21672134d41ea53c8c902b3b9733423a2664f1183b69d31e0b50b193a6e6a7f03e8a8290bed9d70eb23938da6e299259fc39bff83288db3410df0c0b22b16ad0","href":"https://static.observableusercontent.com/files/21672134d41ea53c8c902b3b9733423a2664f1183b69d31e0b50b193a6e6a7f03e8a8290bed9d70eb23938da6e299259fc39bff83288db3410df0c0b22b16ad0","name":"counties_water.json","type":"application/json","lastModified":1665452091533.057,"size":9344015},{"id":"02a3e5f3a020d547b8ff37adfd5e97a3b87c6fece21c513b83e75b5fa6d9770bec1ff741b5ece9be12edd66aec5f0c87d7b7f86a900b58dac906dd4d3d0780e8","href":"https://static.observableusercontent.com/files/02a3e5f3a020d547b8ff37adfd5e97a3b87c6fece21c513b83e75b5fa6d9770bec1ff741b5ece9be12edd66aec5f0c87d7b7f86a900b58dac906dd4d3d0780e8","name":"download-export.png","type":"image/png","lastModified":1666130624659.611,"size":198859},{"id":"b529080459a9274db884af06495d417836955b3d4d944f9d0c13483237f515e8929ce996ed453cebfc05f5c484affc2dc76bc9aa5c093724ae7fda58ae753db0","href":"https://static.observableusercontent.com/files/b529080459a9274db884af06495d417836955b3d4d944f9d0c13483237f515e8929ce996ed453cebfc05f5c484affc2dc76bc9aa5c093724ae7fda58ae753db0","name":"Screen Shot 2022-10-17 at 9.19.19 PM.png","type":"image/png","lastModified":1666055981584.084,"size":2594056},{"id":"30995c63db1c6bd65027cefa2bfba12cdfad8ab9d8eca62c168deeaab4c637741e8f4f6668606a7a880df87fa1c6b06ca0ccb96b8e59e95a5f62b8afc9d096c0","href":"https://static.observableusercontent.com/files/30995c63db1c6bd65027cefa2bfba12cdfad8ab9d8eca62c168deeaab4c637741e8f4f6668606a7a880df87fa1c6b06ca0ccb96b8e59e95a5f62b8afc9d096c0","name":"Screen Shot 2022-10-17 at 9.25.01 PM.png","type":"image/png","lastModified":1666056327220.289,"size":303698},{"id":"5af06ea934ce55d68e85c889336735e88be004360803c82b7a436697c59fea4cc20753b25853f7adf70345ac1cde266d60fa7a743b8a92dfb5d844ebdf6abf9d","href":"https://static.observableusercontent.com/files/5af06ea934ce55d68e85c889336735e88be004360803c82b7a436697c59fea4cc20753b25853f7adf70345ac1cde266d60fa7a743b8a92dfb5d844ebdf6abf9d","name":"output-topo20.json","type":"application/json","lastModified":1664764062266.654,"size":1917569},{"id":"fd5440f78941af402e82fd1637ad0ed47a9f95f3dd297c1306f3c92a29289b4bfbad00c8e2705389b3f5826a2240af5fd70c92cf26364b6c91ed4e8f5fb72f79","href":"https://static.observableusercontent.com/files/fd5440f78941af402e82fd1637ad0ed47a9f95f3dd297c1306f3c92a29289b4bfbad00c8e2705389b3f5826a2240af5fd70c92cf26364b6c91ed4e8f5fb72f79","name":"dnr_hydro_features_lakes_acres_100_plus_unprojected.json","type":"application/json","lastModified":1665695042957.821,"size":6532916}] 30:{"title":"Collaborative Mapmaking with Observable in JavaScript","cells":[{"id":0,"value":"# Collaborative Mapmaking with Observable in JavaScript\n\n#### [_Zach Levitt_](https://twitter.com/zachwlevitt) and [_Adrián Blanco Ramos_](https://twitter.com/AdrianBlancoR)\n**[NACIS 2022](https://nacis.org/annual-meeting/current-meeting/) Practical Cartography Day**, October 19, 2022, Minneapolis, MN\n\n\n# 🗺️ [bit.ly/3gfRXzW](https://bit.ly/3gfRXzW)\n_(^Link to this presentation)_","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"In this practical session, you will learn the basics on how to use Observable, JavaScript, d3.js and svg to create beautiful maps programatically. You can see some examples of work we have created using Observable below:","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"

\n ${fastestGrowingRace}\n

\n\n

\n ${campaignEventsMap}\n

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":449,"value":"## _What_ is Observable?\n\nObservable is a JavaScript-based data visualization platform that allows you to create notebooks, collaborate, mess around with data and export your results. The notebooks are built on **JavaScript**, which is the primary coding language on most websites, but there are [**key differences**](https://observablehq.com/@observablehq/observables-not-javascript).\n\nDISCLAIMER: Knowledge of JavaScript is helpful for using Observable, but it is easy to copy and paste existing code and customize for your use case. We will provide a lot of accessible code here that you can use for your projects. ","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"## _Why_ should I make maps in Observable?\n\nObservable provides a collaborative platform for building interactive and responsive maps with JavaScript. Observable notebooks are useful for sharing and duplicating code, preparing a template for incoming data, testing out interactive maps at different page widths, or projects that require internal storage and sharing on the web. You can also embed maps in web pages, export PNGs, SVGs and data itself for a drawing application, other data visualization tool, or for sharing.","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"## _How_ do I make maps in Observable?\n\nThis talk will discuss how to make maps with D3, a popular data visualization library that provides functionality for building maps. We will discuss several steps for building maps:\n\n- [**Importing data**](https://observablehq.com/d/46e0f9c774f94128#cell-163)\n- [**Projections and paths**](https://observablehq.com/d/46e0f9c774f94128#cell-12)\n- [**Styling**](https://observablehq.com/d/46e0f9c774f94128#cell-523)\n- [**Data manipulation**](https://observablehq.com/d/46e0f9c774f94128#cell-564)\n- [**Thematic mapping techniques**](https://observablehq.com/d/46e0f9c774f94128#cell-789)\n- [**Exporting**](https://observablehq.com/d/46e0f9c774f94128#cell-27)","pinned":false,"hidden":false,"mode":"md"},{"id":738,"value":"{\n let height = 33;\n const context = DOM.context2d(width, height);\n let frame;\n\n function getRandomInt(max) {\n return Math.floor(Math.random() * max);\n }\n \n let radius = height / 2 - 5;\n let prev = 0;\n \n (function tick() {\n const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;\n context.clearRect(0, 0, width, height);\n context.beginPath();\n context.arc(x, height / 2, radius, 0, 2 * Math.PI);\n if (x < radius + 0.25){\n context.fillStyle = [`rgba(${getRandomInt(255)},${getRandomInt(255)},${getRandomInt(255)}`];\n }\n \n context.fill();\n frame = requestAnimationFrame(tick);\n })();\n \n invalidation.then(() => cancelAnimationFrame(frame)); \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"## Importing data\n\nTo create maps in Observable, we will mainly use **geojson** and **topojson** files. It is relatively straightforward to convert other geospatial formats like shapefiles into json files using QGIS, [mapshaper](https://mapshaper.org/) and other tools. \n\nGeoJSON and TopoJSON are native JavaScript data formats that are well-suited to manipulation using vanilla JS and libraries like D3. JSON formats are built on structured collections of features that have **properties** and **geometry** attributes.\n\nWhile it is _possible_ to import many data formats into Observable, because Observable is a JavaScript notebook tool, it is easiest to use JSON inputs such as GeoJSON or TopoJSON. As of October 2022, Observable has a file size limitation of 50mb. Tools like mapshaper are immensely helpful for simplifying and filtering files.\n\nHere is a helpful [page](https://observablehq.com/@ambassadors/geographical-features-imports) for more information on importing geographic data in Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"TopoJSON is helpful for nesting data within one file. Here, we have a **statestl20** objects within the file **us** that we can expand into a variable called **states**","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"us = FileAttachment(\"output-topo20.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"states = topojson.feature(us, us.objects.statestl20).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"counties_water = FileAttachment(\"counties_water.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"counties = topojson.feature(counties_water, counties_water.objects.counties).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"## Projections and paths","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"**Projections** in D3 are defined by telling D3 which geographic transformation you will use, associated with the size of the window and the scale of your map. Projections are then fed into a **path** function that you will use to tell D3 and SVG where to draw your points, lines and polygons.","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"A projection definition requires several pieces of information, including projection type, width and height of your canvas, and other customizations. For more information on d3 projections, go [here](https://github.com/d3/d3-geo). Here are many examples of state projections from Noah Veltman: https://github.com/veltman/d3-stateplane.","pinned":false,"hidden":false,"mode":"md"},{"id":710,"value":"//define aspect ratio for your shape\naspectRatioUSA = 0.7\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"//Observable provides a built-in width variable that you can use to set your canvas width \nheight = width * aspectRatioUSA","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"projection = d3\n .geoAlbers() //use Albers as a base projection type\n .fitSize([width, height], us) //fit the size of the map to a predefined width and height of the window, and to our us file\n .scale(1280) //zoom of map\n .translate([480, 300]) //shift map in window","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"### Path","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"//the path variable will be used to tell D3 how to manipulate your input data\npath = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"## Styling","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"## Data manipulation","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"counties.map(county => {\n county.properties.water_sq_mile = county.properties.AWATER/2590000 //convert to square miles\n county.properties.land_sq_mile = county.properties.ALAND/2590000 //convert to square miles\n return county\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"county_select = counties.filter(d => d.properties.STATEFP == 27)","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"county_select_geo = {\n const obj = {}\n obj['type'] = \"FeatureCollection\";\n obj['features'] = county_select;\n return obj\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"Here, we can change the projection to match our extent","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"projection_mn = d3.geoConicConformal()\n .parallels([45 + 37 / 60, 47 + 3 / 60])\n .rotate([94 + 15 / 60, 0])\n .fitSize([widthMN, heightMN], county_select_geo);\n //.fitSize([width, height-50], county_select_geo);","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"path_state = d3.geoPath(projection_mn)","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"map_state = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", widthMN)\n .attr(\"height\", heightMN);\n \n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(county_select)\n .enter()\n .append(\"path\")\n .attr(\"fill\", \"lightgray\")\n .attr(\"fill-opacity\",0.3)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\",0.2)\n .attr(\"stroke-width\",0.4)\n .attr(\"d\", path_state);\n\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"## Thematic mapping techniques","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"lakes = FileAttachment(\"dnr_hydro_features_lakes_acres_100_plus_unprojected.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"lakesGeo = topojson.feature(lakes, lakes.objects[\"dnr_hydro_features_all\"]).features","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"aspectRatioMN = 1.15","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"widthMN = width > 500 ? 500 : width","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"heightMN = widthMN * aspectRatioMN","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"### Minnesota lakes bigger than 100 acres\n\nFirst of all, and as we would do in a software like QGIS, let's visualize a base map with all Minnesota lakes.\n\nSource: [DNR Hydrography Dataset](https://gisdata.mn.gov/dataset/water-dnr-hydrography)","pinned":false,"hidden":false,"mode":"md"},{"id":384,"value":"map_lakes_100 = {\n const svg = d3.create(\"svg\").attr(\"width\", widthMN)\n .attr(\"height\", heightMN);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(lakesGeo)\n .enter()\n .append(\"path\")\n //color\n .attr(\"fill\", \"blue\")\n .attr(\"fill-opacity\",0.7)\n .attr(\"stroke\", \"none\")\n .attr(\"d\", path_state);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":818,"value":"## CHOROPLETH","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"color = d3.scaleLinear()\n .domain([1,100])\n .range(['#f1eef6','#d0d1e6','#a6bddb','#74a9cf','#2b8cbe','#045a8d'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"map_lakes = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", widthMN)\n .attr(\"height\", heightMN);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(county_select) //source: social explorer county dataset\n .enter()\n .append(\"path\")\n //color\n .attr(\"fill\",d=>color(d.properties.water_sq_mile))\n .attr(\"fill-opacity\",1)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\",1)\n .attr(\"stroke-width\",0.2)\n .attr(\"d\", path_state);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"## PROPORTIONAL SYMBOLS","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"propSymbols = d3.scaleLinear().domain([5,200]).range([3,10])","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"map_lakes_circles = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", widthMN)\n .attr(\"height\", heightMN);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(county_select)\n .enter()\n .append(\"path\")\n .attr(\"fill\",\"white\")\n .attr(\"fill-opacity\",1)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\",1)\n .attr(\"stroke-width\",0.2)\n .attr(\"d\", path_state);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(county_select)\n .enter()\n .append(\"circle\") //APPEND CIRCLE†\n .attr(\"cx\",d=> path_state.centroid(d)[0])\n .attr(\"cy\",d=> path_state.centroid(d)[1])\n .attr(\"r\",d=> propSymbols(d.properties.water_sq_mile))\n .attr(\"fill\",\"black\")\n .attr(\"fill-opacity\",0.25)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\",1)\n .attr(\"stroke-width\",0.2)\n .attr(\"d\", path_state);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"## FORCE DOTS","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"dotRadius = 3;","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"outputPointData = {\n let pointData = [];\n county_select_geo.features.forEach(d => {\n let sq_miles = d.properties.water_sq_mile\n for (let i = 0, len = sq_miles/50; i < len; i++) {\n let obj = {}\n obj['TOTAL_SQ_MILES'] = sq_miles;\n obj['COUNTY'] = d.properties.NAME\n obj['CENTROID'] = path_state.centroid(d)\n pointData.push(obj)\n }\n \n })\n return pointData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"applySimulation = nodes => {\n const simulation = d3\n .forceSimulation(nodes)\n .force(\n \"x\",\n d3\n .forceX()\n .x(d => {\n //let centroid = ;\n return d.CENTROID[0];//centroid[0]\n })\n .strength(0.5)\n )\n .force(\n \"y\",\n d3\n .forceY()\n .y(d => {\n //let centroid = path.centroid(d);\n return d.CENTROID[1];//centroid[1]\n })\n .strength(0.5)\n )\n .force(\n \"collide\",\n d3\n .forceCollide()\n .radius(d => dotRadius + 1) \n .strength(0.5)\n )\n .stop();\n\n while (simulation.alpha() > 0.0000001) {\n simulation.tick();\n }\n\n return simulation.nodes();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"force = applySimulation(outputPointData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"map_lakes_dots = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 975, 610]);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(county_select)\n .enter()\n .append(\"path\")\n //color\n .attr(\"fill\",\"white\")\n .attr(\"fill-opacity\",1)\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-opacity\",1)\n .attr(\"stroke-width\",0.2)\n .attr(\"d\", path_state);\n\n svg\n .append(\"g\")\n .attr('class','data')\n .selectAll('circle')\n .data(force)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"circle-symbol\")\n .attr(\"r\", dotRadius)\n .attr(\"cx\", function(d) { // define the x position\n return d.x; \n })\n .attr(\"cy\", function(d) { // define the y positio\n return d.y;\n })\n .attr(\"fill\",\"black\")\n .attr(\"fill-opacity\",1)\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"Example of this in practice: https://observablehq.com/@adrianblanco/americas-demographics-are-changing","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"## Exporting\n\n* To export maps in .png or .svg file formats, hover over the cell that contains your map and click on the three vertical dots to display the menu. You'd be able to download the map in your preferred format.\n\n${await FileAttachment(\"download-export.png\").image()}","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"## Examples\n\nMountain shape in [America’s demographics are changing.\nHow has your county shifted?](https://www.washingtonpost.com/nation/interactive/2021/census-maps-race-population-demographics/)\n\nDot density map at [Why So Many Children of Immigrants Rise to the Top](https://www.nytimes.com/interactive/2022/07/11/opinion/immigrants-success-america.html\n)\n\nDot density map at [Segregated from opportunity](https://www.washingtonpost.com/graphics/2020/national/george-floyd-america/housing/)\n\nForce dots in [Amid the pandemic, Trump and Biden traveled most often to Pennsylvania and Florida](https://www.washingtonpost.com/elections/2020/11/02/campaign-rallies-covid)\n\nForce dots in [The Taliban Promised Them Amnesty. Then They Executed Them.](https://www.nytimes.com/interactive/2022/04/12/opinion/taliban-afghanistan-revenge.html)\n\nForce dots in [Ukraine’s Refugee Crisis Is Unprecedented. The Response Must Be, Too.](https://www.nytimes.com/interactive/2022/03/15/opinion/ukraine-refugee-crisis.html)\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"## Questions?\n\nAt any point, feel free to reach out to Zach or Adrián with questions. Here is our contact information:\n\n- Zach Levitt, [zach.levitt@nytimes.com](mailto:zach.levitt@nytimes.com), [@zachwlevitt](https://twitter.com/zachwlevitt)\n- Adrián Blanco Ramos, [adrian.blanco@washpost.com](mailto:adrian.blanco@nytimes.com), [@AdrianBlancoR](https://twitter.com/AdrianBlancoR)","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"## Imports\n\nNotebook imports allow you to bring or import cells that contain graphics, functions, data or code from public notebooks into a new notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"import { fastestGrowingRace } from \"@adrianblanco/americas-demographics-are-changing\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":641,"value":"import { campaignEventsMap } from \"@adrianblanco/2020-presidential-campaign-events\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":645,"value":"import { globe } from \"@adrianblanco/designing-patterns-for-vintage-maps\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"immigration_map = FileAttachment(\"Screen Shot 2022-10-17 at 9.19.19 PM.png\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"afghanistan_map = FileAttachment(\"Screen Shot 2022-10-17 at 9.25.01 PM.png\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"{\n let height = 33;\n const context = DOM.context2d(width, height);\n let frame;\n\n function getRandomInt(max) {\n return Math.floor(Math.random() * max);\n }\n \n let radius = height / 2 - 5;\n let prev = 0;\n \n (function tick() {\n const x = (Math.sin(Date.now() / 1000) + 1) / 2 * (width - 2 * radius) + radius;\n context.clearRect(0, 0, width, height);\n context.beginPath();\n context.arc(x, height / 2, radius, 0, 2 * Math.PI);\n if (x < radius + 0.25){\n context.fillStyle = [`rgba(${getRandomInt(255)},${getRandomInt(255)},${getRandomInt(255)}`];\n }\n \n context.fill();\n frame = requestAnimationFrame(tick);\n })();\n \n invalidation.then(() => cancelAnimationFrame(frame)); \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}