2a:null 2b:["$","title",null,{"children":"Crimes in DC and neighboring schools | Justin Matthew Newman | Observable"}] 31:[] 2e:{"id":"8f656ac856d64d63","slug":"crimes-in-dc","title":"Crimes in DC and neighboring schools","thumbnail":"a411642023403ab5e45bd906b0cdedd997dc572e094c816ad316aab80b5952b5","access_level":"public","create_time":"$D2022-04-28T16:39:46.021Z","update_time":"$D2022-05-02T19:58:14.056Z","view_time":null,"first_public_time":"$D2022-04-28T17:24:24.227Z","fork":{"id":"a297257225ac417d","slug":"most-dangerous-spots-in-boston","title":"Most dangerous spots in Boston.","owner":{"id":"fff5ae5fc3e71272","login":"justinmatthewnewman","name":"Justin Matthew Newman"}},"stars":0,"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":1453,"publish_version":1453,"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":0,"collection":null,"type":"notebook","body":{"title":"Crimes in DC and neighboring schools","cells":[{"id":173,"value":"\n

Crimes in DC and neighboring schools

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":237,"value":"Adjust opacity after updating style to re draw data.","pinned":false,"hidden":false,"mode":"html"},{"id":196,"value":"viewof select = Inputs.select(\n [\n \"mapbox://styles/mapbox/dark-v9\",\n \"mapbox://styles/mapbox/satellite-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":166,"value":"viewof r3 = Inputs.range([0.01, 1], {\n label: \"Opacity\",\n step: 0.1,\n value: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof r2 = Inputs.range([1, 100], { label: \"Height\", value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof r1 = Inputs.range([10, 100], { label: \"Width\", value: 20 })","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":1275,"value":"dc = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/geoJson/main/dc_crimes.csv\",\n (d) => ({\n lat: +d.Lat,\n long: +d.Long\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"schools = d3.csv(\n \"https://raw.githubusercontent.com/JustinMatthewNewman/geoJson/main/dc_schools.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":1410,"value":"function getLayer() {\n const layers = [\n new deck.HexagonLayer({\n data: dc,\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 }),\n new deck.ScatterplotLayer({\n data: schools,\n upperPercentile: 99,\n pickable: true,\n radiusScale: 200,\n radiusMinPixels: 1,\n radiusMaxPixels: 100,\n lineWidthMinPixels: 1,\n getColor: [252, 89, 252],\n elevationScale: 3,\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 })\n ];\n return layers;\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: -77.01,\n latitude: 38.89,\n zoom: 12,\n pitch: 50,\n bearing: 20,\n layers: getLayer()\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"},{"id":1424,"value":"school_color = [\n [0, 0, 255],\n [0, 0, 255],\n [0, 0, 255],\n [0, 0, 255],\n [0, 0, 255],\n [0, 0, 255]\n]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"