31:T32c5,jackOfAllCharts = (width, height, margin, data) => { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const label = g.append("text") .attr("transform", `translate(0, ${height / 2}) rotate(-90)`) .attr("dy", -margin.left + 10) .style("text-anchor", "middle") .style("font", "14px sans-serif") .text(labelLookup[Metric]); const xScale = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([0, width]) const hoodData = data.filter(d => d.areaType == 'neighborhood').filter(d => d.val > 0) const nestedHoods = d3.nest() .key(d => d.boro) .key(d => moment(d.date).format(dateGrouping)) .rollup(leaves => { return { iqr: calculateIQR(leaves, 'val'), total: d3.sum(leaves, d => d.val), values: leaves } }) .entries(hoodData) const values = []; nestedHoods.forEach(boro => { boro.values.forEach(month => { if(Metric == 'median_sales_price' || Metric == 'median_asking_price' || Metric == 'days_on_market') { values.push(month.value.iqr.firstQuartile) values.push(month.value.iqr.thirdQuartile) } else if(Metric == 'inventory' || Metric == 'recorded_sales' ) { values.push(month.value.total) } else { values.push(month.value.iqr.median) } }) }) const metricYDomain = { "inventory": [0, d3.max(values)], "sales_list_ratio": [d3.min(values), d3.max(values)], "recorded_sales": [0, d3.max(values)], "price_cut": [0, d3.max(values)], "median_sales_price": [0, d3.max(values)], "median_asking_price": [0, d3.max(values)], "days_on_market": [0, d3.max(values)], "price_index": [0, 1] } const yScale = d3.scaleLinear() .domain(metricYDomain[Metric]).nice() .range([height, 0]) const xAxis = g.append("g") .attr("class", "x axis") .style("font-size", "13px") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(xScale)) xAxis.select(".domain").style("stroke", "#f5f5f5") xAxis.selectAll("line").style("stroke", "gray") const yAxis = g.append("g") .attr("class", "y axis") .style("font-size", "13px") .call(d3.axisLeft(yScale).tickFormat(metricFormat[Metric]).tickSize(-width).ticks(4)) yAxis.select(".domain").remove() yAxis.selectAll("line").style("stroke", "gray").style("stroke-width", .25) if(yScale.domain()[0] == 0) { yAxis.selectAll("text").filter(d => d == 0).remove() } const areaStart = d3.area() .curve(d3.curveBasis) .x(d => xScale(moment(d.key, dateGrouping))) .y0(d => yScale(d.value.iqr.median)) .y1(d => yScale(d.value.iqr.median)) const area = d3.area() .curve(d3.curveBasis) .x(d => xScale(moment(d.key, dateGrouping))) .y0(d => yScale(d.value.iqr.firstQuartile)) .y1(d => yScale(d.value.iqr.thirdQuartile)) const sumAreaStart = d3.area() .curve(d3.curveBasis) .x(d => xScale(moment(d.key, dateGrouping))) .y0(height) .y1(height) const sumArea = d3.area() .curve(d3.curveBasis) .x(d => xScale(moment(d.key, dateGrouping))) .y0(height) .y1(d => yScale(d.value.total)) if(Metric == 'median_sales_price' || Metric == 'median_asking_price' || Metric == 'days_on_market') { const boroughArea = g.selectAll(".area") .data(nestedHoods) .join("path") .attr("class", "area") .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return areaStart(lineValues) }) .style("fill-opacity", .25) .style("fill", d => boroughColorScale(d.key)) .style("mix-blend-mode", "multiply") .on("mouseenter", function(d) { d3.selectAll(".area").transition().style("fill-opacity", .15) d3.selectAll(".line").transition().style("stroke-opacity", .15) d3.selectAll(".background") .filter(e => e.key == d.key) .transition().style("stroke-opacity", 1) d3.select(this).transition().style("fill-opacity", 1) d3.selectAll(".line") .filter(e => e.key == d.key) .transition().style("stroke-opacity", 1) }) .on("mouseleave", function() { d3.selectAll(".area").transition().style("fill-opacity", .25) d3.selectAll(".background") .transition().style("stroke-opacity", 0) d3.selectAll(".line") .transition().style("stroke-opacity", 1) }) .transition() .delay(100) .duration(2000) .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return area(lineValues) }) } else if(Metric == 'inventory' || Metric == 'recorded_sales') { const boroughArea = g.selectAll(".area") .data(nestedHoods.sort((a,b) => { const aMax = d3.sum(a.values, d => d.value.iqr.median); const bMax = d3.sum(b.values, d => d.value.iqr.median); return bMax - aMax })) .join("path") .attr("class", "area") .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return sumAreaStart(lineValues) }) .style("fill-opacity", .75) .style("fill", d => boroughColorScale(d.key)) .on("mouseenter", function() { d3.selectAll(".area").transition().style("fill-opacity", .25) d3.select(this).transition().style("fill-opacity", 1) }) .on("mouseleave", function() { d3.selectAll(".area").transition().style("fill-opacity", .75) }) .transition() .delay((d,i) => i * 1000) .duration(2000) .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return sumArea(lineValues) }) } const line = d3.line() .curve(d3.curveBasis) .x(d => xScale(moment(d.key, dateGrouping))) .y(d => yScale(d.value.iqr.median)) if(Metric != 'inventory' & Metric != 'recorded_sales') { const backgroundLines = g.selectAll(".background") .data(nestedHoods) .join("path") .attr("class", "background") .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return line(lineValues) }) .style("fill", "none") .style("stroke", "#fff") .style("stroke-opacity", 0) .style("stroke-width", 5) .style("pointer-events", "none") const boroughLines = g.selectAll(".line") .data(nestedHoods) .join("path") .attr("class", "line") .attr("d", d => { const lineValues = d.values.sort((a,b) => moment(a.key, dateGrouping) - moment(b.key, dateGrouping)) return line(lineValues) }) .style("fill", "none") .style("mix-blend-mode", "multiply") .style("stroke", d => boroughColorScale(d.key)) .style("stroke-width", 3) .style("pointer-events", "none") } const legendNote = g.append("g") .attr("transform", `translate(${width / 2}, ${-margin.top / 1.5})`) .append("text") .style("font", "10px sans-serif") .text("Click on rectangles to filter") .style("text-anchor", "middle") const legendData = boroughColorScale.domain() const legendDifference = (width - (100 * legendData.length)) / 2 const legends = g.append("g") .attr("transform", `translate(${legendDifference}, ${-10})`) .selectAll(".legend") .data(legendData) .join("g") .attr("class", "legend") .attr("transform", (d,i) => `translate(${i*100}, 0)`) .on("click", function(d) { legendNote.remove() const thisGroup = d3.select(this) const currentOpacity = +thisGroup.select("rect").style("fill-opacity") if(currentOpacity == 1) { thisGroup.select("rect") .transition() .style("fill-opacity", .25) .style("stroke", "none") d3.selectAll(".area") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 0) d3.selectAll(".background") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 0) d3.selectAll(".line") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 0) } else { thisGroup.select("rect") .transition() .style("fill-opacity", 1) .style("stroke", "#000") d3.selectAll(".area") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 1) d3.selectAll(".background") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 1) d3.selectAll(".line") .filter(e => e.key == d) .style("pointer-events", "none") .transition() .style("opacity", 1) } }) legends.append("text") .style("font", "14px sans-serif") .text(d => d) .style("fill", boroughColorScale) .style("pointer-events", "none") legends.append("rect") .attr("width", 20) .attr("height", 20) .attr("x", -22) .attr("y", -15) .style("fill", boroughColorScale) .style("fill-opacity", 1) .style("Stroke", "#000") const explanation = g.append("g") .attr("transform", `translate(${width}, ${-20})`) const explanationText = explanation.append("g") .attr("transform", `translate(2, 0)`) .append("foreignObject") .attr("width", margin.right) .attr("height", height) .append("xhtml:div") .style("margin", "5px") .style("text-align", "right") .style("Font", "12px sans-serif") .html(`

${labelLookup[Metric]}

${explanationLookup[Metric]}

`) if(Metric == 'median_sales_price' || Metric == 'median_asking_price' || Metric == 'days_on_market') { const exGraphicMargin = {top: 10, bottom: 10, left: 30, right: 50} const exGraphicWidth = margin.right - exGraphicMargin.left - exGraphicMargin.right const exGraphicHeight = 100 - exGraphicMargin.top - exGraphicMargin.bottom // const divContainer = html`

` const explanationGraphic = explanationText.append("svg") .attr("width", exGraphicWidth + exGraphicMargin.left + exGraphicMargin.right) .attr("height", exGraphicHeight + exGraphicMargin.top + exGraphicMargin.bottom) const explanationG = explanationGraphic.append("g") .attr("transform", `translate(${exGraphicMargin.left}, ${exGraphicMargin.top})`) const xExplain = d3.scaleLinear() .domain([1, 3]) .range([0, exGraphicWidth]) const yExplain = d3.scaleLinear() .domain([1, 10]) .range([exGraphicHeight, 0]) const areaExplain = d3.area() .curve(d3.curveBasis) .x(d => xExplain(d.x)) .y0(d => yExplain(d.y0)) .y1(d => yExplain(d.y1)) const lineExplain = d3.line() .curve(d3.curveBasis) .x(d => xExplain(d.x)) .y(d => yExplain(d.y)) explanationG.append("path") .datum([{x: 1, y0: 2, y1: 7}, {x: 2, y0: 3, y1: 5}, {x: 3, y0: 2, y1: 10}]) .style("fill", "#cdcdcd") .attr("d", areaExplain) explanationG.append("text") .style("font", "10px sans-serif") .text("25th%") .attr("dx", xExplain.range()[1] + 2) .attr("y", yExplain(2)) explanationG.append("text") .style("font", "10px sans-serif") .text("75th%") .attr("dx", xExplain.range()[1] + 2) .attr("y", yExplain(10)) explanationG.append("path") .datum([{x: 1, y: 5}, {x: 2, y: 4}, {x: 3, y: 6}]) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 2) .attr("d", lineExplain) explanationG.append("text") .style("font", "10px sans-serif") .text("Median") .attr("dx", xExplain.range()[1] + 2) .attr("y", yExplain(5.5)) } return svg.node() }32:Tbf5,explanationLookup = ({ "inventory": "The number of sales listings available on StreetEasy at any point during the month, quarter, and year. For example, if a unit was originally listed in February and sold in May, it would be included in the inventory number for the first quarter and the second quarter. This approach allows us to analyze what was available to buyers in a quarter – instead of an arbitrary moment or cut-off point.", "sales_list_ratio": "The final recorded sales price of a home divided by its initial asking price. A sale-to-list price ratio of 90 percent means the home sold for 90 percent of its initial asking price. The sale-to-list price ratio reported is the exact middle ratio among all homes that we are able to match a recorded sale with a listing on StreetEasy.", "recorded_sales": "The number of sales listings closed on StreetEasy at any point during the month/quarter/year. For example, if a unit was originally listed in February and sold in May, it would be included in the inventory number for the first quarter and the second quarter. This approach allows us to analyze what was available to buyers in a quarter – instead of an arbitrary moment or cut-off point.", "price_cut": "The exact middle price cut (as a percentage of total asking price) among all available listings on StreetEasy that received a price cut during the month/quarter/year.", "median_sales_price": "The exact middle sales price among all recorded sales prices of homes that closed during the month/quarter/year. In general, median values are more accurate than average values, which may be skewed by price outliers (a few sales that are extremely expensive or extremely inexpensive). In order to consider only arms-length transactions, we do not include foreclosures or sales prices lower than $10,000 in this calculation. Records on home sales transactions come from the New York City Department of Finance.", "median_asking_price": "The exact middle asking price among all asking prices of available listed homes during the month/quarter/year.", "days_on_market": "Days on market is the number of days from the date of creation of a listing on StreetEasy to the date the listing enters contract. Median Days on Market reflects the exact middle number of days on market among all listings available on StreetEasy that entered contract during a given month/quarter/year.", "price_index": "The StreetEasy Price Indices are monthly indices that track changes in resale prices of condo, co-op, townhouse and single-family homes, and are currently available for Manhattan, Brooklyn, and Queens. Each index uses a repeat-sales method of comparing the sales prices of the same properties since January 1995 in Manhattan and January 2005 in Brooklyn and Queens. The repeat-sales method allows each index to better capture changes in home prices by controlling for the composition of homes sold in a given month. Data on arms-length sales of homes comes from the New York City Department of Finance. " })33:T21e3,style_selectize = html` selectize.css `34:[] 2f:{"title":"StreetEasy - Compare Boroughs","cells":[{"id":0,"value":"md`# StreetEasy - Compare Boroughs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"md`Prototypes for views on our Data Dashboard tool. Don't read too much into the actual trends here, as it's not really accurate. (I'm just working off one dataset with monthly results and doing some faux-aggregation.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2170,"value":"md`I'm trying to make custom views depending on the metric you're looking at. I want to keep this simple and intuitive.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1943,"value":"viewof Metric = {\n const dd3 = select({\n title: \"Metric\",\n options: [\n { label: \"Inventory\", value: \"inventory\" },\n { label: \"Sales to List Ratio\", value: \"sales_list_ratio\" },\n { label: \"Recorded Sales\", value: \"recorded_sales\" },\n { label: \"Share with Price Cut\", value: \"price_cut\" },\n { label: \"Median Sales Price\", value: \"median_sales_price\" },\n { label: \"Median Asking Price\", value: \"median_asking_price\" },\n { label: \"Days on Market\", value: \"days_on_market\" }\n ],\n value: \"MM/YYYY\"\n });\n dd3.input.style.fontSize = \"12px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1715,"value":"jackOfAllCharts(width, height, {top: 50, bottom: 40, left: 60, right: 200}, filteredByType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1712,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1294,"value":"viewof dateGrouping = {\n const dd3 = select({\n title: \"Aggregate Results By\",\n options: [\n { label: \"Year\", value: \"YYYY\" },\n { label: \"Quarter\", value: \"Q-YYYY\" },\n { label: \"Month\", value: \"MM/YYYY\" },\n ],\n value: \"MM/YYYY\"\n });\n dd3.input.style.fontSize = \"12px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`## Data and Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {combinedData, areas, boroughs, areaToBorough} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2203,"value":"labelLookup = ({\n \"inventory\" : \"Inventory\",\n \"sales_list_ratio\" : \"Sales to List Ratio\",\n \"recorded_sales\" : \"Recorded Sales\",\n \"price_cut\" : \"Share of Listings with Price Cut\",\n \"median_sales_price\" : \"Median Sales Price\",\n \"median_asking_price\" : \"Median Asking Price\",\n \"days_on_market\": \"Days on Market\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2194,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2199,"value":"metricFormat = ({\n \"inventory\": d3.format(\".2s\"),\n \"sales_list_ratio\": d3.format(\".0%\"),\n \"recorded_sales\": d3.format(\".2s\"),\n \"price_cut\": d3.format(\".0%\"),\n \"median_sales_price\": d3.format(\"$.2s\"),\n \"median_asking_price\": d3.format(\"$.2s\"),\n \"days_on_market\": d3.format(\".2s\"),\n \"price_index\": d3.format(\".0%\")\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1717,"value":"types = d3.set(combinedData.map(d => d.type)).values()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1720,"value":"areaTypes = d3.set(combinedData.map(d => d.areaType)).values()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"filteredByType = combinedData.filter(d => d.type == Metric)","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"boroughColorScale = d3.scaleOrdinal(d3.schemeSet1)\n .range([\"#e41a1c\",\"#377eb8\",\"#4daf4a\",\"#ff7f00\", \"#984ea3\"])\n // .range([\"fb8072\", \"#80b1d3\", \"#fdb462\", \"#b3de69\", \"#bc80bd\"])\n .domain([\"Manhattan\",\"Brooklyn\",\"Queens\", \"Bronx\", \"Staten Island\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"parseTime = d3.timeParse(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(boroughs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1883,"value":"import {toggleButton} from '@pstuffa/toggle-button'","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"import {slider, date, input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"import {nycGeo} from '@pstuffa/streeteasy-neighborhood-filter'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"import {View} from '@pstuffa/selectize-js-synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`Adding ability to have default multiple values selected.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"$$ = {\n const $ = await require('jquery@^1.7.0');\n await require('selectize.js@0.12');\n return $;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"function select(config = {}) {\n let {value: formValue, title, description, submit, multiple, size, options} = config;\n if (Array.isArray(config)) options = config;\n options = options.map(o => typeof o === \"string\" ? {value: o, label: o} : o);\n const form = input({\n type: \"select\", title, description, submit, \n getValue: input => {\n const selected = Array.prototype.filter.call(input.options, i => i.selected).map(i => i.value);\n return multiple ? selected : selected[0];\n },\n form: html`\n \n `\n });\n form.output.remove();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"d3.selection.prototype.moveToFront = function() { \n return this.each(function(){\n this.parentNode.appendChild(this);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"require('bootstrap@4.1.3/dist/js/bootstrap').catch(() => window.bootstrap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1598,"value":"style_bootstrap = html`\nbootstrap.css\n\t\t\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1600,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1838,"value":"calculateIQR = (data, field) => {\n \n const min = d3.min(data, d => +d[field]);\n const max = d3.max(data, d => +d[field]);\n const median = d3.median(data, d => +d[field]);\n const firstQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .25);\n const thirdQuartile = d3.quantile(data.map(d => +d[field]).sort(d3.ascending), .75);\n \n return {min: min, max: max, median: median, firstQuartile: firstQuartile, thirdQuartile: thirdQuartile}\n \n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}