2b:null 2c:["$","title",null,{"children":"Pedestrian & Bicicle Traffic Accidents | Mila Frerichs | Observable"}] 31:[] 2f:{"id":"f40984a313c267b7","slug":"pedestrian-bicicle-traffic-accidents","title":"Pedestrian & Bicicle Traffic Accidents","thumbnail":"793f1e02194a265b0ccccdd6cc06c132851ab1bdc7b8805d31c1e67ef510b8d8","access_level":"public","create_time":"$D2018-05-21T12:37:13.488Z","update_time":"$D2018-05-23T15:26:23.949Z","view_time":null,"first_public_time":"$D2018-05-23T15:26:27.711Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"079ea4d30f896e6d","login":"milafrerichs","name":"Mila Frerichs","avatar_url":"https://avatars-next.observableusercontent.com/0fabf33efb0910a16e16c8ef395f9d7dd41f0ff6fbbce1ee53d9ee8bb1be09b4","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"c702b8ae5e4263bd","login":"milafrerichs","name":"Mila Frerichs","avatar_url":"https://avatars-next.observableusercontent.com/0fabf33efb0910a16e16c8ef395f9d7dd41f0ff6fbbce1ee53d9ee8bb1be09b4","tier":null}],"members":[{"type":"individual","id":"c702b8ae5e4263bd","login":"milafrerichs","name":"Mila Frerichs","avatar_url":"https://avatars-next.observableusercontent.com/0fabf33efb0910a16e16c8ef395f9d7dd41f0ff6fbbce1ee53d9ee8bb1be09b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Pedestrian & Bicicle Traffic Accidents","cells":[{"id":0,"value":"md`# Pedestrian & Bicicle Traffic Accidents`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof displayed_data = dataSource()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"chart = {\n \n const projection = d3.geoAlbers();\n\n const geoGenerator = d3.geoPath()\n .projection(projection);\n \n const svg = d3.select(DOM.svg(width, height))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n \n\n projection\n .fitExtent([[20, 20], [600, 600]], detroit);\n \n svg.append('g').selectAll('path')\n .data(detroit.features)\n .enter()\n .append('path')\n .attr('d', geoGenerator)\n .attr('fill', '#fff')\n .attr('stroke', '#ccc')\n ;\n /** \n svg.append('g').selectAll('path').data(streets.features)\n .enter()\n .append('path')\n .attr('d', geoGenerator)\n .attr('stroke', '#cecece')\n .style('opacity', 0.4)\n **/\n svg.append('g').selectAll('path').data(displayed_data)\n .enter()\n .append(\"circle\")\n .attr(\"r\", 2)\n .attr(\"transform\", d => `translate(${geoGenerator.centroid(d)})`)\n .attr('fill', 'red')\n .style(\"opacity\", 0.2);\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"url = 'https://data.detroitmi.gov/resource/emxu-iv9j.geojson?$limit=50000&$where=bicycle=\"1\" OR pedestrian = \"1\"'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"type = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.json(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"fatalities = data.features.filter( d => parseInt(d.properties.fatal_count) > 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"injured = data.features.filter( d => parseInt(d.properties.a_level_count) > 0 || parseInt(d.properties.c_level_count) > 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"detroit = d3.json(detroit_boundaries_url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"detroit_boundaries_url = 'https://data.detroitmi.gov/api/geospatial/5mn6-ihjv?method=export&format=GeoJSON'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"streets_url = \"https://query.data.world/s/p4in2v2niqbwlfmujb7r5rs5oepkp6\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"/** streets = d3.json(streets_url) **/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"dataSource = () => {\n const form = html`\n \n `\n \n form.addEventListener('input', e => {\n updateFormValue();\n })\n \n function updateFormValue() {\n const select = form.querySelector(\"select\");\n if(select.value === 'injuries') {\n form.value = injured;\n }else if(select.value === 'fatalities') {\n form.value = fatalities;\n }\n else {\n form.value = data.features;\n }\n }\n \n updateFormValue();\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"