2d:null 2e:["$","title",null,{"children":"StreetEasy - Residential Sales | Dominic Toth | Observable"}] 33:Tb55,table = (data, width, height) => { const div = d3.select(html`

`) .style("overflow-x","scroll"); const table = div.append("table") const headers = table.append("tr") const rows = table.selectAll(".row") .data(data) .join("tr") .attr("class", "row"); const sparklineWidth = 100, sparklineHeight = 40, margin = {top: 20, bottom: 5, left: 30, right: 35} headers.append("th") .text(""); rows.append("td") .text(d => d.key) .style("color", d => boroughColorScale(d.values[0].values[0].boro)) .style("font-weight", 400); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Sales Inventory"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'inventory')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'sum')); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Recorded Sales"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'recorded_sales')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'sum')); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Asking Price"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'median_asking_price')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median', true)); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Sales Price"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'median_sales_price')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median', true)); headers.append("th") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .style("text-align", "center") .text("Median Days on Market"); rows.append("td") .style("width", `${sparklineWidth + margin.left + margin.right}px`) .append(d => sparkline(d.values.filter(e => e.key == 'days_on_market')[0].values, 'value', sparklineWidth, sparklineHeight, margin, 'median')); return div.node() }34:T1838,sparkline = (data, column, width, height, margin, aggregate, money = false) => { const nestedData = d3.nest() .key(d => moment(d.date).format(dateGrouping)) .rollup(leaves => d3[aggregate](leaves, d => d.val)) .entries(data.filter(d => d.date >= moment(minDate) & d.date <= moment(maxDate))) const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .style("width", width + margin.left + margin.right) .style("height", height + margin.top + margin.bottom) const g = svg.append("g") .attr("transform",`translate(${margin.left},${margin.top})`) const yScale = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(nestedData, d => d[column])]).nice(); const timeScale = d3.scaleTime() .range([0, width]) .domain(d3.extent(nestedData, d => moment(d.key, dateGrouping))); const hoverBarScale = d3.scaleBand() .range([0, width]) .domain(d3.set(nestedData.map(d => d.key)).values()); const hoverCircleScale = d3.scalePoint() .range([0, width]) .domain(d3.set(nestedData.map(d => d.key)).values()); const line = d3.line() .curve(d3.curveMonotoneX) .x(d => timeScale(moment(d.key, dateGrouping))) .y(d => yScale(d[column])) const area = d3.area() .curve(d3.curveMonotoneX) .x(d => timeScale(moment(d.key, dateGrouping))) .y0(d => yScale(d[column])) .y1(height) const formatMoney = d3.format("$.2s"); const format = d3.format(",.2s"); // Start Text g.append("text") .attr("class", "label") .attr("y", yScale(nestedData[0][column])) .attr("dx", -1) .style("text-anchor", "end") .style("font", "10px sans-serif") .text(() => { const val = nestedData[0][column] if(money) { return formatMoney(val) } else { return format(val) } }); // End Text g.append("text") .attr("class", "label") .attr("y", yScale(nestedData[nestedData.length - 1][column])) .attr("x", width) .attr("dx", 1) .style("font", "10px sans-serif") .text(() => { const val = nestedData[nestedData.length - 1][column] if(money) { return formatMoney(val) } else { return format(val) } }); const areaGradient = DOM.uid("areaGradient"); svg.append("linearGradient") .attr("id", areaGradient.id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0) .attr("y1", height) .attr("x2", 0) .attr("y2", 0) .selectAll("stop") .data([{color: "#fff", offset: "0%"}, {color: "#fff", offset: "0%"}, {color: "#CDCDCD", offset: "80%"}, {color: "#CDCDCD", offset: "100%"}]) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); g.append("path") .datum(nestedData) .attr("d", area) .style("fill", areaGradient) // const yAxis = g.append("g") // .attr("class", "y axis") // .call(d3.axisLeft(yScale).tickSize(-width).ticks(4)); // yAxis.selectAll("text").remove() // yAxis.select(".domain").remove() // yAxis.selectAll("line") // .style("stroke", "#fff") // .style("stroke-dasharray", "1,1") g.append("path") .datum(nestedData) .attr("d", line) .style("stroke-width", 1.2) .style("stroke", "#000") .style("fill", "none") const hoverBars = g.selectAll(".hover") .data(nestedData) .join("g") .attr("class", "hover") hoverBars.append("circle") .attr("cx", d => hoverCircleScale(d.key)) .attr("cy", d => yScale(d[column])) .attr("r", 2.5) // .style("fill", "#fff") .style("opacity", 0) // .style("stroke", "#000") .style("pointer-events", "none") hoverBars.append("text") .style("pointer-events", "none") .attr("dy", -6) .attr("x", d => hoverCircleScale(d.key)) .attr("y", d => yScale(d[column])) .style("opacity", 0) .style("font", "10px sans-serif") .style("text-anchor", "middle") .style("fill", "#fff") .style("stroke", "#fff") .style("stroke-width", 2) .text((d) => { if(money) { return formatMoney(d.value) } else { return format(d.value) } }); hoverBars.append("text") .style("pointer-events", "none") .attr("dy", -6) .attr("x", d => hoverCircleScale(d.key)) .attr("y", d => yScale(d[column])) .style("opacity", 0) .style("font", "10px sans-serif") .style("text-anchor", "middle") .text((d) => { if(money) { return formatMoney(d.value) } else { return format(d.value) } }); hoverBars.append("text") .style("pointer-events", "none") .attr("x", d => hoverCircleScale(d.key)) .attr("y", height) .attr("dy", margin.bottom) .style("text-anchor", "middle") .style("opacity", 0) .style("font", "8px sans-serif") .text(d => { if(dateGrouping == 'Q-YYYY') { return `Q${d.key}` } else { return d.key } }); hoverBars.append("rect") .attr("x", d => hoverBarScale(d.key)) .attr("y", -100) .attr("height", height + 200) .style("stroke", "#000") .attr("width", hoverBarScale.bandwidth()) .style("opacity", 0) .on("mouseenter", function(d) { const sel = d3.select(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode) const hovers = sel.selectAll(".hover").filter(e => e.key == d.key) hovers.select("circle").style("opacity", 1); hovers.selectAll("text").style("opacity", 1); sel.selectAll(".label").style("opacity", 0) }) .on("mouseleave", function(d) { const sel = d3.select(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode) const hovers = sel.selectAll(".hover").filter(e => e.key == d.key) hovers.select("circle").style("opacity", 0); hovers.selectAll("text").style("opacity", 0); sel.selectAll(".label").style("opacity", 1) }) return svg.node() }35:T1455,FilterMap = (setWidth, setHeight, legendX, legendY, defaultSel) => { const path = d3.geoPath() .projection(d3.geoConicConformal() .parallels([33, 45]) .rotate([96, -48]) .fitSize([setWidth, setHeight], nycGeo)) let selections = defaultSel; const svg = d3.select(DOM.svg(setWidth, setHeight)) .style("width", setWidth) .style("height", setHeight); const hoverText = svg.append("text") .attr("x", 5) .attr("y", 20) .style("font", "20px sans-serif") const warning = svg.append("text") .attr("x", setWidth) .attr("y", setHeight) .attr("dy", -20) .style("text-anchor", "end") .style("opacity", 0) .style("font", "20px sans-serif") .text("You can only select five at once.") svg.selectAll(".back") .data(nycGeo.features.filter(d => d.properties.area_type == 'borough')) .join("path") .attr("class", "back") .attr("d", path) .style("fill", d=> boroughColorScale(d.properties.name)) .style("fill-opacity", .25) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1.5 : 0) svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("fill", d=> boroughColorScale(d.properties.Borough)) .style("fill-opacity", .75) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) .on("mouseenter", function(e) { svg.selectAll(".nyc") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) d3.select(this).style("stroke", "#000").style("fill-opacity", 1).moveToFront() hoverText.text(e.properties.name) }) .on("mouseleave", function() { svg.selectAll(".nyc") .style("fill-opacity", .75) .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) .filter(d => selections.indexOf(d.properties.name) > -1) .moveToFront() hoverText.text("") }) .on("click", function(d) { console.log(selections.length) d3.select(this).moveToFront() const clickedVal = d.properties.name; if(selections.indexOf(clickedVal) > -1) { selections = selections.filter(e => e != clickedVal) viewof selectedNeighborhoods.value = selections.filter(e => e != clickedVal) } else { if(selections.length < 5) { selections.push(clickedVal) viewof selectedNeighborhoods.value = selections } else { warning.style("opacity", 1).transition().delay(2000).style("opacity", 0) } } svg.selectAll(".nyc") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1 : .25) }).filter(d => selections.indexOf(d.properties.name) > -1) .moveToFront() const legends = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`) .selectAll(".legend") .data(boroughColorScale.domain().filter(d => d.length > 0)) .join("g") .attr("class", "legend") .attr("transform", (d,i) => `translate(0, ${i*22})`) .on("click", function(d) { const clickedVal = d; console.log(selections.length) if(selections.indexOf(clickedVal) > -1) { selections = selections.filter(e => e != clickedVal) viewof selectedNeighborhoods.value = selections.filter(e => e != clickedVal) } else { if(selections.length < 5) { selections.push(clickedVal) viewof selectedNeighborhoods.value = selections } else { warning.style("opacity", 1).transition().delay(2000).style("opacity", 0) } } svg.selectAll(".back") .style("stroke", d => selections.indexOf(d.properties.name) > -1 ? "#000" : "#fff") .style("stroke-width", d => selections.indexOf(d.properties.name) > -1 ? 1.5 : 0) d3.select(this).select("rect") .style("stroke", d => selections.indexOf(d) > -1 ? "#000" : "none") }) 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("stroke", d => selections.indexOf(d) > -1 ? "#000" : "none") .style("fill", boroughColorScale) return svg.node(); }36:T21e3,style_selectize = html` selectize.css `37:[] 31:{"id":"d7f3f2ead901728c","slug":"streeteasy-residential-sales","title":"StreetEasy - Residential Sales","thumbnail":"355f96b8f96125be4ce1ec070637a90b9fd4cf8ab1666d867c11184a5f743a04","access_level":"public","create_time":"$D2020-11-02T18:06:20.325Z","update_time":"$D2020-12-11T21:26:35.259Z","view_time":null,"first_public_time":"$D2020-11-02T18:25:56.884Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6a65839ad407ce2b","login":"domwom","name":"Dominic Toth","avatar_url":"https://avatars-next.observableusercontent.com/07f2b1de208afada26655e2de4d36cd379c8d42f2c3faaac94d7b058d1fd957e","tier":"starter_2024"},"version":127,"publish_version":127,"role":null,"authored":false,"authors":[{"type":"individual","id":"583b7bcb9f7e5807","login":"domwom","name":"Dominic Toth","avatar_url":"https://avatars-next.observableusercontent.com/07f2b1de208afada26655e2de4d36cd379c8d42f2c3faaac94d7b058d1fd957e","tier":null}],"members":[{"type":"individual","id":"583b7bcb9f7e5807","login":"domwom","name":"Dominic Toth","avatar_url":"https://avatars-next.observableusercontent.com/07f2b1de208afada26655e2de4d36cd379c8d42f2c3faaac94d7b058d1fd957e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"StreetEasy - Residential Sales","cells":[{"id":4,"value":"md`# StreetEasy - Residential Sales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md `Click on the map to see a table of metrics for that neighborhood, or type into the dropdown. You can add multiple. Choose Monthly, Quarterly, or Annual. And the start and end date. \n\nSometimes it glitches, so just reload.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"dropdown = html`\n \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof dateGrouping = {\n const dd3 = select({\n title: \"Aggregate Results By\",\n options: [\n { label: \"Month\", value: \"MM/YYYY\" },\n { label: \"Quarter\", value: \"Q-YYYY\" },\n { label: \"Year\", value: \"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof minDate = date({\n title: \"Min Date\", \n min: \"2015-01-01\",\n max: \"2020-12-31\",\n value: \"2010-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof maxDate = date({\n title: \"Max Date\", \n min: \"2010-01-01\",\n max: \"2020-09-30\",\n value: \"2020-01-01\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{ \n const dataTable = d3.select(table(nestedData, width * .45, height))\n \n const charts = dataTable.selectAll(\"svg\")\n \n const lines = charts.selectAll(\".line\")\n\n return dataTable.node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"FilterMap(800, 800, 600, 600, selectedNeighborhoods)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$$(function() {\n const selDrop = $('#select-country').selectize({ \n plugins: ['remove_button'],\n maxItems: 5\n });\n \n const selectize = selDrop[0].selectize;\n selectize.setValue(selectedNeighborhoods);\n \n $('#contacts').submit(function(e){\n console.log(\"sup\")\n e.preventDefault();\n \n const results = $('#select-country').val();\n \n viewof selectedNeighborhoods.value = results\n \n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`# Data and helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {combinedData, areas, boroughs, areaToBorough} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof selectedNeighborhoods = new View([])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"nestedData = d3.nest()\n .key(d => d.area)\n .key(d => d.type)\n .entries(combinedData)\n .filter(d => selectedNeighborhoods.indexOf(d.key) != -1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"parseTime = d3.timeParse(\"%Y-%m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"boroughColorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(boroughs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"colorScale = d3.scaleOrdinal(d3.schemeDark2)\n .domain(boroughs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {slider, date, input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"import {nycGeo} from '@pstuffa/streeteasy-neighborhood-filter'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"import {View} from '@pstuffa/selectize-js-synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"d3.selection.prototype.moveToFront = function() { \n return this.each(function(){\n this.parentNode.appendChild(this);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"require('bootstrap@4.1.3/dist/js/bootstrap').catch(() => window.bootstrap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"style_bootstrap = html`\nbootstrap.css\n\t\t\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"