31:T553,{ const width = window.innerWidth * .95 const height = 300; const margin = {top: 10, bottom: 20, left: 30, right: 10} const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .attr("width", width) .attr("height", height) const nestedValues = d3.nest() .key(d => d.job_type) .rollup(leaves => leaves.length) .entries(BlockResponse); const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) const xScale = d3.scaleBand() .range([0, width]) .domain(['NB','A1','A2','A3','SG','DM']) .padding([.25]) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedValues, d => +d.value)]).nice(); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); g.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); const bar = g.selectAll("rect") .data(nestedValues) .enter().append("rect") .attr("x", d => xScale(d.key)) .attr("width", xScale.bandwidth()) .attr("y", d => yScale(d.value)) .attr("height", d => height - yScale(d.value)) .style("stroke", "#000") .style("fill", d => color(d.key)) return svg.node(); }32:T79e,{ const width = window.innerWidth*.9, height = 300, margin = {top: 0, bottom: 0, right: 0, left: 0} const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("overflow","visible") .style("padding","20px") const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) const nestedLots = d3.nest() .key(d => d.lot) .rollup(leaves => leaves.length) .entries(BlockResponse) .sort((a,b) => b.value - a.value) const root = d3.hierarchy({values: nestedLots}, 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([width, height]) .padding(1) .round(true) treemap(root); console.log(root); const leaf = g.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-opacity", 0.75) .style("stroke-width", .2) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .style("fill-opacity", .1) // .style("fill", d => { return color(d.data.key) }); leaf.append("clipPath") .attr("id", d => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", d => d.leafUid.href); leaf.append("text") .style("font", "12px sans-serif") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => `${d.data.key} : ${d.data.value} permits`.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:T556,{ const width = window.innerWidth * .95 const height = 300; const margin = {top: 10, bottom: 20, left: 30, right: 10} const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .attr("width", width) .attr("height", height) const nestedValues = d3.nest() .key(d => d.job_type) .rollup(leaves => leaves.length) .entries(BlockLotResponse); const g = svg.append("g") .attr('transform', `translate(${margin.left}, ${margin.top})`) const xScale = d3.scaleBand() .range([0, width]) .domain(['NB','A1','A2','A3','SG','DM']) .padding([.25]) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedValues, d => +d.value)]).nice(); g.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); g.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); const bar = g.selectAll("rect") .data(nestedValues) .enter().append("rect") .attr("x", d => xScale(d.key)) .attr("width", xScale.bandwidth()) .attr("y", d => yScale(d.value)) .attr("height", d => height - yScale(d.value)) .style("stroke", "#000") .style("fill", d => color(d.key)) return svg.node(); }34:[] 2f:{"title":"NYC Open Data - Building Permits Search","cells":[{"id":0,"value":"md`# NYC Open Data - Building Permits Search`","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":854,"value":"md`## Search by Street, Street Number and Zip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"viewof street = submit({value: 'VANDERBILT AVENUE'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"viewof streetNumber = submit({value: '550'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1199,"value":"viewof zip = submit({value: '11238'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"buildingLookupResponse = buildingLookup(street, streetNumber, zip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"md`__buildingPermitLookup(block, boro)__ will take a block and boro to find all the building permits tied to it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"buildingPermitLookup = (fBlock, fBoro) => {\n const transformedBlock = transformBlock(fBlock);\n const blockQuery = `$query=SELECT * WHERE block=='${transformedBlock}' AND borough=='${boroughLookup[fBoro]}' LIMIT 1000000`\n const response = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${blockQuery}`);\n \n if(response == undefined) {\n return 'no soup for you'\n } else {\n return response\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"md`Here is the result from a search for [500 Vanderbilt](https://550vanderbilt.com/):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"BlockResponse = buildingPermitLookup(buildingLookupResponse[0].block, buildingLookupResponse[0].boro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"md`By __Job Type: NB-New Building, A1, A2, A3- Alterations 1-3, SG-Sign, DM-??__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"md`By __Lot__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"md`### Add a Lot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"viewof lot = submit()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"md`__lotPermitLookup(lot, block, boro)__ will take a lot, block and boro to find all the building permits tied to it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"lotPermitLookup = (fLot, fBlock, fBoro) => {\n const transformedBlock = transformBlock(fBlock);\n const transformedLot = transformLot(fLot);\n const lotQuery = `$query=SELECT * WHERE lot=='${transformedLot}' AND block=='${transformedBlock}' AND borough=='${boroughLookup[fBoro]}' LIMIT 1000000`\n const response = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${lotQuery}`);\n \n if(response == undefined) {\n return 'no soup for you'\n } else {\n return response\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"BlockLotResponse = lotPermitLookup(lot, buildingLookupResponse[0].block, buildingLookupResponse[0].boro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1232,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"md`## Work on Owners`","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"TopOwnerQuery = `$query=SELECT owner_s_business_name, count(*) WHERE owner_s_business_name NOT IN ('N/A','NA', 'n/a', '-','NONE','.', 'N.A.','N.A','owner','Owner','OWNER','none','None', 'NOT APPLICABLE','na', 'SELF','INDIVIDUAL') GROUP BY owner_s_business_name ORDER BY count(*) DESC LIMIT 18`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"TopOwnerResponse = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${TopOwnerQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"\"'\" + TopOwnerResponse.map(d => d.owner_s_business_name).join(\"','\") + \"'\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"OwnerQuery = `$query=SELECT owner_s_business_name, job_type, count(*) WHERE owner_s_business_name IN (${'\"' + TopOwnerResponse.map(d => d.owner_s_business_name).join('\",\"') + '\"' }) GROUP BY owner_s_business_name, job_type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"OwnerResponse = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${OwnerQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1102,"value":"md`### Sample NYC Open Data Response`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"SampleQuery = \"$query=SELECT * WHERE borough=='BROOKLYN' LIMIT 10\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"SampleResponse = d3.json(`https://data.cityofnewyork.us/resource/83x8-shf7.json?${SampleQuery}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"transformBlock = (fBlock) => {\n let returnBlock = '';\n if(fBlock.length == 1) {\n returnBlock = `0000${fBlock}`\n } else if(fBlock.length == 2) {\n returnBlock = `000${fBlock}`\n } else if(fBlock.length == 3) {\n returnBlock = `00${fBlock}`\n } else if(fBlock.length == 4) {\n returnBlock = `0${fBlock}`\n } else {\n returnBlock = fBlock\n }\n \n return returnBlock \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"transformLot = (fLot) => {\n let returnLot = '';\n if(fLot.length == 1) {\n returnLot = `0000${fLot}`\n } else if(fLot.length == 2) {\n returnLot = `000${fLot}`\n } else if(fLot.length == 3) {\n returnLot = `00${fLot}`\n } else if(fLot.length == 4) {\n returnLot = `0${fLot}`\n } else {\n returnLot = fLot\n }\n return returnLot \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"boroughLookup = ({'1': 'MANHATTAN',\n '2': 'BRONX',\n '3': 'BROOKLYN',\n '4': 'QUEENS',\n '5': 'STATEN ISLAND'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"format = d3.format(\",d\")","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":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":849,"value":"import { submit } from '@mbostock/more-deliberate-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { createSVG, d3 } from \"@pstuffa/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"import {buildingLookup} from '@pstuffa/nyc-bbl-lookup'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}