2a:null 2b:["$","title",null,{"children":"deck.gl and mapbox | Justin Matthew Newman | Observable"}] 31:T40d,

By: Justin Matthew Newman, Mark Feder, Patrick Lucus

This visualization displays crash data in the United States of America from the year 2016 through 2020 from Kaggle.com. The longitudinal and latitudinal data is overlayed onto a hexagon layer with deck.gl. After filtering the data and running various analyses on the timestamps, we have concluded that the rainy and snowy months comprise the vast majority of car crashes in the United States.

The goal of this data visualization project is to help viewers gain a better understanding of what areas of the national roadway system are the most prone to accidents and why. Our data visualization is meant to unite the audience by captivating our attentions around something we all hope to reduce. We hope to reduce the possibility of car accidents near popular landmarks .

32:T773,

A few interesting findings:

One interesting finding that we made after plotting the ending coordinates of each car accident was that a few area's with high accident density were located next to unique and aesthetically pleasing architecture and landmarks.

For example after adjusting the opacity and radius of our hexagonal accident occurrence points. Then changing the map style to satellite. Then navigating to the location of the National Museum of the Marine Corps; A very unique looking building located directly beside the interstate highway, there was a very large spike in car accidents.

More interesting findings:

A colleague of ours; Nicholas Spokes, was able to locate a hotspot for crashes right beside Lou Ruvo Center for Brain Health in Las Vegas and another hotspot in Boston right beside the Ray and Maria stata center.

33:T403,

To accommodate our 600MB data with over 1,500,000 records, we used MySQL workbench to filter our data get the deck.gl hexagon layer working on an example csv with 90,000 records. After we had the example csv mapped over the USA we began selecting only the columns of data that were required for deck.gl, we then had to further split our data into 25MB csv's due to Github's hosting limitations. These files were sliced into 20 MB sections with a java algorithm and uploaded to GitHub.

Finally, they were imported to observable through d3.csv. Once the longitudes and latitudes were mapped onto the hexagon layer, we then parsed through the dates in our array and applied them to a filter and counter. These filters and counters were then utilized in our analysis of the correlation between month of the year and the number of accidents.

34:T4f3,function timeStamp() { let obj = new Object({ jan: 0, feb: 0, mar: 0, apr: 0, may: 0, jun: 0, jul: 0, aug: 0, sep: 0, oct: 0, nov: 0, dec: 0, total: 1516064 }); for (let index = 0; index < bigData.length; ++index) { if (bigData[index].end.getMonth() == 0) { obj.jan = obj.jan + 1; } if (bigData[index].end.getMonth() == 1) { obj.feb = obj.feb + 1; } if (bigData[index].end.getMonth() == 2) { obj.mar = obj.mar + 1; } if (bigData[index].end.getMonth() == 3) { obj.apr = obj.apr + 1; } if (bigData[index].end.getMonth() == 4) { obj.may = obj.may + 1; } if (bigData[index].end.getMonth() == 5) { obj.jun = obj.jun + 1; } if (bigData[index].end.getMonth() == 6) { obj.jul = obj.jul + 1; } if (bigData[index].end.getMonth() == 7) { obj.aug = obj.aug + 1; } if (bigData[index].end.getMonth() == 8) { obj.sep = obj.sep + 1; } if (bigData[index].end.getMonth() == 9) { obj.oct = obj.oct + 1; } if (bigData[index].end.getMonth() == 10) { obj.nov = obj.nov + 1; } if (bigData[index].end.getMonth() == 11) { obj.dec = obj.dec + 1; } } return obj; }35:[{"id":"8963ae7bf15093177ba291bc98aaf3f9e5d4fb2fedc8dfbc99cfa9a3d7193386522ff9c3783cc8b775ba24e19a1c7ebc56099dd89a1341b30ea901add13f252f","href":"https://static.observableusercontent.com/files/8963ae7bf15093177ba291bc98aaf3f9e5d4fb2fedc8dfbc99cfa9a3d7193386522ff9c3783cc8b775ba24e19a1c7ebc56099dd89a1341b30ea901add13f252f","name":"counts - Sheet1.csv","type":"text/csv","lastModified":1639624391291.133,"size":150}] 2e:{"id":"528975294dea20f7","slug":"mapbox-with-deck-gl","title":"deck.gl and mapbox","thumbnail":"dc67c22ea4db57ed3c0484f0396914b52ad625f4ad97267ed99d645f472192f3","access_level":"public","create_time":"$D2021-12-07T15:01:06.986Z","update_time":"$D2023-07-07T21:56:05.172Z","view_time":null,"first_public_time":"$D2021-12-11T05:39:32.495Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"fff5ae5fc3e71272","login":"justinmatthewnewman","name":"Justin Matthew Newman","avatar_url":"https://avatars-next.observableusercontent.com/19fb5577bca9586fb5c80e2de82f69f08d2eb56b09d45a702b37efe07001951a","tier":"starter_2024"},"version":1259,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c0d133857d21681","login":"justinmatthewnewman","name":"Justin Matthew Newman","avatar_url":"https://avatars-next.observableusercontent.com/19fb5577bca9586fb5c80e2de82f69f08d2eb56b09d45a702b37efe07001951a","tier":null}],"members":[{"type":"individual","id":"2c0d133857d21681","login":"justinmatthewnewman","name":"Justin Matthew Newman","avatar_url":"https://avatars-next.observableusercontent.com/19fb5577bca9586fb5c80e2de82f69f08d2eb56b09d45a702b37efe07001951a","tier":null,"role":"editor"},{"type":"individual","id":"153cbc02c42eb36d","login":"markfeder","name":"Mark Feder","avatar_url":null,"tier":null,"role":"editor"},{"type":"individual","id":"a7283f1eebdc5cba","login":"patricklucus3","name":"","avatar_url":null,"tier":null,"role":"editor"},{"type":"individual","id":"9f316fa2aba52cf9","login":"scresawn","name":"Steven Cresawn","avatar_url":"https://avatars-next.observableusercontent.com/e2727956835daa3b5e9995b66c1111489c2e403c176b4fb761ec6ad64b97786b","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"deck.gl and mapbox","cells":[{"id":173,"value":"\n

deck.gl and mapbox

VIEW ON DESKTOP

\n\n

(loading 2Million datapoints)...

(runs some older devices out of RAM)

\n","pinned":false,"hidden":false,"mode":"html"},{"id":1171,"value":"\n

USA* Car accidents from ☆2016-2020☆ A+

*Excluding Alaska & Hawaii

\n ","pinned":false,"hidden":false,"mode":"html"},{"id":68,"value":"baseMap = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"\n

\n
Do more car accidents occur in cities or interstate highways?
\n
\n
Do certain eye catching buildings cause people to crash?
\n
\n
Which time of year do people crash more often?
\n

\n

\n","pinned":false,"hidden":false,"mode":"html"},{"id":791,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":436,"value":"# Mapbox and deck.gl control panel","pinned":false,"hidden":false,"mode":"md"},{"id":166,"value":"viewof r3 = Inputs.range([0.01, 1], { label: \"Opacity\", step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"#### Adjust opacity after updating style to re draw data.","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"viewof selectColor = Inputs.select([\"FireAndIce\", \"RocketPop\", \"Atlantis\", \"BubbleGum\", \"SourPatch\"], {\n label: \"Select Color scheme\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"##### Settings\n","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"viewof select = Inputs.select(\n [\n \"mapbox://styles/mapbox/dark-v9\",\n \"mapbox://styles/mapbox/light-v9\",\n \"mapbox://styles/mapbox/satellite-v9\",\n \"mapbox://styles/mapbox/streets-v11\",\n \"mapbox://styles/mapbox/outdoors-v11\",\n \"mapbox://styles/mapbox/navigation-day-v1\",\n \"mapbox://styles/mapbox/navigation-night-v1\",\n \"mapbox://styles/mapbox/satellite-streets-v11\"\n ],\n {\n label: \"STYLE\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof r2 = Inputs.range([0, 9500], { label: \"Height\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof r1 = Inputs.range([110, 5000], { label: \"Width\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"### Keep in mind this dataset contains over 1.5 million entries so it is expected that the page may crash, Please refresh or press F5 if so.","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1059,"value":"Plot.plot({\n marginLeft: 105,\n marks: [\n Plot.ruleY([0]),\n Plot.barY(data2, { x: \"month\", y: \"count\", fill: \"purple\" })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"Inputs.table(Array.of(hist))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1233,"value":"#### How did we get passed the max import size threshold?","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":284,"value":"#### CSV data set, combined multiple datasets to break max data threshold.\n###### Data was cut from https://www.kaggle.com/sobhanmoosavi/us-accidents/version/10?select=US_Accidents_Dec20_updated.csv with \"cat US_Accidents_Dec20_updated.csv | -d ',' -f2,3,4,5,6,7,8\"\n\n###### Then data was split into multiple with a java algorithm csv's to pass Github's max size threshold.","pinned":false,"hidden":false,"mode":"md"},{"id":1120,"value":"###### https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/main/ReadInBytes.java","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"dataFile0 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_0.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"dataFile1 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_1.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"dataFile2 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_2.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"dataFile3 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_3.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"dataFile4 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_4.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"dataFile5 = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/data200_database/371ba005f1dffb6dad0716a9b4d27c77066979f8/file_5.csv\",\n (d) => ({\n severity: +d.Severity,\n start: new Date(d.Start_Time),\n end: new Date(d.End_Time),\n latStart: +d.End_Lat,\n longStart: +d.End_Lng,\n lat: +d.End_Lat,\n long: +d.End_Lng\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"bigData = dataFile0.concat(\n dataFile1,\n dataFile2,\n dataFile3,\n dataFile4,\n dataFile5\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1107,"value":"##### Plot and table of months","pinned":false,"hidden":false,"mode":"md"},{"id":753,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"hist = timeStamp()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"###### After counting the totals with js we passed them into a seperate CSV for the plot","pinned":false,"hidden":false,"mode":"md"},{"id":1006,"value":"result2 = FileAttachment(\"counts - Sheet1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"data2 = result2.map((a) => {\n let e = {};\n e.month = a.month;\n e.count = a.count;\n return e;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"## Color Schemes","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"a100 = {\n if (selectColor == \"FireAndIce\") return colorA;\n if (selectColor == \"RocketPop\") return colorA2;\n if (selectColor == \"Atlantis\") return colorA3;\n if (selectColor == \"BubbleGum\") return colorA4;\n if (selectColor == \"SourPatch\") return colorA5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"colorA = [\n [1, 152, 189],\n [73, 227, 206],\n [216, 254, 181],\n [254, 237, 177],\n [254, 173, 84],\n [209, 55, 78]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"colorA2 = [\n [186, 0, 0],\n [255, 33, 33],\n [255, 148, 148],\n [255, 255, 255],\n [166, 181, 255],\n [64, 96, 255]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"colorA3 = [\n [5, 103, 153],\n [85, 137, 226],\n [125, 254, 185],\n [157, 199, 237],\n [207, 256, 50],\n [200, 157, 98]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"colorA4 = [\n [255, 0, 200],\n [255, 89, 219],\n [255, 143, 231],\n [255, 176, 238],\n [255, 204, 244],\n [255, 242, 252]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"colorA5 = [\n [17, 255, 0],\n [179, 255, 0],\n [255, 247, 0],\n [255, 170, 0],\n [255, 98, 0],\n [199, 0, 0]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"# deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"hexegonLayer = new deck.HexagonLayer({\n data: bigData,\n upperPercentile: 99,\n pickable: true,\n extruded: true,\n radius: r1,\n opacity: r3,\n colorRange: a100,\n elevationScale: r2,\n getPosition: (d) => [d.long, d.lat],\n onHover: ({ object, x, y }) => {\n const tooltip = `${object.centroid.join(\", \")}\\nCount: ${\n object.points.length\n }`;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"deckgl = {\n // This is an Observable hack: clear previously generated content\n baseMap.innerHTML = \"\";\n\n let map = new deck.DeckGL({\n // The HTML container to render into\n container: baseMap,\n // Mapbox settings\n // set `map: false` to turn off Mapbox base map\n map: mapboxgl,\n // This token is for demo-purpose only and rotated regularly. Get your token at https://www.mapbox.com\n mapboxApiAccessToken:\n \"pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA\",\n mapStyle: select,\n\n // Viewport settings\n longitude: -95.9712,\n latitude: 39.7831,\n zoom: 4,\n pitch: 50,\n bearing: -20,\n layers: [hexegonLayer]\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"#### Import statements","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"mapboxgl = require('mapbox-gl@~0.50.0/dist/mapbox-gl.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"deck = require('deck.gl@6.2.3/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"