31:[] 2f:{"title":"Pedestrian & Bicicle Traffic Accidents","cells":[{"id":0,"value":"md`# Pedestrian & Bicicle Traffic Accidents`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof displayed_data = dataSource()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":14,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":92,"value":"type = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = d3.json(url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"fatalities = data.features.filter( d => parseInt(d.properties.fatal_count) > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":20,"value":"detroit = d3.json(detroit_boundaries_url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"detroit_boundaries_url = 'https://data.detroitmi.gov/api/geospatial/5mn6-ihjv?method=export&format=GeoJSON'","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"streets_url = \"https://query.data.world/s/p4in2v2niqbwlfmujb7r5rs5oepkp6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"/** streets = d3.json(streets_url) **/","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}