35:null 36:["$","title",null,{"children":"NYC Building Permits API - Prospect Heights ✌️ | Paul Buffa | Observable"}] 3c:Tae9,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("g") .selectAll(".building") .data(d => d.data.buildings.features) .enter().append("path") .attr("class", "building") .attr("d", (d) => { return path(d) }) .style("fill", (d) => { if(d.properties.addr_street != undefined) { let val = buildingLookup[2018][`${d.properties.addr_street.toLowerCase()} ${d.properties.addr_housenumber}`]; d.color = (val!= undefined ? color(val) : "#bbb"); return d.color } else { d.color = "#aaa"; return d.color } }) .style("stroke", d => d.color) .style("fill-opacity", .25); const subgraph = svg.append("g") .attr("id", "subgraph") .attr("transform", `translate(5,${height-subgraphHeight-(subgraphMargin.top+subgraphMargin.bottom)-5})`); subgraph.append("rect") .attr("width", subgraphWidth + subgraphMargin.left + subgraphMargin.right) .attr("height", subgraphHeight + subgraphMargin.top + subgraphMargin.bottom) .style("fill", "#fff") .style("stroke", "#aaa") const subgraphG = subgraph.append("g") .attr("transform", `translate(${subgraphMargin.left}, ${subgraphMargin.top})`); const dateText = svg.append("text") .attr("id", "dateText") .attr("y", 48) .attr("x", width - 26) .style("text-anchor", "end") .style("font-size", "48px") .text(2018); const line = subgraphG.selectAll("path") .data(nestedByDate) .enter().append("path") .attr("class", "subgraphLines") .attr("d", d => lineGenerator(d.values)) .style("fill", "none") .style("stroke", d => color(d.key)) const bubbles = svg.selectAll(".bubble") .data(ProspectHeights.filter((d) => { let val = tileBuildingLookup[`${d.street_name.toLowerCase().replace("st ", "saint ")} ${d.house__}`]; return val == undefined ? true : false; })) .enter().append("circle") .attr("class", "bubble") .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", 2) return svg.node() }3d:T7c1,restart = () => { const svg = d3.select(bubbleMap) const subgraphWidth = width*2/7; const subgraphHeight = height*1/5; const subgraph = svg.select("#subgraph"); const subgraphLines = svg.selectAll(".subgraphLines"); subgraphLines.attr("d", e => lineGenerator(e.values.filter(d => { return +d.key <= 1990 }))); const buildings = d3.selectAll(".building"); const bubbles = d3.selectAll(".bubble"); buildings.style("fill", "#bbb").style("stroke", "none"); bubbles.attr("r", 0); const dateText = svg.select("#dateText"); distinctDates.forEach((date, i) => { dateText.transition() .duration(100) .delay(i * 1000) .text(date); bubbles.filter(d => { return d.filing_date.split("T")[0].split("-")[0] == date; }).transition() .duration(500) .delay(i * 1000) .style("fill", (d) => color(d.job_type)) .style("fill-opacity", .25) .attr("r", 5) .transition() .duration(500) .attr("r", 2) buildings.filter((d) => { if(d.properties.addr_street != undefined) { let val = buildingLookup[date][`${d.properties.addr_street.toLowerCase()} ${d.properties.addr_housenumber}`]; return val == undefined ? false : true; } else { return false } }).transition() .duration(500) .delay(i * 1000) .style("fill", (d) => { if(d.properties.addr_street != undefined) { let val = buildingLookup[date][`${d.properties.addr_street.toLowerCase()} ${d.properties.addr_housenumber}`]; d.color = (val!= undefined ? color(val) : "#bbb"); return d.color } else { d.color = "#aaa"; return d.color } }) .style("stroke", d => d.color) subgraphLines .transition() .duration(500) .delay(i * 1000) .attr("d", e => lineGenerator(e.values.filter(d => { return +d.key <= +date }))); }); }3e:[] 3a:{"id":"70919b3dd7d34673","slug":"nyc-building-permits-api-prospect-heights/2","title":"NYC Building Permits API - Prospect Heights ✌️","thumbnail":"b16c1d2a22477e9d0a749a6047cc9917bec38a88a1605977d9712918d7d06175","access_level":"public","create_time":"$D2018-07-22T13:42:05.267Z","update_time":"$D2018-10-10T00:40:41.335Z","view_time":null,"first_public_time":"$D2018-07-22T21:29:43.164Z","has_unpublished_edits":null,"fork":{"id":"c0fddb249aceb64a","slug":"nyc-building-permits-api-prospect-heights","title":"NYC Building Permits API - Prospect Heights","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"stars":2,"starred":false,"owner":{"type":"team","id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":"starter_2024","bio":""},"version":1464,"publish_version":1464,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"bio":""}],"members":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"b636bed6e0329870","slug":"nyc-open-data","title":"NYC Open Data","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"type":"notebook","body":{"titling":"auto","title":"NYC Building Permits API - Prospect Heights ✌️","cells":[{"id":0,"value":"md`# NYC Building Permits API - Prospect Heights ✌️`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"import { nyc } from \"@pstuffa/making-maps-with-nyc-open-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"md` Continuing [part I](https://beta.observablehq.com/@pstuffa/nyc-building-permits-api-prospect-heights), I connected permits to specific buildings from the Nextzen tiles. Not a perfect match. (I need to do some work on matching things like 'St.' with 'Street'.) Permits that don't match to the builing are rendered as circles on the road infront of the building.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`__Permits colored by Job Type, which is based on the DOB Job Codes:__
\n__NB-New Building, A1, A2, A3- Alterations 1-3, SG-Sign.__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`\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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"ProspectHeightsQuery = \"$query=SELECT * WHERE borough=='BROOKLYN' and gis_nta_name=='Prospect Heights' LIMIT 50000\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"buildingLookup = {\n \n let mapOB = {};\n distinctDates.forEach((year) => {\n let subOB = {}\n ProspectHeights.forEach((row) => {\n if(+row.filing_date.split(\"-\")[0] == year) {\n subOB[`${row.street_name.toLowerCase().replace(\"st \", \"saint \")} ${row.house__}`] = row.job_type;\n }\n });\n mapOB[year] = subOB;\n });\n return mapOB \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"tileBuildingLookup = {\n \n let mapOB = {};\n \n tiles.forEach((tile) => {\n tile.data.buildings.features.filter(d => d.properties.addr_street != undefined).forEach((d) => {\n mapOB[`${d.properties.addr_street.toLowerCase()} ${d.properties.addr_housenumber}`] = true;\n })\n });\n \n return mapOB \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"ProspectHeights = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${ProspectHeightsQuery}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"function filter({features}, test) {\n return {type: \"FeatureCollection\", features: features.filter(test)};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"color = d3.scaleOrdinal().range(d3.schemeCategory10) \n .domain([ \"A2\", \"NB\",\"A1\", \"A3\", \"SG\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1397,"value":"distinctDates = d3.set(ProspectHeights.map(d => d.filing_date.split(\"T\")[0].split(\"-\")[0])).values().sort(d3.sortAscending)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"filing_dates = getColumn(\"filing_date\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"filing_date_Extent = getDateRange(filing_dates, \"filing_date\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"subgraphWidth = width*2/7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"subgraphHeight = height*1/5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"subgraphMargin = ({top: 10, bottom: 10, left: 10, right: 10})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"yearParse = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"formatDate = d3.timeFormat(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"xScale = d3.scaleTime()\n .range([0, subgraphWidth])\n .domain(filing_date_Extent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"nestedByDate = d3.nest()\n .key(d => d.job_type)\n .key(d => d.filing_date.split(\"T\")[0].split(\"-\")[0])\n .rollup(leaves => leaves.length)\n .entries(ProspectHeights.sort((a,b) => { return dateParse(a.filing_date.split(\"T\")[0]) - dateParse(b.filing_date.split(\"T\")[0]) }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"countVals = {\n let vals = [];\n nestedByDate.forEach(job_type => {\n job_type.values.forEach(date => {\n vals.push(date.value);\n })\n })\n return vals \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1383,"value":"yScale = d3.scaleLinear()\n .range([subgraphHeight, 0])\n .domain([0, d3.max(countVals, d => d)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1386,"value":"lineGenerator = d3.line()\n .x(d => xScale(yearParse(d.key)))\n .y(d => yScale(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3b:"$3a:body"