2e:null 2f:["$","title",null,{"children":"StreetEasy - Neighborhood Maps | Paul Buffa | Observable"}] 34:Ta5a,Comparison = { const svg = d3.select(DOM.svg(width, height + 100)) .style("width", "100%") .style("height", "auto") svg.append("g") .attr("transform", `translate(${legendMargin / 2},${height + 50})`) .call(bottomLegend); let selectedArea = 'Prospect Heights'; let selectedMedian = medianAskingMap["$" + date]["$" + selectedArea][0].val; const format = d3.format("$.2s"); const selectedAreaText = svg.append("text") .attr("y", 20) .attr("x", 10) .text(`Selected: ${selectedArea}`); const selectedAreaMedianPriceText = svg.append("text") .attr("y", 40) .attr("x", 10) .text(`Median Listing Price: ${format(selectedMedian)}`); svg.selectAll(".back") .data(nycGeo.features.filter(d => d.properties.area_type != 'neighborhood')) .join("path") .attr("d", path) .style("fill", "#fff") .style("stroke", "#000") svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("fill", d => { const val = medianAskingMap["$" + date]["$" + d.properties.name] if(val == undefined) { return "#fff" } else { const difference = val[0].val / selectedMedian - 1 console.log(difference) return colorScaleCompare(difference) } }) .style("stroke", "#000") .style("stroke-width", d => d.properties.name == selectedArea ? 2 : .25) .on("mouseenter", function(d) { d3.select(this).style("stroke-width", "2") }) .on("mouseleave", function(d) { d3.select(this).style("stroke-width", d => d.properties.name == selectedArea ? 2 : .25) }) .on("click", function(d) { selectedArea = d.properties.name; selectedMedian = medianAskingMap["$" + date]["$" + selectedArea][0].val; selectedAreaText.text(`Selected: ${selectedArea}`); selectedAreaMedianPriceText.text(`Median Listing Price: ${format(selectedMedian)}`); svg.selectAll(".nyc") .style("stroke-width", d => d.properties.name == selectedArea ? 2 : .25) .style("fill", d => { const val = medianAskingMap["$" + date]["$" + d.properties.name] if(val == undefined) { return "#fff" } else { const difference = val[0].val / selectedMedian - 1 console.log(difference) return colorScaleCompare(difference) } }) }) return svg.node(); }35:T6e6,animation = { const svg = d3.select(DOM.svg(width, height + 100)) .style("width", "100%") .style("height", "auto") svg.append("g") .attr("transform", `translate(${legendMargin / 2},${height + 50})`) .call(legend); svg.selectAll(".back") .data(nycGeo.features.filter(d => d.properties.area_type != 'neighborhood')) .join("path") .attr("d", path) .style("fill", "#fff") .style("stroke", "#000") svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("fill", d => { const val = medianAskingMap["$" + date]["$" + d.properties.name] if(val == undefined) { return "#fff" } else { return colorScale(val[0].val) } }) .style("stroke", "#000") .style("stroke-width", .25) const dateDisplay = svg.append("text") .attr("x", 5) .attr("y", 30) .style("font", "24px sans-serif") .text(date) const dates = d3.set(medianAskingPricePivot.map(d => moment(d.date).format("MM/YYYY"))).values() dates.shift() let counter = 0; d3.interval(() => { dateDisplay.text(dates[counter]) // console.log(dates) const medMap = medianAskingMap["$" + dates[counter]]; svg.selectAll(".nyc") .style("fill", d => { const val = medMap["$" + d.properties.name] if(val == undefined) { return "#fff" } else { return colorScale(val[0].val) } }) if(counter == dates.length - 1) { counter = 0; } else { counter +=1 } }, 100) return svg.node(); }36:T75b,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = dates[input]; if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = display ? display(value) : format ? format(value) : dates[value]; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } return form; }37:[] 32:{"id":"1247074bb4c77af0","slug":"streeteasy-data-neighborhood-maps","title":"StreetEasy - Neighborhood Maps","thumbnail":"afe8c5d2a2bf4c4df10bb2dc15f5b133739885f6f0606a49d5d4c5911479c79d","access_level":"public","create_time":"$D2019-02-18T22:08:32.783Z","update_time":"$D2019-05-01T20:30:43.100Z","view_time":null,"first_public_time":"$D2019-02-19T16:35:11.666Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":"starter_2024"},"version":444,"publish_version":444,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":{"id":"9105e0326b5fcbd3","slug":"streeteasy/2","title":"StreetEasy","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"type":"notebook","body":{"title":"StreetEasy - Neighborhood Maps","cells":[{"id":0,"value":"md`# StreetEasy - Neighborhood Maps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"md`Given that much of our data is geographical, maps are great ways of visualizing the results. This map of New York City Neighborhoods shows the median asking price for sales for a given month / year. You can use the slider to adjust the timeframe.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"viewof selectedDate = slider({\n min: 0, \n max: dates.length - 1, \n step: 1, \n value: dates.length - 1, \n format: true,\n title: \"Month / Year\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"BasicMap = {\n \n const svg = d3.select(DOM.svg(width, height + 100))\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n \n svg.append(\"g\")\n .attr(\"transform\", `translate(${legendMargin / 2},${height + 50})`)\n .call(legend);\n \n svg.selectAll(\".back\")\n .data(nycGeo.features.filter(d => d.properties.area_type != 'neighborhood'))\n .join(\"path\")\n .attr(\"d\", path)\n .style(\"fill\", \"#fff\")\n .style(\"stroke\", \"#000\")\n .style(\"stroke-width\", 1.5)\n \n svg.selectAll(\".nyc\")\n .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood'))\n .join(\"path\")\n .attr(\"d\", path)\n .attr(\"class\", \"nyc\")\n .style(\"fill\", d => {\n const val = medianAskingMap[\"$\" + date][\"$\" + d.properties.name]\n if(val == undefined) {\n return \"#fff\"\n } else {\n return colorScale(val[0].val)\n }\n })\n .style(\"stroke\", \"#000\")\n .style(\"stroke-width\", .25)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"md`## Median Price Relative to a Neighborhood`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`Alternately, you can click on a neighborhood and see which neighborhoods are above or below that median asking price.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`## Median Sales Price over time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"md`Median sales price animated over time. Yes, the city is getting more expensive.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"md`## Data and Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"nyc = d3.json(\"https://gist.githubusercontent.com/pstuffa/f9f9f78d52e634fa8ad107e3a2050803/raw/8d732cf241fce6ebe69e55336f112e5e9ec31b16/neighborhoods.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"nycGeo = topojson.feature(nyc, nyc.objects.area)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"path = d3.geoPath()\n .projection(d3.geoConicConformal()\n .parallels([33, 45])\n .rotate([96, -39])\n .fitSize([width, height], nycGeo))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"legendMargin = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"colorScale = d3.scaleThreshold()\n .domain([500000, 800000, 1000000, 1200000, 1500000, 2000000, 3000000, 10000000])\n .range(d3.schemeGreens[9])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"colorScaleCompare = d3.scaleThreshold()\n .domain([-2, -1, -.5, -.25, 0, .25, .5, 1, 2])\n .range(d3.schemePiYG[10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"dates = { \n const array = d3.set(medianAskingPricePivot.map(d => moment(d.date).format('MM/YYYY'))).values();\n array.shift() // Remove first invalid date\n return array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"date = dates[selectedDate]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"legend = g => {\n \n const x = d3.scaleLinear()\n .domain(d3.extent(colorScale.domain()))\n .rangeRound([0, width - legendMargin]);\n\n g.selectAll(\"rect\")\n .data(colorScale.range().map(d => colorScale.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => colorScale(d[0]));\n\n g.append(\"text\")\n .attr(\"class\", \"caption\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Median Asking Price\");\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d3.format(\"$.0s\"))\n .tickValues(colorScale.range().slice(1).map(d => colorScale.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"bottomLegend = g => {\n \n const x = d3.scaleLinear()\n .domain(d3.extent(colorScaleCompare.domain()))\n .rangeRound([0, width - legendMargin]);\n\n g.selectAll(\"rect\")\n .data(colorScaleCompare.range().map(d => colorScaleCompare.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => colorScaleCompare(d[0]));\n\n g.append(\"text\")\n .attr(\"class\", \"caption\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"#000\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"% Above or Below Selected Median Asking Price\");\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d3.format(\".0%\"))\n .tickValues(colorScaleCompare.range().slice(1).map(d => colorScaleCompare.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import {medianAskingPricePivot} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"medianAskingMap = d3.nest()\n .key(d => moment(d.date).format(\"MM/YYYY\"))\n .key(d => d.area)\n .map(medianAskingPricePivot)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`I was using the famous [inputs]('@jashkenas/inputs') module, but I need some custom formatting on the display result for my slider.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"function slider(config = {}) {\n let {value, min = 0, max = 1, step = \"any\", precision = 2, title, description, getValue, format, display, submit} = config;\n if (typeof config == \"number\") value = config;\n if (value == null) value = (max + min) / 2;\n precision = Math.pow(10, precision);\n if (!getValue) getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\", title, description, submit, format, display,\n attributes: {min, max, step, value},\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"