31:T642,barChart = { const width = 600; const height = 400; const margin = ({top: 50, right: 20, bottom: 20, left: 20}); const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("align","left") .attr("width", width) .attr("height", height) const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) const xScale = d3.scaleBand() .range([0, width]) .domain(d3.set(BrooklynCount.map(d => d.gis_nta_name)).values()) .padding(.1) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(BrooklynCount, d => +d.count)]); const legend = g.append("text") .attr("x", 10) .attr("y", 10); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) .selectAll("text").remove(); g.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); g.selectAll("rect") .data(BrooklynCount.sort((a,b) => +a.count - +b.count)) .enter().append("rect") .attr("x", d => xScale(d.gis_nta_name)) .attr("y", d => yScale(d.count)) .attr("width", xScale.bandwidth()) .attr("height", d => height - yScale(d.count)) .on("mouseenter", function(d) { d3.select(this).style("fill","red") legend.text(`${d.gis_nta_name} - ${d.count} permits`); }) .on("mouseleave", function(d) { d3.select(this).style("fill","black") legend.text(""); }) return svg.node(); }32:T7a2,treemap = { const treemapWidth = window.innerWidth, treemapHeight = 500; const svg = d3.select(DOM.svg(treemapWidth, treemapHeight)) .style("align","left") .attr("width", treemapWidth) .attr("height", treemapHeight) const nestedData = d3.nest() .key(d => d.gis_nta_name) .key(d => d.job_type) .rollup((d) => { return d3.sum(d, (d) => d.count) }) .entries(NeighborhoodJobType); const root = d3.hierarchy({values: nestedData}, function(d) { return d.values; }) .sum(function(d) { return d.value; }) .sort(function(a, b) { return b.value - a.value; }); const treemap = d3.treemap() .size([treemapWidth, treemapHeight]) .padding(1) .round(true) treemap(root); const leaf = svg.selectAll("g") .data(root.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x0},${d.y0})`); leaf.append("rect") .attr("id", d => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", d => { return d.depth == 2 ? color(d.data.key) : "none"; }) .attr("fill-opacity", 0.6) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); let firstCheck = {}; leaf .filter((d) => { if(firstCheck[d.parent.data.key] == undefined) { firstCheck[d.parent.data.key] = 0; return true } else { return false } }) .append("text") .style("font", "12px sans-serif") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.parent.data.key.split(/(?=[A-Z][^A-Z])/g)) .enter().append("tspan") .attr("x", 3) .attr("y", (d, i, nodes) => (i === nodes.length - 1) * 3 + 18 + (i - 0.5) * 12) .text(d => d); return svg.node(); }33:T8b1,multline = { const width = 700; const height = 400; const margin = ({top: 50, right: 20, bottom: 20, left: 0}); const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("align","left") .attr("width", width) .attr("height", height) const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) const nestedData = d3.nest() .key(d => d.gis_nta_name) .entries(NeighborhoodFilingDate); console.log(nestedData) const dateParse = d3.timeParse("%Y-%M-%d"); const xScale = d3.scaleTime() .domain(d3.extent(NeighborhoodFilingDate, d => dateParse(d.year_month.split('T')[0]))) .range([0, width]); console.log(xScale.domain()) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(NeighborhoodFilingDate, d => +d.count)]); const lineGenerator = d3.line() .curve(d3.curveMonotoneX) .x(d => xScale(dateParse(d.year_month.split('T')[0]))) .y(d => yScale(+d.count)); const legend = g.append("text") .attr("x", 10) .attr("y", 10); g.append("g") .style("font", "14px sans-serif") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) g.append("g") .style("font", "14px sans-serif") .attr("class", "y axis") .call(d3.axisLeft(yScale)); // const lines = g.selectAll("g") // .data(nestedData) // .enter().append("g") // .attr("class", d => d.key) g.selectAll("path") .data(nestedData) .enter().append("path") .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 1) .style("opacity", .5) .attr("d", d => lineGenerator(d.values.sort((a,b) => { return dateParse(a.year_month.split('T')[0]) - dateParse(b.year_month.split('T')[0]) }))) .on("mouseenter", function(d) { d3.select(this).style("stroke", "red"); legend.text(d.key); }).on("mouseleave", function() { d3.select(this).style("stroke", "#000"); legend.text(""); }) return svg.node(); }34:T747,singleLine = { const width = 700; const height = 200; const margin = ({top: 50, right: 20, bottom: 20, left: 0}); const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("align","left") .attr("width", width) .attr("height", height) const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) const nestedData = d3.nest() .key(d => d.gis_nta_name) .entries(FilingDate); const dateParse = d3.timeParse("%Y-%M-%d"); const xScale = d3.scaleTime() .domain(d3.extent(FilingDate, d => dateParse(d.year_month.split('T')[0]))) .range([0, width]); console.log(xScale.domain()) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(FilingDate, d => +d.count)]); const lineGenerator = d3.line() .x(d => xScale(dateParse(d.year_month.split('T')[0]))) .y(d => yScale(d.count)); const legend = g.append("text") .attr("x", 10) .attr("y", 10); g.append("g") .style("font", "14px sans-serif") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) g.append("g") .style("font", "14px sans-serif") .attr("class", "y axis") .call(d3.axisLeft(yScale)); const lines = g.append("g") .datum(FilingDate) lines.append("path") .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 2) .style("opacity", .5) .attr("d", d => lineGenerator(d.sort((a,b) => { return dateParse(a.year_month.split('T')[0]) - dateParse(b.year_month.split('T')[0]) }))) .on("mouseenter", function() { d3.select(this).style("stroke", "red") }) return svg.node(); }35:[] 2f:{"title":"NYC Building Permits API","cells":[{"id":0,"value":"md`# NYC Building Permits API`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { createSVG, d3 } from \"@pstuffa/helpers\"","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. The good stuff right here. Let's use Observable as a way to explore the API.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"sample1000 = d3.json(\"https://data.cityofnewyork.us/resource/83x8-shf7.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`The API by default returns max 1,000 rows, and we can bump it up to 50,000, but we can also do some filtering and aggregation using [SoQL](https://dev.socrata.com/docs/functions/#2.1,). This query pulls a count of permits issued for each neighborhood in brooklyn.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"BrooklynCountQuery = \"$query=SELECT gis_nta_name, count(*) WHERE borough=='BROOKLYN' GROUP BY gis_nta_name ORDER BY count\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"BrooklynCount = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${BrooklynCountQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`There is a lot of data. There were ${BrooklynCount.filter(d => d.gis_nta_name == \"Prospect Heights\")[0].count} permits issued for just Prospect Heights, a relatively small neighborhood in Brooklyn.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`### Count of Permits Issued by Brooklyn Neighborhood`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`Ok, lets try to understand a bit more what goes into these numbers. Let's look at permits issued by job type. NYC Open Data has this metadata on job type:\n\n__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":164,"value":"NeighborhoodJobTypeQuery = \"$query=SELECT gis_nta_name, job_type, count(*) WHERE borough=='BROOKLYN' GROUP BY gis_nta_name, job_type\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"NeighborhoodJobType = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${NeighborhoodJobTypeQuery}`)","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":516,"value":"md`### Count of Permits by Neighborhood and Job Type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"md`[D3 Treemap](https://beta.observablehq.com/@mbostock/d3-treemap#treemap)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`__Job Type: NB-New Building, A1, A2, A3- Alterations 1-3, SG-Sign__`","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\nCould ALT2 be those types of reconstructions that happen like [this](https://nypost.com/2018/07/16/kushner-family-accused-of-pushing-out-low-rent-tenants/)? Will need to dig into this more...\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`### Permits Issued by Year - Filing Date`","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"md`There are a number of date fields in the data. Filing date seems like a good option to see when permits were submitted to the DOB.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"NeighborhoodFilingDateQuery = \"$query=SELECT gis_nta_name, date_trunc_y(filing_date) as year_month, count(*) WHERE borough=='BROOKLYN' GROUP BY gis_nta_name, date_trunc_y(filing_date) limit 50000\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":554,"value":"NeighborhoodFilingDate = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${NeighborhoodFilingDateQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`There looks to be an interesting trend we're seeing between 2006 and 2017. You can see a dip in permits during the financial crisis, and a gradual buildup since 2010 for most neighborhoods.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"FilingDateQuery = \"$query=SELECT date_trunc_y(filing_date) as year_month, count(*) WHERE borough=='BROOKLYN' GROUP BY date_trunc_y(filing_date) limit 50000\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"FilingDate = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${FilingDateQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`If we aggregate for all neighborhoods, we can see that we've hit our high in permits filed in 2017. Could be that this is artificial given how the data was entered. Will need to look into that more.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"md`More to come in future notebooks...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"dobrundates = getColumn(\"dobrundate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"job_start_dates = getColumn(\"job_start_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"filing_dates = getColumn(\"filing_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"dobrundateExtent = getDateRange(dobrundates, \"dobrundate\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"job_start_dateExtent = getDateRange(job_start_dates, \"job_start_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":649,"value":"filing_date_Extent = getDateRange(filing_dates, \"filing_date\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"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":230,"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":499,"value":"format = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}