31: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(); }32: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(); }33: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; }34:[] 2f:{"title":"StreetEasy - Neighborhood Maps","cells":[{"id":0,"value":"md`# StreetEasy - Neighborhood Maps`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":408,"value":"md`## Median Price Relative to a Neighborhood`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":278,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`## Median Sales Price over time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`Median sales price animated over time. Yes, the city is getting more expensive.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## Data and Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nyc = d3.json(\"https://gist.githubusercontent.com/pstuffa/f9f9f78d52e634fa8ad107e3a2050803/raw/8d732cf241fce6ebe69e55336f112e5e9ec31b16/neighborhoods.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"nycGeo = topojson.feature(nyc, nyc.objects.area)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":18,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"legendMargin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":123,"value":"date = dates[selectedDate]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":54,"value":"md`## Imported Modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"import {medianAskingPricePivot} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":78,"value":"moment = require('moment@2.22.2/moment.js')","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":257,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}