2a:null 2b:["$","title",null,{"children":"North Brooklyn DEP-Flooding 311 Service Requests | Zhi Keng He | Observable"}] 31:T438,{ const overlapping_months = by_month.map((row) => { //bad way to fix timezones const d = new Date( row.date.toLocaleString("en-US", { timeZone: "Europe/London" }) ); return { old_date: d, date: new Date(2010, d.getMonth()), year: d.getFullYear(), count: row.count }; }); //sort by highest peaks const highest_points = [...overlapping_months].sort( (a, b) => b.count - a.count ); return Plot.plot({ width, x: { tickFormat: "%b", domain: [new Date(2010, 0, 0), new Date(2010, 11, 31)] }, marks: [ Plot.text(highest_points.slice(0, 10), { x: "date", y: "count", text: (d) => `${d3.timeFormat("%b-%Y")(d.old_date)} - ${d.count}`, fontSize: (d) => (d.year >= 2019 ? 11 : 10), textAnchor: "center", dy: "1.2em" }), Plot.areaY(overlapping_months, { x: "date", y2: "count", z: "year", fill: "steelblue", fillOpacity: 0.06, curve: "cardinal" }) ] }); }32:T706,{ //create points const terms = { Flooding: ["Sewer/Street Flooding", [8, 52, 113, 0.6]], "Cleaning Rquests": [ "Blocked Catch Basins, Culvert, and Rain Gardens", [115, 195, 120, 0.6] ], "Basement Flooding": ["Basement Flooding", [249, 105, 76, 0.6]] }; const template = { title: "{Agency}: {Descriptor}", content: [ { type: "fields", fieldInfos: [ { fieldName: "Incident Address" }, { fieldName: "Intersection Street 1" }, { fieldName: "Intersection Street 2" }, { fieldName: "Created Date" }, { fieldName: "Closed Date" }, { fieldName: "Resolution Description" } ] } ] }; let graphicsLayer = null; mapObj.view.when(() => { graphicsLayer = new GraphicsLayer({ title: "Complaints" }); Object.keys(terms).forEach((filter_term, i) => { const rows = data.filter( (r) => r.Filter === filter_term && r["Date-Year"] === yearSelect ); rows.forEach((row) => { const point = { type: "point", longitude: +row["Longitude"], latitude: +row["Latitude"] }; const simpleMarkerSymbol = { type: "simple-marker", color: terms[filter_term][1], size: 5.5, outline: { color: [255, 255, 255, 0.2], width: 2 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol, attributes: row, popupTemplate: template }); graphicsLayer.add(pointGraphic); }); }); mapObj.map.add(graphicsLayer); invalidation.then(() => mapObj.map.remove(graphicsLayer)); }); return graphicsLayer; }33:T903,generateBPlot = function (year = 2020, label = false) { const terms = { Flooding: ["Sewer/Street Flooding", "Blues"], "Cleaning Rquests": [ "Blocked Catch Basins, Culvert, and Rain Gardens", "Greens" ], "Basement Flooding": ["Basement Flooding", "Reds"] }; const firstYear = 2018; const height = 50; const div = document.createElement("div"); const yearTitle = document.createElement("h5"); yearTitle.innerText = year; div.appendChild(yearTitle); //storm events dots const plot = Plot.plot({ height: 5, width: width * 0.9, grid: false, x: { axis: false, domain: [new Date(year, 0, 0), new Date(year, 11, 31)], tickFormat: "%b", label: "Storm Events" }, marks: [ Plot.dot(storm_events, { x: "date", fill: "red", title: (d) => `${d.BEGIN_DATE}: ${d.EVENT_TYPE}` }) ] }); div.appendChild(plot); Object.keys(terms).forEach((filter_term, i) => { const plot = Plot.plot({ height, width: width * 0.9, grid: false, x: { axis: "top", grid: true, domain: [new Date(year, 0, 0), new Date(year, 11, 31)], tickFormat: "%b" }, color: { scheme: terms[filter_term][1] }, marks: [ Plot.barX( by_date_type.filter((r) => r.Filter === filter_term), { x: "date", fill: "count", interval: d3.utcDay, inset: 0 } ) ] }); //add title in h6 if (label) { const text = d3.select(plot).insert("text", "g"); text .text(terms[filter_term][0]) .attr("x", 25) .attr("y", 10) .attr("text-anchor", "start"); } //remove x-axis , if not first child if (i !== 0) { d3.select(plot).selectAll("g[aria-label='x-axis']").remove(); d3.select(plot) .selectAll("g[aria-label='bar']") .attr("transform", "translate(0,-10)"); } if (!label && i !== 0) { //remove padding d3.select(plot) .selectAll("g[aria-label='bar']") .attr("transform", "translate(0,-30)"); d3.select(plot).attr("viewBox", "").attr("height", 19); } div.appendChild(plot); }); return div; }34:[{"id":"9281434ccd05967d36b42ff070ce54c7bc4ffe0ce9c0a9246411f03d596982e215e3eb2642d7fa3130ed4f6b74d6707d5adb501287ab19163f54ad15cb3c5cae","href":"https://static.observableusercontent.com/files/9281434ccd05967d36b42ff070ce54c7bc4ffe0ce9c0a9246411f03d596982e215e3eb2642d7fa3130ed4f6b74d6707d5adb501287ab19163f54ad15cb3c5cae","name":"storm_data_search_results.csv","type":"text/csv","lastModified":1653681696153.038,"size":40865},{"id":"e3259b89fdf2405ede51efb64bac77728f96f0588cffe532a9a4e261917207671cd5a21ff1b8cd5c39463919b355700a6f01dce108c52cdd5ba349a6d2a71bba","href":"https://static.observableusercontent.com/files/e3259b89fdf2405ede51efb64bac77728f96f0588cffe532a9a4e261917207671cd5a21ff1b8cd5c39463919b355700a6f01dce108c52cdd5ba349a6d2a71bba","name":"flooding.csv","type":"text/csv","lastModified":1652816071798.692,"size":4211547}] 2e:{"id":"fa796ce212380792","slug":"north-brooklyn-dep-flooding-311-service-requests","title":"North Brooklyn DEP-Flooding 311 Service Requests","thumbnail":null,"access_level":"public","create_time":"$D2022-05-17T19:33:29.212Z","update_time":"$D2022-05-27T20:23:38.202Z","view_time":null,"first_public_time":"$D2022-05-26T21:29:51.204Z","fork":{"id":"66588daff875278c","slug":"sql-chart","title":"SQL + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024"},"version":1093,"publish_version":1093,"role":null,"authored":false,"authors":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null}],"members":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"North Brooklyn DEP-Flooding 311 Service Requests","cells":[{"id":57,"value":"# North Brooklyn DEP-Flooding 311 Service Requests","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"### Overview","pinned":false,"hidden":false,"mode":"md"},{"id":535,"value":"Plot.plot({\n width,\n y: {\n grid: true\n },\n x: {\n tickFormat: \"%Y\",\n domain: [new Date(2010, 0, 0), new Date(2022, 11, 31)]\n },\n marks: [\n Plot.areaY(by_month, {\n x: \"date\",\n y: \"count\",\n curve: \"step\",\n fill: \"#4e79a7\"\n }),\n //regression filter for only data before 2022\n Plot.line(\n regression(by_month.filter((i) => i.date < new Date(2022, 4, 0))),\n { stroke: \"#e15759\", strokeWidth: 3 }\n ),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"### Monthly Patterns (with the top 10 months labeled)","pinned":false,"hidden":false,"mode":"md"},{"id":683,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"### Complaints and flood events in the past four years.\n\n\n

NWS Flood Events (Hover over for more details)

","pinned":false,"hidden":false,"mode":"md"},{"id":647,"value":"generateBPlot(2018, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"generateBPlot(2019)","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"generateBPlot(2020)","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"generateBPlot(2021)","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":659,"value":"viewof yearSelect = Inputs.range([2010, 2022], {\n step: 1,\n value: 2022\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"generateBPlot(yearSelect, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"{\n return md`### Locations of Complaints`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"mapContainer = {\n const mapContainer = DOM.element(\"div\", { style: `height:700px;` });\n yield mapContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"### Appendix ","pinned":false,"hidden":false,"mode":"md"},{"id":1013,"value":"Date Sources:\n- [New York City Stormwater Flood Maps](https://experience.arcgis.com/experience/4b290961cac34643a49b9002f165fad8/)\n- [1 foot Digital Elevation Model (DEM)](https://data.cityofnewyork.us/City-Government/1-foot-Digital-Elevation-Model-DEM-Integer-Raster/7kuu-zah7)\n- [311 Service Requests](https://data.cityofnewyork.us/Social-Services/311-Service-Requests-from-2010-to-Present/erm2-nwe9)\n- [Storm Events Database](https://www.ncdc.noaa.gov/stormevents/listevents.jsp?eventType=%28Z%29+Coastal+Flood&eventType=%28C%29+Flash+Flood&eventType=%28Z%29+Flood&eventType=%28C%29+Heavy+Rain&eventType=%28Z%29+Hurricane+%28Typhoon%29&eventType=%28Z%29+Storm+Surge%2FTide&eventType=%28Z%29+Tropical+Storm&beginDate_mm=01&beginDate_dd=01&beginDate_yyyy=2010&endDate_mm=02&endDate_dd=28&endDate_yyyy=2022&county=KINGS%3A47&hailfilter=0.00&tornfilter=0&windfilter=000&sort=DT&submitbutton=Search&statefips=36%2CNEW+YORK)","pinned":false,"hidden":false,"mode":"md"},{"id":879,"value":"mapObj = {\n const map = new WebMap({\n portalItem: {\n id: \"222d25bae1714531ab6fa1e1850cc815\"\n }\n });\n\n let view = new MapView({\n map,\n container: mapContainer,\n center: [-73.9466, 40.71932],\n zoom: 13,\n navigation: {\n mouseWheelZoomEnabled: false\n }\n });\n\n //add layer list\n let layerList = new LayerList({\n view: view\n });\n\n let legend = new Legend({\n view: view\n });\n\n view.ui.add(layerList, {\n position: \"top-left\"\n });\n\n view.ui.add(legend, \"bottom-right\");\n\n return { map, view };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"regression = d3\n .regressionLoess()\n .x((d) => d.date)\n .y((d) => d.count)\n .bandwidth(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"storm_events = {\n const d = await FileAttachment(\"storm_data_search_results.csv\").csv();\n\n return d.map((i) => {\n i.date = new Date(i[\"BEGIN_DATE\"]);\n return i;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import { DuckDBClient } from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"select \"Date-Day\" as date, Filter, count(*)::int as count from requests\ngroup by \"Date-Day\", Filter order by date","pinned":false,"hidden":false,"mode":"sql","output":"by_date_type","database":"var:db"},{"id":530,"value":"select CONCAT(\"Date-Month\", '-01')::date as date ,count(*)::int as count from requests\ngroup by \"Date-Month\"order by date","pinned":false,"hidden":false,"mode":"sql","output":"by_month","database":"var:db"},{"id":130,"value":"select * from requests","pinned":false,"hidden":false,"mode":"sql","output":"data","database":"var:db"},{"id":127,"value":"db = DuckDBClient.of({\n requests: FileAttachment(\"flooding.csv\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"import { TimeChart, TimeAxis } from \"@observablehq/timechart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"d3 = require(\"d3@7\", \"d3-regression@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":873,"value":"MapView = (\n await import(\"https://js.arcgis.com/4.23/@arcgis/core/views/MapView.js\")\n).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"WebMap = (await import(\"https://js.arcgis.com/4.23/@arcgis/core/WebMap.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"LayerList = (\n await import(\"https://js.arcgis.com/4.23/@arcgis/core/widgets/LayerList.js\")\n).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":986,"value":"Legend = (\n await import(\"https://js.arcgis.com/4.23/@arcgis/core/widgets/Legend.js\")\n).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"PopupTemplate = (\n await import(\"https://js.arcgis.com/4.23/@arcgis/core/PopupTemplate.js\")\n).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"Graphic = (await import(\"https://js.arcgis.com/4.23/@arcgis/core/Graphic.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"GraphicsLayer = (\n await import(\n \"https://js.arcgis.com/4.23/@arcgis/core/layers/GraphicsLayer.js\"\n )\n).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1075,"value":"import { Plot } from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"