2a:null 2b:["$","title",null,{"children":"Most dangerous spots in Boston. | Justin Matthew Newman | Observable"}] 31:[] 2e:{"id":"a297257225ac417d","slug":"most-dangerous-spots-in-boston","title":"Most dangerous spots in Boston.","thumbnail":"9fa3d8bdafbe67e00db63986b85dd240b60fc2d4179ae26b2d6ac2f14633180a","access_level":"public","create_time":"$D2022-03-17T22:34:36.484Z","update_time":"$D2022-03-17T22:59:48.767Z","view_time":null,"first_public_time":"$D2022-03-17T23:00:57.254Z","fork":{"id":"528975294dea20f7","slug":"mapbox-with-deck-gl","title":"deck.gl and mapbox","owner":{"id":"fff5ae5fc3e71272","login":"justinmatthewnewman","name":"Justin Matthew Newman"}},"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":1342,"publish_version":1342,"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"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Most dangerous spots in Boston.","cells":[{"id":173,"value":"\n

Most dangerous spots in Boston.

visualization with deck.gl and mapbox

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

`","pinned":false,"hidden":false,"mode":"ojs"},{"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":245,"value":"viewof selectColor = Inputs.select(\n [\"SourPatch\", \"FireAndIce\", \"RocketPop\", \"Atlantis\", \"BubbleGum\"],\n {\n label: \"Select Color scheme\"\n }\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/satellite-v9\",\n \"mapbox://styles/mapbox/dark-v9\",\n \"mapbox://styles/mapbox/light-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":237,"value":"#### Adjust opacity after updating style to re draw data.","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"viewof r2 = Inputs.range([1, 100], { label: \"Height\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof r1 = Inputs.range([10, 100], { label: \"Width\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"boston = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/geoJson/main/boston_crime.csv\",\n (d) => ({\n lat: +d.Lat,\n long: +d.Long\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"#### Data used: https://www.kaggle.com/AnalyzeBoston/crimes-in-boston","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"# deck.gl","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"hexegonLayer = new deck.HexagonLayer({\n data: boston,\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: -71.1,\n latitude: 42.3531,\n zoom: 11,\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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"