40:null 41:["$","title",null,{"children":"Chicago Traffic Speed | Owen Lin | Observable"}] 47:[] 45:{"id":"99a09e0b2a70c5d6","slug":null,"title":"Chicago Traffic Speed","thumbnail":"6d1cebf53e7a5dd24e4e457ab64e20da30cd51658030d59a579b7304330e9d28","access_level":"public","create_time":"$D2023-07-12T15:26:35.733Z","update_time":"$D2023-07-12T15:26:35.733Z","view_time":null,"first_public_time":"$D2023-07-12T15:26:35.733Z","has_unpublished_edits":null,"fork":{"id":"9f68897e931ef316","slug":"chicago-traffic-speed","title":"Chicago Traffic Speed","owner":{"id":"0df8decf923551e1","login":"cmsparks","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"d1ae62b20162e856","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":"starter_2024","bio":"","following":false},"version":346,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39965f3cff8adc55","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"39965f3cff8adc55","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Chicago Traffic Speed","cells":[{"id":226,"value":"md `\n# Chicago Traffic Speed\n\n\n\nThis visualization uses data from daily traffic counts in Chicago and plots them on a map.\n\n### Data\nData from the City of Chicago's data portal at https://data.cityofchicago.org/Transportation/Average-Daily-Traffic-Counts/pfsx-4n4m\n\n### Libraries Used\n* Mapbox used for the map\n* Deck.gl the data layer\n* D3 for color scaling \$D3 probably isn't needed here, but I just used it to make it easier\$\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof map = {\n let container = html`

`;\n yield container;\n\n // create the map\n let map = new mapboxgl.Map({\n container,\n center: [-87.6, 41.876272321172954],\n zoom: 11,\n style: \"mapbox://styles/mapbox/dark-v9\"\n });\n\n \n // Add lineLayer on load\n map.on(\"load\", () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n \n map.addLayer(lineLayer);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"html `\n

\n \n 0 mph\n \n 60 mph\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"lineLayer = {\n const lineLayer = new deck.MapboxLayer({\n type: deck.LineLayer,\n id: \"trafficLines\",\n data: data,\n opacity: 1,\n //get positions and plot them with a color corresponding to the traffic level\n getSourcePosition: d => [Number(d.start_lon), Number(d._lif_lat)],\n getTargetPosition: d => [Number(d._lit_lon),Number(d._lit_lat)],\n getColor: d => colorScale(Number(d._traffic)),\n getStrokeWidth: 4\n })\n return lineLayer\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"data = (await fetch('https://data.cityofchicago.org/resource/8v9j-bter.json')).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"colorScale = (n) => {\n let color = d3LinearScale(n)\n color = color.split(',')\n color[0] = Number(color[0].substring(4, color[0].length))\n color[1] = Number(color[1].substring(1, color[1].length))\n color[2] = Number(color[2].substring(1, color[2].length-1))\n return color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"d3LinearScale = d3.scaleLinear()\n .domain([-1, 10, 60])\n .range([\"red\", \"yellow\", \"green\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md `\n# Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"deck = require('deck.gl@6.2.3/deckgl.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoiY3NwYXJrczE5MTkiLCJhIjoiY2pwdmpzNGJvMHNmZDQycWx5cXlhb2dlOSJ9.Su9QteNvX7v_rSMDHMuTKw\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 46:"$45:body"