31:Ta6f,ridgeLine = (data, fill) => { const width = 500, height = 700, margin = {top: 50, bottom: 20, right: 100, left: 300} const nestedData = d3.nest() .key(d => d.gis_nta_name) .sortValues((a, b) => moment(a.year_month) - moment(b.year_month)) .entries(data) // Sort Outer nestedData.sort((a,b) => { return d3.sum(b.values, d => d.count) - d3.sum(a.values, d => d.count) }) const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("background-color","#fff") .style("font", "8px sans-serif") .style("overflow", "visible") const xScale = d3.scaleTime() .range([0, width]) .domain(d3.extent(data, d => moment(d.year_month))); const neighborhoodScale = d3.scalePoint() .range([0, height]) .domain(d3.set(nestedData.map(d => d.key)).values()); const yScale = d3.scaleLinear() .range([0, -5 * neighborhoodScale.step()]) .domain([0, d3.max(data, d => +d.count)]); const area = d3.area() .x(d => xScale(moment(d.year_month))) .y0(d => yScale(+d.rolcount)) .y1(d => yScale.range()[0]) const g = svg.append("g") .attr("transform", (d,i) => `translate(${margin.left}, ${margin.top})`); g.append("g") .attr("class", "y axis") .call(d3.axisLeft(neighborhoodScale)); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale)); const areaGroups = g.selectAll(".groups") .data(nestedData) .enter().append("g") .attr("transform", d => `translate(0, ${neighborhoodScale(d.key) + 1})`) const areas = areaGroups.append("path") .attr("d", d => area(rollingAverage(d.values, rollingN))) .attr("class", "area") .style("fill", fill ? fill : "lightgray") .style("stroke", "#000") .style("stroke-width", .5) .on("mouseenter", d => { svg.selectAll(".y") .selectAll(".tick") .filter(e => { return e == d.key }) .select("text") .style("font-size", "12px"); const sel = d3.selectAll(".area") sel.filter(e => e == d) .style("fill", "#000"); }).on("mouseleave", d => { svg.selectAll(".y") .selectAll(".tick") .filter(e => { return e == d.key }) .select("text") .style("font-size", "8px"); svg.selectAll(".area") .style("fill", fill ? fill : "lightgray") .style("fill-opacity", 1); }); return svg.node() }32:T6a8,multiLine = (data) => { const div = html`

`; const width = 100, height = 50, margin = {top: 10, bottom: 10, right: 5, left: 5} const nestedData = d3.nest() .key(d => d.gis_nta_name) .entries(data); // Sort inner nestedData.forEach( row => { row.values.sort((a,b) => { return moment(a.year_month) - moment(b.year_month) }) }); // Sort Outer nestedData.sort((a,b) => { return d3.sum(b.values, d => d.count) - d3.sum(a.values, d => d.count) }) const svg = d3.select(div).selectAll("svg") .data(nestedData) .enter().append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("background-color","#fff") .style("font", "10px sans-serif"); const xScale = d3.scaleTime() .range([0, width]) .domain(d3.extent(data, d => moment(d.year_month))); const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data, d => +d.count)]); const lineGenerator = d3.area() .x(d => xScale(moment(d.year_month))) .y0(d => yScale(+d.count)) .y1(d => height) const g = svg.append("g") .attr("transform", (d,i) => `translate(${margin.left}, ${margin.top})`); g.append("g") .attr("class", "x axis") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale)) .selectAll("text").remove(); const line = g.append("path") .attr("d", d => { return lineGenerator(d.values) }) .style("fill", "lightgray") .style("stroke", "#000") .style("stroke-width", .25) return div }33:[] 2f:{"title":"NYC Building Permits API - Neighborhood Trends","cells":[{"id":0,"value":"md`# NYC Building Permits API - Neighborhood Trends`","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"md` Continuing [Part III](https://beta.observablehq.com/@pstuffa/nyc-building-permits-api-prospect-heights/2), I want to understand a bit better the trends in each neighborhood and who the big players are that get building permits across the city, using [DOB Permit Issuance](https://data.cityofnewyork.us/Housing-Development/DOB-Permit-Issuance/ipu4-2q9a), á la NYC Open Data.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"md`For this, I am using a [Ridgeline Plot](https://beta.observablehq.com/@mbostock/d3-ridgeline-plot), which is a variation on small multiples that, I believe, allows for easier comparison between plots. I've sorted the charts here by the number of permits issued, with neighborhoods with the most at the top.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1763,"value":"md`## Select a Borough`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1766,"value":"md`It's easy to filter the data on borough. I have the default set to Brooklyn, my hometown! Just note, it will take a second to load.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"viewof borough = select({\n options: ['MANHATTAN','BROOKLYN','QUEENS','BRONX','STATEN ISLAND'],\n value: \"BROOKLYN\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1567,"value":"md`## All Job Types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"md`We can see a general increase over the years in permits issued in Brooklyn. There seems to be a spike in 2008, perhaps right before the financial crisis, and again in 2015-2018.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"ridgeLine(NeighborhoodCount)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"viewof rollingN = slider({\n min: 0, \n max: 50, \n step: 1, \n value: 2, \n title: \"Smoothing\", \n description: \"The number of records you want to get the average for.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1799,"value":"md`If you want to adjust the smoothing. Move this slowly, as it takes a while to compute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1703,"value":"md`## By Job Type`","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":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":1714,"value":"viewof job_type = select({\n title: \"Select Data\",\n options: color.domain(),\n value: \"A2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1692,"value":"ridgeLine(JobTypeCount, color(job_type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1784,"value":"md`You'll notice interesting trends when you change for different neighborhoods and job types. (Look at Queens for New Buildings!)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"NeighrborhoodCountQuery = `$query=SELECT gis_nta_name, date_trunc_ym(filing_date) as year_month, count(*) WHERE borough=='${borough}' GROUP BY gis_nta_name, date_trunc_ym(filing_date) LIMIT 50000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"NeighborhoodCount = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${NeighrborhoodCountQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"JobTypeCountQuery = `$query=SELECT gis_nta_name, date_trunc_ym(filing_date) as year_month, count(*) WHERE borough=='${borough}' AND job_type=='${job_type}' GROUP BY gis_nta_name, date_trunc_ym(filing_date) LIMIT 50000`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1697,"value":"JobTypeCount = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${JobTypeCountQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"color = d3.scaleOrdinal().range(d3.schemeSet3) \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":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":"import {createSVG, d3} from '@pstuffa/helpers'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"dateParse = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1510,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"formatDate = d3.timeFormat(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1788,"value":"rollingAverage = (data, nPoints) => {\n \n data.forEach((row,index) => {\n row.rolcount = d3.mean(data.filter((d,i) => { return i <= (index + nPoints) & i >= (index - nPoints) }), d => d.count);\n })\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"import {slider, radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}