31:Tbed,bubbleMap = { const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) .style("background-color","#fff") .style("font", "10px sans-serif"); const roads = svg.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "#eee") .attr("d", (d) => { return path(d.data.roads) }) .style("stroke-width", .5) .style("stroke", "000"); const buildings = svg.selectAll(".tile") .data(tiles) .enter().append("path") .style("fill", "none") .attr("d", (d) => { return path(d.data.buildings) }) .style("stroke-width", .15) .style("stroke", "000"); const subgraphWidth = width*2/7; const subgraphHeight = height*1/5; const subgraph = svg.append("g") .attr("id", "subgraph") .attr("transform", `translate(${width - subgraphWidth - 20}, 0)`); subgraph.append("rect") .attr("width", subgraphWidth) .attr("height", subgraphHeight) .style("fill", "#fff") .style("stroke", "#000") const dateText = subgraph.append("text") .attr("dy", 14) .text("1990-09-24"); const dateParse = d3.timeParse("%Y-%m-%d"); const yearParse = d3.timeParse("%Y"); const xScale = d3.scaleTime() .range([40, subgraphWidth]) .domain(filing_date_Extent); const nestedByDate = d3.nest() .key(d => d.filing_date.split("T")[0].split("-")[0]) .rollup(leaves => leaves.length) .entries(ProspectHeights.sort((a,b) => { return dateParse(a.filing_date.split("T")[0]) - dateParse(b.filing_date.split("T")[0]) })); const yScale = d3.scaleLinear() .range([subgraphHeight, 0]) .domain([0, d3.max(nestedByDate, d => d.value)]); const lineGenerator = d3.line() .x(d => xScale(yearParse(d.key))) .y(d => yScale(d.value)); const line = subgraph.append("path") .datum(nestedByDate.filter(d => +d.key <= 1990)) .attr("d", d => lineGenerator(d)) .style("fill", "none") .style("stroke", "#000") let year = 1990 const bubbles = svg.selectAll("circle") .data(ProspectHeights.sort((a,b) => { return dateParse(a.filing_date.split("T")[0]) - dateParse(b.filing_date.split("T")[0]) })) .enter().append("circle") .attr("transform", (d) => { let proj = projection([d.gis_longitude, d.gis_latitude]); return `translate(${proj[0]},${proj[1]})` }) .style("fill", (d) => color(d.job_type)) .style("fill-opacity", .25) .attr("r", 0) .transition() .delay((d,i) => i * 2) .duration(1000) .attr("r", 10) .on("end", (d) => { let date = d.filing_date.split("T")[0]; dateText.text(date); if(+date.split("-")[0] > year) { year = +date.split("-")[0]; line.datum(nestedByDate.filter(e => +e.key <= year)) .attr("d", e => lineGenerator(e)) } }) .transition() .duration(1000) .attr("r", 3) return svg.node() }32:T6df,restart = () => { const svg = d3.select(bubbleMap) const subgraphWidth = width*2/7; const subgraphHeight = height*1/5; const subgraph = svg.select("#subgraph"); const subgraphLine = svg.select("#subgraphLine"); const dateText = subgraph.select("text") .text("1990-09-24"); const dateParse = d3.timeParse("%Y-%m-%d"); const yearParse = d3.timeParse("%Y"); const xScale = d3.scaleTime() .range([40, subgraphWidth]) .domain(filing_date_Extent); const nestedByDate = d3.nest() .key(d => d.filing_date.split("T")[0].split("-")[0]) .rollup(leaves => leaves.length) .entries(ProspectHeights.sort((a,b) => { return dateParse(a.filing_date.split("T")[0]) - dateParse(b.filing_date.split("T")[0]) })); const yScale = d3.scaleLinear() .range([subgraphHeight, 0]) .domain([0, d3.max(nestedByDate, d => d.value)]); const lineGenerator = d3.line() .x(d => xScale(yearParse(d.key))) .y(d => yScale(d.value)); const line = subgraph.select("path") .datum(nestedByDate.filter(d => +d.key <= 1990)) .attr("d", d => lineGenerator(d)); let year = 1990 const bubbles = svg.selectAll("circle") .attr("r", 0) .transition() .delay((d,i) => i * 2) .duration(1000) // .ease(d3.easeElastic) .attr("r", 10) .on("end", (d) => { let date = d.filing_date.split("T")[0]; dateText.text(date); if(+date.split("-")[0] > year) { year = +date.split("-")[0]; line.datum(nestedByDate.filter(e => +e.key <= year)) .attr("d", e => lineGenerator(e)) } }) .transition() .duration(1000) .attr("r", 3) return svg.node() }33:[] 2f:{"title":"NYC Building Permits API - Prospect Heights","cells":[{"id":0,"value":"md`# NYC Building Permits API - Prospect Heights`","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"import { nyc } from \"@pstuffa/making-maps-with-nyc-open-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"md` Building on a previous notebook about the NYC Building Permits API, here we take a closer look at permits issued for Prospect Heights, a small neighborhood in the heart of brooklyn. I am using the [D3 Vector Tiles](https://beta.observablehq.com/@mbostock/d3-vector-tiles) technique with the API from [Nextzen](https://developers.nextzen.org/) to render building permits issued over time on a map. In the upper right, I am simultaneously revealing the trendline of # of permits issued.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`__Job Type, based on DOB Job Code (NB-New Building, A1, A2, A3- Alterations 1-3, SG-Sign, etc.)__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"{\n \n let button = html``\n button.style.fontSize = \"1.2em\";\n \n button.addEventListener('click', restart)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"md`There seems to be a majority of __A2__ alterations, with new construction varying between neighborhoods. Not 100% sure what these variations permit types are. I checked out another [NYC Gov Site](https://www1.nyc.gov/site/buildings/homeowner/permits.page) and found this:\n\n* NB: Construction of new structures\n* ALT1: Major alterations that will change use, egress or occupancy\n* ALT2: Multiple types of work, not affecting use, egress or occupancy\n* ALT3: One type of minor work, not affecting use, egress or occupancy\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`[DOB Permit Issuance](https://data.cityofnewyork.us/Housing-Development/DOB-Permit-Issuance/ipu4-2q9a), á la NYC Open Data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"ProspectHeightsQuery = \"$query=SELECT * WHERE borough=='BROOKLYN' and gis_nta_name=='Prospect Heights' LIMIT 50000\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"ProspectHeights = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${ProspectHeightsQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"projection = d3.geoMercator()\n .center([-73.96781, 40.67764])\n .scale((1 << 24) / (2 * Math.PI))\n .translate([width / 2, height / 2])\n // .rotate([106, 39])\n .precision(0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"tiles = Promise.all(tile().map(async d => {\n d.data = await d3.json(`https://tile.nextzen.org/tilezen/vector/v1/256/all/${d.z}/${d.x}/${d.y}.json?api_key=qrH6iBWjQRyZAVKyDXpR7Q`); // Sign up for an API key: https://www.nextzen.org\n return d;\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features.filter(test)};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"color = d3.scaleOrdinal().range(d3.schemeCategory10) \n .domain(getColumn(\"job_type\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"getColumn = (field) => {\n \n const dateQuery = `$query=SELECT DISTINCT ${field} WHERE borough=='BROOKLYN' limit 50000`;\n const distinctDates = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${dateQuery}`);\n \n return distinctDates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"getDateRange = (distinctDates, field) => {\n \n const dateParse = d3.timeParse(\"%Y-%m-%d\");\n \n return d3.extent(distinctDates, d => { return dateParse(d[field].split(\"T\")[0]) });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1168,"value":"filing_dates = getColumn(\"filing_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1170,"value":"filing_date_Extent = getDateRange(filing_dates, \"filing_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"d3 = require(\"d3-geo@1\", \"d3-selection@1\", \"d3-fetch@1\", \"d3-tile@0.0\", \"d3-scale@1\", \"d3-time-format@1\", \"d3-array@1\", \"d3-format@1\", \"d3-transition@1\", \"d3-ease@1\", \"d3-collection@1\", \"d3-shape@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}