31:Teb1,{ const svg = d3.select(DOM.svg(width, height + 100)) .style("width", "100%") .style("height", "auto"); svg.append("g") .attr("transform", `translate(${width - legendMargin},${0})`) .call(legend); const hover = svg.append("g") .attr("transform", `translate(${5},${20})`) const title = hover.append("text") .style("font", "18px sans-serif") const details = hover.append("text") .attr("y", 20) .style("font", "14px sans-serif") if(Metric == 'recorded_sales' || Metric == 'inventory') { svg.selectAll(".back") .data(nycGeoBack.features.filter(d => d.properties.area_type != 'neighborhood')) .join("path") .attr("d", path) .style("fill", "#fff") .style("stroke", "#000") .style("stroke-width", 1) .style("pointer-events", "none") const radiusScale = d3.scaleLinear() .domain(metricYDomain[Metric]) .range([2, 50]); svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("fill", "#fff") .style("stroke", "#000") .style("stroke-width", .1) svg.selectAll(".circle") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("circle") .style("mix-blend-mode", "multiply") .attr("transform", d => { return `translate(${path.centroid(d)})` }) .attr("class", "circle") .style("pointer-events", "none") .style("fill", d => { const val = choroplethMap["$" + d.properties.name] if(val == undefined) { return "#fff" } else { return metricColorScale[Metric](val[0].val) } }) .transition() .duration(1000) .delay((d,i) => i * 10) .attr("r", d => { const val = choroplethMap["$" + d.properties.name] if(val == undefined) { return 0 } else { return radiusScale(val[0].val) } }) } else { svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("stroke", "#000") .style("stroke-width", .25) .style("fill-opacity", .75) .style("fill", "#fff") .transition() .duration(1000) .delay((d,i) => i * 10) .style("fill", d => { const val = choroplethMap["$" + d.properties.name] if(val == undefined) { return "#fff" } else { return metricColorScale[Metric](val[0].val) } }) svg.selectAll(".back") .data(nycGeoBack.features.filter(d => d.properties.area_type != 'neighborhood')) .join("path") .attr("d", path) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", .5) .style("pointer-events", "none") } svg.selectAll(".nyc") .on("mouseenter", function(d) { d3.select(this).style("fill-opacity", 1) d3.selectAll(".circle").filter(e => e.properties.name == d.properties.name).style("stroke", "#000") const val = choroplethMap["$" + d.properties.name] title.text(d.properties.name) details.text(`${labelLookup[Metric]}: ${val ? metricFormat[Metric](val[0].val) : ""}`) }).on("mouseleave", function(d) { d3.selectAll(".circle").filter(e => e.properties.name == d.properties.name).style("stroke", "none") d3.select(this).style("fill-opacity", .75) title.text(""); details.text(""); }) return svg.node(); }32: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; }33:[] 2f:{"title":"StreetEasy - Compare Neighborhoods","cells":[{"id":0,"value":"md`# StreetEasy - Compare Neighborhoods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`Similar to the work I did [here](https://observablehq.com/@pstuffa/streeteasy-compare-boroughs), I'm testing out a modular map that will change the form based on the metric selected. Don't read too much into the results - I'm focusing here on the visualization form, not data intergrity.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"md`Probably the most interesting thing I'm doing here is programatically creating a threshold color scale based on histogram bins. It's still a bit wonky, as I'm forcing a set number of bins, but overall I think it looks nice.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"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":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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"legend = g => {\n \n const colorScale = metricColorScale[Metric]\n \n const y = d3.scaleLinear()\n .domain(d3.extent(metricBins)).nice()\n .rangeRound([height, 0]);\n\n g.selectAll(\"rect\")\n .data(colorScale.range().map(d => colorScale.invertExtent(d)))\n .join(\"rect\")\n .attr(\"width\", 8)\n .attr(\"y\", d => y(d[1]))\n .attr(\"height\", d => y(d[0]) - y(d[1]))\n .attr(\"fill\", d => colorScale(d[0]));\n\n // g.append(\"text\")\n // .attr(\"class\", \"caption\")\n // .attr(\"y\", y.range()[0])\n // .attr(\"x\", -6)\n // .attr(\"fill\", \"#000\")\n // .attr(\"text-anchor\", \"start\")\n // .attr(\"font-weight\", \"bold\")\n // .text(labelLookup[Metric]);\n\n g.call(d3.axisRight(y)\n .tickSize(13)\n .tickFormat(metricFormat[Metric])\n .tickValues(metricBins))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## Data and Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"colorScaleBase = d3.scaleSequential(d3.interpolateCool)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"metricBins = {\n \n const xHist = d3.scaleLinear()\n .domain(metricYDomain[Metric])\n .range([0, width])\n \n const bins = d3.histogram()\n .domain(xHist.domain())\n .thresholds(xHist.ticks(5))(values)\n \n let binVals = bins.map(d => d.x1)\n // binVals.unshift(metricYDomain[Metric][0])\n \n // if(binVals.length > 8) {\n // binVals = binVals.filter((d,i) => i < 8)\n // }\n return binVals\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"nyc = d3.json(\"https://gist.githubusercontent.com/pstuffa/99c2e586f366cd9c012c7d67998da384/raw/b4cc95f042594a9540dd7f15a16767e4001307f6/neighbs.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"nycback = 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.neighbs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"nycGeoBack = topojson.feature(nycback, nycback.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 = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"legendMargin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"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":517,"value":"metricColorScale = ({\n \"inventory\": inventoryColorScale,\n \"sales_list_ratio\": salesRatioColorScale,\n \"recorded_sales\": recordedSalesColorScale,\n \"price_cut\": priceCutColorScale,\n \"median_sales_price\": priceColorScale,\n \"median_asking_price\": priceColorScale,\n \"days_on_market\": daysColorScale\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"values = filteredByType.map(d => d.val)","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"metricYDomain = ({\n \"inventory\": [0, d3.max(values)],\n \"sales_list_ratio\": [d3.min(values.filter(d => d > 0)), d3.max(values)],\n \"recorded_sales\": [0, d3.max(values)],\n \"price_cut\": [0, d3.max(values)],\n \"median_sales_price\": [0, d3.max(values)],\n \"median_asking_price\": [0, d3.max(values)],\n \"days_on_market\": [0, d3.max(values)],\n \"price_index\": [0, 1]\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"inventoryColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"recordedSalesColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"salesRatioColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"priceCutColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"daysColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"priceColorScale = d3.scaleThreshold()\n .domain(metricBins)\n .range(metricBins.map(d => colorScaleBase(d)))","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":533,"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":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, combinedData} from '@pstuffa/streeteasy-data-data-store'","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"filteredByType = combinedData.filter(d => d.type == Metric).filter(d => d.areaType == 'neighborhood')","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"filteredByDate = filteredByType.filter(d => moment(d.date).format(\"MM/YYYY\") == dates[selectedDate])","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"choroplethMap = d3.nest()\n .key(d => d.area)\n .map(filteredByDate)","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":461,"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":257,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}