30:Tf79,md`I live in Brooklyn and enjoy tracking buildings to understand what's going on in the market. This notebook explores what I've found on a certain building around the corner from me. 550 Vanderbilt is a very interesting building for several reasons: * It's new construction part of a larger condominuim plan called Pacific Park that's in an up and coming (already came?) neighborhood in Brooklyn. * It has the coveted 421a tax exemption that means owners do not have to pay property taxes on their unit for 20 years, followed by a five year phase in. There have been several iterations of the 421a, and the most recent version has some [significant changes](https://www1.nyc.gov/site/hpd/developers/tax-incentives-421a-main.page) that could greatly affect a property value. (The changes requiring owners to be primary residence disincentivizes investment properties.) It's hard to tell exactly, but I believe 550 Vanderbilt qualified for the older version of the 421a, so it would not be affected by these recent changes. * The units are priced at a very high price-per-squarefoot that's significantly larger than the neighborhood average. * It's part of the [EB-5 international buyer program](https://visaeb-5.com/construction-550-vanderbilt-avenue/), which accounts for a significant number of units sold. (I believe its somewhere between 50-100 units, but it's hard to say.) This could explain why many of the units have been [put on the rental market](https://streeteasy.com/building/550-vanderbilt-avenue-brooklyn#tab_building_detail=3). * After selling well before the building opened, they have been dropping prices on most units. By comparing the Acris Deeds to the Schedule A records, we can see significant prices cuts going back the past year, which lines up to when a different broker, [Nest Seekers](https://www.nestseekers.com/), [took over the buildings sales](https://550vanderbilt.com/press/real-deal-forest-city-swaps-corcoran-nest-seekers-550-vanderbilt/). As of December 10th, which is [about two years after the building officially opened](https://greenlandusa.com/news/first-condominiums-pacific-park-brooklyn-set-welcome-residents), I calculate ${Math.round(numUnitsSold / numUnits * 100)}% of the units have sold. (Not including in-contract.) Before the building opened, they had sold ${Math.round(numUnitsSoldBeforeOpen / numUnits * 100)}%, which is likely driven by some amount of the EB5 sales. In the first year after opening, only ${Math.round(numUnitsFirstYear / numUnits * 100)}% sold, and then since Jan 1st, 2018, an additional ${Math.round(numUnitsSold2018 / numUnits * 100)}% units have sold, bringing the total to ${Math.round(numUnitsSold / numUnits * 100)}%. The uptick in sales in 2018 coincides with the price cuts and new brokers. The data used is all public : * Schedule A data is from [the condominium plan](https://therealdeal.com/wp-content/uploads/2016/12/CD15-0007_550-Vanderbilt-Condominium_Offering-Plan_Screened_Part1.pdf), which lists all the apartments available and what their initial offering prices was. I used an OCR and manually checked through each row to make sure it was entered correctly. It's possible some numbers got mixed up. * Tax assessment data is from [nyc.gov](https://www1.nyc.gov/site/finance/taxes/property-assessments.page) * Apartment deeds are from [Acris](https://a836-acris.nyc.gov), where you can see the contract date and the sale amount. There could be additional agreements related to sale that I'm unable to see through Acris, but comparing to sites like Streeteasy, that work with brokers and list the sale amount, the sale prices here seem correct. I manually went through each of these pdfs and entered the information on 240 apartments. Entirely possible I misentered some information. I've also been keeping up with [this blog](https://atlanticyardsreport.blogspot.com/) that talks a lot about 550 Vanderbilt and the larger Pacific Park project. `31:T10b2,Vanderbilt550 = { const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const circleLegendG = g.append("g") .attr("transform", `translate(${width - 150},${height + margin.bottom / 2})`); circleLegendSmall(circleLegendG) const legend = g.append("g"); legend.append("text") .style("font", "10px sans-serif") .text("# of Bedrooms") .attr("dy", -2) const legendG = legend .attr("transform", `translate(${width - 100}, 10)`) .selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (_,i) => `translate(${i * 16}, 0)`) legendG.append("rect") .attr("width", 14) .attr("height", 14) .style("fill", d => colorScale(d)); legendG.append("text") .text(d => d) .style("font", "10px sans-serif") .attr("dx", 7) .attr("dy", 11) .style("text-anchor", "middle") const yAxis = g.append("g") .call(d3.axisLeft(floorScale)) yAxis.select(".domain").remove(); yAxis.selectAll("text") .text(d => { let val = 'Penthouse'; if(d == 1) { val = '1st Floor' } else if (d == 2) { val = '2nd Floor' } else if (d == 3) { val = '3rd Floor' } else if (d > 3) { val = `${d}th Floor` } return val }) .attr("transform", (d, i) => { const data = nestedFloors.filter(e => e.key == d); const val = checkMetric(d, data[0]); const maxVal = sizeScale(val[val.length - 1][0][1]); const difference = width - maxVal return `translate(${difference/2},0)` }); yAxis.selectAll("line").remove(); const contractDate = svg.append("text") .attr("class", "contract-date") .attr("y", 70) .style("font", "20px sans-serif") .text(` ${formatTime(d3.max(combinedData, d => d.contract_date))}`) const percentSold = svg.append("text") .attr("class", "percent-sold") .attr("y", 40) .style("font", "28px sans-serif") .text(`${Math.round( (1 - combinedData.filter(d => d.purchase_price == "").length / combinedData.length) * 1000)/10}% Sold`) const floorGroups = g.selectAll(".floor") .data(nestedFloors) .enter().append("g") .attr("class", "floor") .attr("transform", (d,i) => { const val = checkMetric(d); const maxVal = sizeScale(val[val.length - 1][0][1]); const difference = width - maxVal return `translate(${difference/2},${floorScale(d.key)})` }) const apartments = floorGroups.selectAll(".apt") .data(d => checkMetric(d)) .enter().append("rect") .attr("class", "apt") .attr("width", d => sizeScale(d[0][1] - d[0][0])) .attr("height", floorScale.bandwidth()) .attr("x", (d, i) => sizeScale(d[0][0])) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") const apartmentCircles = floorGroups.selectAll(".apt-circle") .data(d => checkMetric(d)) .enter().append("circle") .attr("class", "apt-circle") .attr("cy", floorScale.bandwidth()/2) .attr("cx", (d, i) => sizeScale(d[0][0]) + sizeScale(d[0][1] - d[0][0])/2) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const val = (circleMetric == 'difference' ? aptLookup[d.key].difference : aptLookup[d.key].difference_percent) const delta = Math.abs(val) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) .style("stroke", "#fff") .style("stroke-width", .5) .style("fill", d => { if(aptLookup[d.key].purchase_price != "") { const val = (circleMetric == 'difference' ? aptLookup[d.key].difference : aptLookup[d.key].difference_percent) return circleColorScale(val) } }) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") return svg.node() }32:T4db,timeBrush = { const height = height2; const newMargins = {left: 50, right: 20, top: 10, bottom: 20} const svg = d3.select(createSVG(width + newMargins.left + newMargins.right, height + newMargins.top + newMargins.bottom)) const g = svg.append("g") .attr("transform", `translate(${newMargins.left},${newMargins.top})`); const xAxis = d3.axisBottom(timeScale); const salesScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(salesByDate, d => d.value)]) const area = d3.area() .curve(d3.curveNatural) .x(d => timeScale(parseMonthYear(d.key))) .y1(d => salesScale(d.value)) .y0(height) g.append("g") .attr("transform", `translate(0,${height})`) .call(xAxis); g.append("path") .datum(salesByDate.sort((a,b) => parseMonthYear(a.key) - parseMonthYear(b.key))) .attr("d", area) g.append("g") .attr("class", "x brush") .call(brush); const legend = g.append("g") .attr('transform',`translate(${width},0)`) legend.append('rect') .attr("x", -60) .attr("y", -10) .attr("width", 12) .attr("height", 12) legend.append("text") .attr("x", -45) .style("font","12px sans-serif") .text("Sales") return svg.node() }33:Tc25,sales = { const height = 500; const svg = d3.select(createSVG(width + 20 + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${20},${margin.top})`) const hoverText = svg.append("text") .attr("x", 10) .attr("y", 20) const priceScale = d3.scaleLinear() .domain([0, 3000000]) .range([height, 0]) g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(timeScale)).style("font", "14px sans-serif").select(".domain") .style("stroke", "lightgray") const yAxis = g.append("g") .attr("transform", `translate(${width}, 0)`) .call(d3.axisRight(priceScale).tickSize(-width).tickFormat(d3.format("$.2s")).ticks(5)); yAxis.style("font", "16px sans-serif") .select(".domain").remove() yAxis.selectAll("line") .style("stroke", "lightgray") yAxis.selectAll(".tick").filter((d,i) => i == 0).remove() const soldUnits = combinedData.filter(d => d.purchase_price > 0 & d.offering_price > 0); // Offering Price // g.selectAll(".apt-difference") // .data(soldUnits) // .enter().append("line") // .attr("class", "apt-difference") // .attr("x1", d => timeScale(d.contract_date)) // .attr("x2", d => timeScale(d.contract_date)) // .attr("y1", d => priceScale(d.offering_price)) // .attr("y2", d => priceScale(d.purchase_price)) // .style("stroke", "gray") // .style("stroke-width", .5) g.selectAll(".apt-difference") .data(soldUnits) .enter().append("rect") .attr("class", "apt-difference") .attr("x", d => timeScale(d.contract_date) - 2) .attr("y", d => priceScale(d.offering_price)) .attr("height", d => priceScale(d.purchase_price) - priceScale(d.offering_price)) .attr("width", 4) .attr("rx", 3) .attr("ry", 3) .style("stroke", "#000") .style("stroke-width", .5) .style("fill", d => { const val = (circleMetric == 'difference' ? d.difference : d.difference_percent) return circleColorScale(val) }) g.selectAll(".apt-offering") .data(soldUnits) .enter().append("circle") .attr("class", "apts") .attr("r", 4) .attr("cx", d => timeScale(d.contract_date)) .attr("cy", d => priceScale(d.offering_price)) .style("fill", d => colorScale(d.bedrooms)) .style('stroke', '#000') .style("stroke-width", .5) .on("mouseenter", d => { hoverText.text(`${d.unit} was listed at ${d.offering_price} and sold for ${d.purchase_price}`) }) // g.selectAll(".apt-sold") // .data(soldUnits) // .enter().append("circle") // .attr("class", "apts") // .attr("r", 3) // .attr("cx", d => timeScale(d.contract_date)) // .attr("cy", d => priceScale(d.purchase_price)) // .style("fill", d => { // const val = (circleMetric == 'difference' ? d.difference : d.difference_percent) // return circleColorScale(val) // }) // .style('stroke', '#000') return svg.node() }34:T1448,Rentals = { const svg = d3.select(createSVG(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`) const circleLegendG = g.append("g") .attr("transform", `translate(${width - 150},${height + margin.bottom / 2})`); circleLegendSmall(circleLegendG) const legend = g.append("g"); legend.append("text") .style("font", "10px sans-serif") .text("# of Bedrooms") .attr("dy", -2) const legendG = legend .attr("transform", `translate(${width - 100}, 10)`) .selectAll(".legend") .data(colorScale.domain()) .enter().append("g") .attr("transform", (_,i) => `translate(${i * 16}, 0)`) legendG.append("rect") .attr("width", 14) .attr("height", 14) .style("fill", d => colorScale(d)); legendG.append("text") .text(d => d) .style("font", "10px sans-serif") .attr("dx", 7) .attr("dy", 11) .style("text-anchor", "middle") svg.call(texture); const textureG = legend.append("g") .attr("transform", `translate(0, 20)`); textureG.append("rect") .attr("width", 14) .attr("height", 14) .style("stroke", "#000") .style("fill", texture.url()) textureG.append("text") .style("font", "10px sans-serif") .text("Rented") .attr("dy", 10.5) .attr("dx", 18) const yAxis = g.append("g") .call(d3.axisLeft(floorScale)) yAxis.select(".domain").remove(); yAxis.selectAll("text") .text(d => { let val = 'Penthouse'; if(d == 1) { val = '1st Floor' } else if (d == 2) { val = '2nd Floor' } else if (d == 3) { val = '3rd Floor' } else if (d > 3) { val = `${d}th Floor` } return val }) .attr("transform", (d, i) => { const data = nestedFloors.filter(e => e.key == d); const val = checkMetric(d, data[0]); const maxVal = sizeScale(val[val.length - 1][0][1]); const difference = width - maxVal return `translate(${difference/2},0)` }); yAxis.selectAll("line").remove(); const contractDate = svg.append("text") .attr("class", "contract-date") .attr("y", 90) .style("font", "18px sans-serif") .text(` ${formatTime(d3.max(combinedData, d => d.contract_date))}`) const percentSold = svg.append("text") .attr("class", "percent-sold") .attr("y", 40) .style("font", "28px sans-serif") .text(`${Math.round( (combinedData.filter(d => d.contract_date != undefined).length / combinedData.length) * 1000)/10}% Sold`) const percentRental = svg.append("text") .attr("class", "percent-rented") .attr("y", 67) .style("font", "20px sans-serif") .text(`${Math.round( (combinedData.filter(d => d.rental_data != undefined).length / combinedData.length) * 1000)/10}% Rented`) const floorGroups = g.selectAll(".floor") .data(nestedFloors) .enter().append("g") .attr("class", "floor") .attr("transform", (d,i) => { const val = checkMetric(d); const maxVal = sizeScale(val[val.length - 1][0][1]); const difference = width - maxVal return `translate(${difference/2},${floorScale(d.key)})` }) svg.call(textureLookup[0]); svg.call(textureLookup[1]); svg.call(textureLookup[2]); svg.call(textureLookup[3]); svg.call(textureLookup[4]); const apartments = floorGroups.selectAll(".apt") .data(d => checkMetric(d)) .enter().append("rect") .attr("class", "apt") .attr("width", d => sizeScale(d[0][1] - d[0][0])) .attr("height", floorScale.bandwidth()) .attr("x", (d, i) => sizeScale(d[0][0])) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => aptLookup[d.key].rental_data == undefined? colorScale(aptLookup[d.key].bedrooms) : textureLookup[aptLookup[d.key].bedrooms].url()) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") const apartmentCircles = floorGroups.selectAll(".apt-circle") .data(d => checkMetric(d)) .enter().append("circle") .attr("class", "apt-circle") .attr("cy", floorScale.bandwidth()/2) .attr("cx", (d, i) => sizeScale(d[0][0]) + sizeScale(d[0][1] - d[0][0])/2) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const val = (circleMetric == 'difference' ? aptLookup[d.key].difference : aptLookup[d.key].difference_percent) const delta = Math.abs(val) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) .style("stroke", "#fff") .style("stroke-width", .5) .style("fill", d => { if(aptLookup[d.key].purchase_price != "") { const val = (circleMetric == 'difference' ? aptLookup[d.key].difference : aptLookup[d.key].difference_percent) return circleColorScale(val) } }) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") return svg.node() }35:T7e7,timeBrushRental = { const height = height2; const newMargins = {left: 50, right: 20, top: 10, bottom: 20} const svg = d3.select(createSVG(width + newMargins.left + newMargins.right, height + newMargins.top + newMargins.bottom)) const g = svg.append("g") .attr("transform", `translate(${newMargins.left},${newMargins.top})`); const xAxis = d3.axisBottom(timeScale); const salesScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(salesByDate, d => d.value)]) const area = d3.area() .curve(d3.curveNatural) .x(d => timeScale(parseMonthYear(d.key))) .y1(d => salesScale(d.value)) .y0(height) g.append("path") .datum(salesByDate.sort((a,b) => parseMonthYear(a.key) - parseMonthYear(b.key))) .attr("d", area) const rentalScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(rentalsByDate, d => d.value)]) const rentalArea = d3.area() .curve(d3.curveNatural) .x(d => timeScale(parseMonthYear(d.key))) .y1(d => rentalScale(d.value)) .y0(height) g.append("g") .attr("transform", `translate(0,${height})`) .call(xAxis); g.append("path") .datum(rentalsByDate.sort((a,b) => parseMonthYear(a.key) - parseMonthYear(b.key))) .attr("d", rentalArea) .style('fill', '#00ccff') .style("fill-opacity", .5) .style("stroke", "#00ccff") g.append("g") .attr("class", "x brush") .call(brushRental); const legend = g.append("g") .attr('transform',`translate(${width},0)`) legend.append('rect') .attr("x", -60) .attr("y", -10) .attr("width", 12) .attr("height", 12) legend.append("text") .attr("x", -45) .style("font","12px sans-serif") .text("Sales") legend.append('rect') .attr("x", -60) .attr("y", 5) .attr("width", 12) .attr("height", 12) .style("fill","#00ccff") legend.append("text") .attr("y", 15) .attr("x", -45) .style("font","12px sans-serif") .text("Rentals") return svg.node() }36:T707,filterTime = (minDate, maxDate) => { viewof selectedRange.value = [minDate, maxDate]; const svg = d3.select(Vanderbilt550) svg.selectAll(".apt") .style("stroke", "#fff") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", unsoldOpacity) svg.selectAll(".apt-circle") .attr("r", 0) svg.selectAll(".apt-text") .style("fill-opacity", 0) svg.select(".contract-date") .text(formatTime(maxDate)); svg.select(".percent-sold") .text(`${Math.round( (combinedData.filter(d => d.contract_date != null & d.contract_date >= minDate & d.contract_date <= maxDate).length / combinedData.length) * 1000)/10}% Sold`) svg.selectAll(".apt") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date >= minDate & aptLookup[d.key].contract_date <= maxDate) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") svg.selectAll(".apt-circle") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date >= minDate & aptLookup[d.key].contract_date <= maxDate) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const delta = Math.abs(aptLookup[d.key].difference) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) }37:T971,filterRentalTime = (minDate, maxDate) => { viewof selectedRange.value = [minDate, maxDate]; const svg = d3.select(Rentals) svg.selectAll(".apt") .style("stroke", "#fff") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", unsoldOpacity) svg.selectAll(".apt-circle") .attr("r", 0) svg.selectAll(".apt-text") .style("fill-opacity", 0) svg.select(".contract-date") .text(formatTime(maxDate)); svg.select(".percent-sold") .text(`${Math.round( (combinedData.filter(d => d.contract_date != null & d.contract_date >= minDate & d.contract_date <= maxDate).length / combinedData.length) * 1000)/10}% Sold`) svg.select(".percent-rented") .text(`${Math.round( (combinedData.filter(d => d.rental_data != undefined & d.rental_date >= minDate & d.rental_date <= maxDate).length / combinedData.length) * 1000)/10}% Rented`) svg.selectAll(".apt") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date >= minDate & aptLookup[d.key].contract_date <= maxDate) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => { if(aptLookup[d.key].rental_data != undefined & aptLookup[d.key].rental_date >= minDate & aptLookup[d.key].rental_date <= maxDate) { return textureLookup[aptLookup[d.key].bedrooms].url() } else { return colorScale(aptLookup[d.key].bedrooms) } }) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") svg.selectAll(".apt-circle") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date >= minDate & aptLookup[d.key].contract_date <= maxDate) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const delta = Math.abs(aptLookup[d.key].difference) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) }38:T8a4,restart = () => { const svg = d3.select(Vanderbilt550) const minDate = d3.min(combinedData.filter(d => d.contract_date != null), d => d.contract_date) const maxDate = d3.max(combinedData, d => d.contract_date) svg.selectAll(".apt") .style("fill", "#000") .style("fill-opacity", 1) .style("stroke", "#fff"); svg.selectAll(".apt-circle") .attr("r", 0) svg.selectAll(".apt-text") .style("fill-opacity", 0) let currentDate = minDate; const t = d3.interval((elapsed) => { currentDate = addDays(currentDate, 1); svg.select(".contract-date") .text(formatTime(currentDate)); svg.select(".percent-sold") .text(`${Math.round( (combinedData.filter(d => d.contract_date != null & d.contract_date <= currentDate).length / combinedData.length) * 1000)/10}% Sold`) svg.selectAll(".apt") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date <= currentDate) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? ".35" : "1") svg.selectAll(".apt-circle") .filter(d => aptLookup[d.key].contract_date != null & formatTime(aptLookup[d.key].contract_date) == formatTime(currentDate)) .transition() .duration(1000) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const delta = Math.abs(aptLookup[d.key].difference) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) if(currentDate >= maxDate) { svg.selectAll(".apt") .transition() .duration(1000) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => colorScale(aptLookup[d.key].bedrooms)) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") t.stop(); } }, 50) }39:Tb7c,restartRentals = () => { const svg = d3.select(Rentals) const minDate = d3.min(combinedData.filter(d => d.contract_date != null), d => d.contract_date) const maxDate = d3.max(combinedData, d => d.contract_date) svg.selectAll(".apt") .style("fill", "#000") .style("fill-opacity", 1) .style("stroke", "#fff"); svg.selectAll(".apt-circle") .attr("r", 0) svg.selectAll(".apt-text") .style("fill-opacity", 0) let currentDate = minDate; const t = d3.interval((elapsed) => { currentDate = addDays(currentDate, 1); svg.select(".contract-date") .text(formatTime(currentDate)); svg.select(".percent-sold") .text(`${Math.round( (combinedData.filter(d => d.contract_date != null & d.contract_date <= currentDate).length / combinedData.length) * 1000)/10}% Sold`) svg.select(".percent-rented") .text(`${Math.round( (combinedData.filter(d => d.rental_data != undefined & d.rental_date <= currentDate).length / combinedData.length) * 1000)/10}% Rented`) svg.selectAll(".apt") .filter(d => aptLookup[d.key].contract_date != null & aptLookup[d.key].contract_date <= currentDate) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => { if(aptLookup[d.key].rental_data != undefined & aptLookup[d.key].rental_date <= currentDate) { return textureLookup[aptLookup[d.key].bedrooms].url() } else { return colorScale(aptLookup[d.key].bedrooms) } }) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? ".35" : "1") svg.selectAll(".apt-circle") .filter(d => aptLookup[d.key].contract_date != null & formatTime(aptLookup[d.key].contract_date) == formatTime(currentDate)) .transition() .duration(1000) .attr("r", d => { if(aptLookup[d.key].purchase_price != "") { const delta = Math.abs(aptLookup[d.key].difference) return circleScale(delta) > 10 ? 10 : circleScale(delta) } else { return 0 } }) if(currentDate >= maxDate) { svg.selectAll(".apt") .transition() .duration(1000) .style("stroke", d => aptLookup[d.key].purchase_price == "" ? "#fff" : "#000") .style("stroke-width", .5) .style("fill", d => { if(aptLookup[d.key].rental_data != undefined) { return textureLookup[aptLookup[d.key].bedrooms].url() } else { return colorScale(aptLookup[d.key].bedrooms) } }) .style("fill-opacity", d => aptLookup[d.key].purchase_price == "" ? unsoldOpacity : "1") t.stop(); } }, 50) }3a:T44e,circleLegend = (width, height) => { const margin = {top: 5, bottom: 20, left: 20, right: 20} const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`) const sampleSales = [-300000, -250000, -200000, -150000, -100000, -50000, -25000, 0, 25000, 50000, 100000, 150000, 200000, 250000, 300000] const saleScale = d3.scaleLinear() .domain(d3.extent(sampleSales)) .range([0, width]) g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(saleScale).tickFormat(d3.format("$.0s"))) .select(".domain") .style('stroke', "#ccc") g.selectAll("circle") .data(sampleSales) .enter().append("circle") .attr("r", d => circleScale(Math.abs(d))) .attr("cx", d => saleScale(d)) .attr("cy", height/2) .style("fill", d => circleColorScale(d)) return svg.node() }3b:T668,combinedData = { const taxLookup = {}; const acrisLookup = {}; const rentalLookup = {}; const returnArray = []; taxData.forEach(d => { taxLookup[d.apt_no] = d }) acrisDeeds.forEach(d => { acrisLookup[d.unit] = d }) const nestedRental = d3.nest() .key(d => d['Unit'].replace("#","")) .entries(rentalData); nestedRental.forEach(d => { rentalLookup[d.key] = d }) console.log(rentalLookup) scheduleA.forEach(d => { d.sqft = +(d.sqft.toString().replace(",","")); d.bedrooms = +d.bedrooms; d.bathrooms = +d.bathrooms; d.balcony_sqft = +d.balcony_sqft; d.offering_price = +d.offering_price; d.purchase_price = +acrisLookup[d.unit].purchase_price; if(acrisLookup[d.unit].purchase_price != '') { d.difference = (+acrisLookup[d.unit].purchase_price - d.offering_price) d.difference_percent = (+acrisLookup[d.unit].purchase_price / d.offering_price - 1) } d.contract_date = parseTime(acrisLookup[d.unit].date); d.deed_link = acrisLookup[d.unit].deed_link; if(taxLookup[d.unit] != undefined) { d.tax_avt = taxLookup[d.unit].tax_avt; d.tax_ext = taxLookup[d.unit].tax_ext; d.tax_paid = taxLookup[d.unit].tax_paid; d.block = taxLookup[d.unit].block; d.lot = taxLookup[d.unit].lot; d.owner_name = taxLookup[d.unit].owner_name; } if(rentalLookup[d.unit] != undefined) { d.rental_data = rentalLookup[d.unit].values; d.rental_date = d3.min(rentalLookup[d.unit].values, d => parseTime(d.Date)) } else { d.rental_data = undefined } }) return scheduleA }3c:[] 2e:{"title":"550 Vanderbilt","cells":[{"id":0,"value":"md`# 550 Vanderbilt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"md`## How to Read This Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"md`I don't know what the name for this type of visualization would be, but you can think of it kind of like a horizontal stack bar chart. Each \"row,\" going from top to the bottom, represents a floor in the building. Each floor is then divied up between different apartments, which are sized by their square footage, colored by the number of bedrooms ${ d3.select(legend(colorScale, 100, 30, '')).style(\"display\", \"inline\").node()}, and have either transparent or full colors to represent whether the unit is sold or still available.\n\nIf an apartment is sold, it will have a vibrant filled color with a black border and a circle on top. The circles show whether that apartment sold for more or less than the original asking price. If it's large and red, then it sold for a significantly less. If it's large and green, then it sold for significantly more. Like this: ${d3.select(circleLegend(500, 30)).style(\"display\", \"inline\").node()}\n\nClick on ${playButton} to see how the building sold over time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"md`Tap or click on this chart below to see results for a custom timeframe. The area in the chart represents sales by day, so you can get a sense of when activity occured. Current selection is for ${formatTime(selectedRange[0])} to ${formatTime(selectedRange[1])}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1084,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"md`## Sales Over Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`Another way to view this data would be as a dot plot, with sales plotted over time. The dots (colored by the number of bedrooms ${ d3.select(legend(colorScale, 100, 30, '')).style(\"display\", \"inline\").node()}) show the listing price, and the red line shows the difference in offering price and sales price. You'll notice that in the beginning, sales prices matched offering prices, but over time, the gap became larger, with sales prices significantly less than the offering price.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"md`## Rentals Over Time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"\nmd`As noted earlier, an interesting factor of 550 Vanderbilt is the large number of units being converted to rentals. Streeteasy's Grant Long [wrote back in June 2018](https://streeteasy.com/blog/buying-a-home-to-rent-it-out-condos-rental-market/) that \"nearly 40 percent of the 191 condos sold at Brooklyn’s 550 Vanderbilt Ave. between late 2016 and early 2018 were listed for rent on StreetEasy within six months of closing.\" Here, I've taken the rental data from Streeteasy's page on 550 Vanderbilt and layered it over my previous visualization to show which units are being rented. Rented units are noted with a ${textureExample} texture`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"md`Click on ${playRentals} or using the custom timeframe filter below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1577,"value":"md`The results here are extreme. This high of a % of rentals for a brand new building is uncommon. It is likely that these purchases are investors rather than tenants. From what we know about the Eb5 sales, this was likely the source of these early sales. If the building didn't use this goverment program to get foreign investment, they would have likely had to sell more units at a much lower price. This would have had real implications on the housing market in the area, as the building becamse a trendsetter in price per square foot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"md`## Summary Stats`","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"numUnits = scheduleA.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":795,"value":"numUnitsSold = acrisDeeds.filter(d => d.deed_link != \"\").length","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"numUnitsSoldBeforeOpen = acrisDeeds.filter(d => d.deed_link != \"\" & parseTime(d.date) < openDate).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"numUnitsFirstYear= acrisDeeds.filter(d => d.deed_link != \"\" & parseTime(d.date) >= parseTime('12/08/2016') & parseTime(d.date) < parseTime('12/08/2017')).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"numUnitsSold2018 = acrisDeeds.filter(d => d.deed_link != \"\" & parseTime(d.date) >= parseTime('01/01/2018') & parseTime(d.date) < parseTime('12/31/2018')).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"openDate = parseTime('12/08/2016')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1740,"value":"md`## Interaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"function handleTimeframeDropdown(value) {\n \n const dropDownVal = this.value; \n \n let minDate = parseTime('01/01/2012'),\n maxDate = new Date();\n \n if(dropDownVal == 'pre_open') {\n maxDate = openDate\n } else if (dropDownVal == 'first_year') {\n minDate = parseTime('01/01/2017');\n maxDate = parseTime('12/31/2017');\n } else if (dropDownVal == 'second_year') {\n minDate = parseTime('01/01/2018');\n maxDate = parseTime('12/31/2018');\n }\n \n filterTime(minDate, maxDate)\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"timeframe = {\n let customDropdown = html``\n \n customDropdown.addEventListener('change', handleTimeframeDropdown)\n return customDropdown\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1735,"value":"md`#### Brushing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"brush = d3.brushX(timeScale)\n .extent([[0, 0], [width, height2]])\n .on(\"brush end\", brushed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"function brushed() {\n let extent = d3.event.selection.map(timeScale.invert, timeScale);\n filterTime(extent[0], extent[1])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1570,"value":"brushRental = d3.brushX(timeScale)\n .extent([[0, 0], [width, height2]])\n .on(\"brush end\", brushedRental)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"function brushedRental() {\n let extent = d3.event.selection.map(timeScale.invert, timeScale);\n filterRentalTime(extent[0], extent[1])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"md`#### Buttons\n\nNot sure why these are hidden in Observable...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"playButton = {\n let button = html``\n button.addEventListener('click', restart)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"playRentals = {\n let button = html``\n button.addEventListener('click', restartRentals)\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"maxSize = {\n let returnNum = 0;\n nestedFloors.forEach(floor => {\n if(metric == 'sqft') {\n const testNum = floor.value.stacks[floor.value.stacks.length - 1][0][1]\n if(testNum > returnNum) { returnNum = testNum }\n } else {\n const testNum = floor.value.priceSeries[floor.value.priceSeries.length - 1][0][1]\n if(testNum > returnNum) { returnNum = testNum }\n }\n })\n\n return returnNum\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"floorScale = d3.scaleBand()\n .range([height, 0])\n .domain(nestedFloors.map(d => d.key))","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"sizeScale = d3.scaleLinear()\n .domain([0, maxSize])\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"colorScale = d3.scaleOrdinal(d3.schemeSet2)\n .domain([0, 1, 2, 3, 4])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"textureLookup = ({\"0\": textures.lines().background(colorScale(0)).size(10), \n \"1\": textures.lines().background(colorScale(1)).size(10), \n \"2\": textures.lines().background(colorScale(2)).size(10),\n \"3\": textures.lines().background(colorScale(3)).size(10), \n \"4\": textures.lines().background(colorScale(4)).size(10)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"circleScale = {\n \n const sizeScale = d3.scaleLinear()\n .range([0, 10])\n \n if(circleMetric == 'difference') {\n sizeScale.domain([0, 300000])\n } else {\n sizeScale.domain([0, .2]) \n }\n \n return sizeScale\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"rentalScale = d3.scaleLinear()\n .range([5, 20])\n .domain(d3.extent(rentalData, d => +d['Rent'].replace(\"$\",\"\").replace(\",\",\"\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"circleColorScale = {\n \n const color = d3.scaleSequential(d3.interpolateRdYlGn);\n \n if(circleMetric == 'difference') {\n color.domain([-400000, 400000])\n } else {\n color.domain([-.2, .2]) \n }\n \n return color\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"rentalColorScale = d3.scaleSequential(d3.interpolateGreys)\n .domain(d3.extent(rentalData, d => +d['Rent'].replace(\"$\",\"\").replace(\",\",\"\")))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"timeScale = d3.scaleTime()\n .domain(d3.extent(combinedData, d => d.contract_date)).nice()\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"t2 = d3.scaleTime()\n .domain(d3.extent(combinedData, d => d.contract_date)).nice()\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1286,"value":"viewof selectedRange = new View([timeScale.domain()[0], timeScale.domain()[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"circleLegendSmall = (g) => {\n\n\nconst width = 200;\n const sampleSales = [-300000, -200000, -100000, 100000, 200000, 300000] \n const saleScale = d3.scaleLinear()\n .domain(d3.extent(sampleSales))\n .range([0, width])\n\n g.append(\"text\")\n .style(\"font\", \"10px sans-serif\")\n .attr(\"dy\", -25)\n .attr(\"dx\", -10)\n .text(\"Difference in closed price to asking price\");\n \n g.append(\"g\")\n .call(d3.axisBottom(saleScale).tickFormat(d3.format(\"$.0s\")).ticks(6))\n \n g.selectAll(\"circle\")\n .data(sampleSales)\n .join(\"circle\")\n .attr(\"r\", d => circleScale(Math.abs(d)))\n .attr(\"cx\", d => saleScale(d))\n .attr(\"cy\", -10)\n .style(\"fill\", d => circleColorScale(d))\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1535,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1073,"value":"md`I entered the schedule A data in November 2018.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"scheduleA = d3.tsv(\"https://gist.githubusercontent.com/pstuffa/a20a48c0e47e69cfeae1b8b0e6b30b44/raw/eb50c623d2223ea252b463489581cc6a593efec7/550%2520Schedule%2520A%2520-%2520Sheet1%2520(3).tsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`I downloaded the tax data in October 2018. It's quarterly records.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"taxData = buildingLookup(street, streetNumber, zip, borough)","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"acrisDeeds = d3.tsv(\"https://gist.githubusercontent.com/pstuffa/f09d5c61b52dbd7cc19f17fbd839bb76/raw/b4f70e2eb46c690c811350f2db42d2004ee3ae82/550%2520Vanderbilt%2520Deeds%2520-%2520Sheet1%2520(7).tsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"md`Rental data downloaded from [Streeteasy](https://streeteasy.com/building/550-vanderbilt-avenue-brooklyn#tab_building_detail=3) on November 28th, 2018.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"rentalData = d3.tsv(\"https://gist.githubusercontent.com/pstuffa/4466c01bfeb4b5c91a8cf577bf38c03c/raw/8b774870b8ea47f489a5134ac7f704bc8b681adf/550%2520Vanderbilt%2520Rentals%2520-%2520Sheet1.tsv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`There appears to be ${combinedData.filter(d => d.purchase_price == \"\").length} empty apartments, a ${Math.round(combinedData.filter(d => d.purchase_price == \"\").length / combinedData.length * 1000)/10}% vacancy rate.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"nestedFloors = d3.nest()\n .key(d => (d.unit.length == 3 ? d.unit[0] : (`${d.unit[0]}${d.unit[1]}`)))\n .rollup(leaves => {\n \n const sqftData = {};\n const priceData = {};\n const purchaseData = {};\n leaves.forEach(d => {\n sqftData[d.unit] = d.sqft\n priceData[d.unit] = d.offering_price\n purchaseData[d.unit] = d.purchase_price\n })\n \n const stack = d3.stack()\n .keys(leaves.map(d => d.unit))\n .order(d3.stackOrderNone)\n .offset(d3.stackOffsetNone);\n\n const sqftSeries = stack([sqftData]);\n const priceSeries = stack([priceData]);\n const purchaseSeries = stack([purchaseData]);\n \n return {\n stacks: sqftSeries,\n priceSeries: priceSeries,\n purchaseSeries: purchaseSeries,\n allData: leaves\n }\n })\n .entries(combinedData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"aptLookup = {\n\n const myMap = {};\n \n combinedData.forEach(d => myMap[d.unit] = d)\n \n return myMap\n \n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1185,"value":"salesByDate = {\n \n const dates = timeScale.domain(),\n minDate = dates[0],\n maxDate = dates[1];\n \n const nestedResults = d3.nest()\n .key(d => formatMonthYear(parseTime(d.date)))\n .rollup(leaves => leaves.length)\n .entries(acrisDeeds.filter(d => d.date != \"\"))\n \n // const returnArray = [];\n // for(let i = minDate; i <= maxDate; i = addDays(i, 1)) {\n // const val = nestedResults['$' + formatTime(i)]\n // returnArray.push({key: formatTime(i), value: (val == undefined ? 0 : val)})\n // }\n\n return nestedResults\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"rentalsByDate = {\n \n const dates = timeScale.domain(),\n minDate = dates[0],\n maxDate = dates[1];\n \n const groupResults = d3.nest()\n .key(d => d.Unit)\n .rollup(leaves => d3.min(leaves, d => parseTime(d.Date)))\n .entries(rentalData)\n \n const nestedResults = d3.nest()\n .key(d => formatMonthYear(d.value))\n .rollup(leaves => leaves.length)\n .entries(groupResults.filter(d => d.key != \"\"))\n \n// const returnArray = [];\n// for(let i = minDate; i <= maxDate; i = addDays(i, 1)) {\n// const val = nestedResults['$' + formatTime(i)]\n// returnArray.push({key: formatTime(i), value: (val == undefined ? 0 : val)})\n// }\n \n return nestedResults\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1536,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## Parameters and Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1776,"value":"checkMetric = (d, dataset) => {\n \n if(dataset == undefined) {\n dataset = d;\n }\n \n if(metric == 'sqft') {\n return dataset.value.stacks\n } else if(metric == 'purchase_price') {\n return dataset.value.purchaseSeries\n } else {\n return dataset.value.priceSeries\n } \n } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"viewof circleMetric = {\n const boroughs = select({\n options: [\n { label: \"Difference Amount\", value: \"difference\" },\n { label: \"Difference Percent\", value: \"difference_percent\" },\n ], \n value: \"sqft\"\n });\n return boroughs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof metric = {\n const boroughs = select({\n options: [\n { label: \"Square Foot\", value: \"sqft\" },\n { label: \"Offering Price\", value: \"offering_price\" },\n { label: \"Purchase Price\", value: \"purchase_price\" }\n ], \n value: \"sqft\"\n });\n return boroughs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"addDays = (date, days) => {\n const result = new Date(date);\n result.setDate(result.getDate() + days);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"parseTime = d3.timeParse(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"formatTime = d3.timeFormat(\"%m/%d/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1563,"value":"parseMonthYear = d3.timeParse(\"%m/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"formatMonthYear = d3.timeFormat(\"%m/%Y\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"margin = ({top: 20, bottom: 60, left: 60, right: 100})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"height2 = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"width = window.innerWidth * .85","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"unsoldOpacity = .25","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"street = 'VANDERBILT AVENUE'","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"streetNumber = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"zip = 11238","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof borough = {\n const boroughs = select({\n options: [\n { label: \"Manhattan\", value: \"1\" },\n { label: \"Bronx\", value: \"2\" },\n { label: \"Brooklyn\", value: \"3\" },\n { label: \"Queens\", value: \"4\" },\n { label: \"Staten Island\", value: \"5\"},\n ], \n value: \"3\"\n });\n return boroughs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { submit } from '@mbostock/more-deliberate-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {d3, legend, createSVG} from '@pstuffa/helpers'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {dropdown, select} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"import {buildingLookup} from '@pstuffa/nyc-bbl-lookup'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"textures = require('textures@1.2.0/dist/textures.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"texture = textures.lines().size(10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"textureExample = { const svg = d3.select(DOM.svg(30, 20))\n\n svg.call(texture);\n \n svg.append(\"rect\")\n .attr(\"width\", 30)\n .attr(\"height\", 20)\n .style(\"stroke\", \"#000\")\n .style(\"fill\", texture.url())\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"class View {\n constructor(value) {\n this._list = [];\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}