2a: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() }2b: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 }))); }); }2c:[] 29:{"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` 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"},{"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"},{"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"},{"id":859,"value":"$2a","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":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"},{"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":1355,"value":"$2b","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":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"},{"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"},{"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":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([ \"A2\", \"NB\",\"A1\", \"A3\", \"SG\"])","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":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"},{"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"},{"id":1360,"value":"subgraphWidth = width*2/7","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"subgraphHeight = height*1/5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"subgraphMargin = ({top: 10, bottom: 10, left: 10, right: 10})\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"yearParse = d3.timeParse(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"formatDate = d3.timeFormat(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"xScale = d3.scaleTime()\n .range([0, subgraphWidth])\n .domain(filing_date_Extent)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1383,"value":"yScale = d3.scaleLinear()\n .range([subgraphHeight, 0])\n .domain([0, d3.max(countVals, d => d)])","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W2c","stdlib":"1","titling":"auto"}