31:T10a4,{ const svg = d3.select(DOM.svg(width, height + 100)) .style("width", "100%") .style("height", "auto"); svg.append("g") .attr("transform", `translate(${width - legendMargin},${20})`) .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(".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", .1) .style("fill", d => boroughColorScale(d.properties.Borough)) .style("fill-opacity", .5) .on("mouseenter", function(d) { d3.select(this).style("fill-opacity", 1) d3.selectAll(".circle").filter(e => e.properties.name == d.properties.name).style("fill-opacity", .5) 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("fill-opacity", .15) d3.select(this).style("fill-opacity", .5) title.text(""); details.text(""); }) svg.selectAll(".circle") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("circle") .style("mix-blend-mode", "multiply") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("class", "circle") .style("pointer-events", "none") .style("fill", "#000") .style("fill-opacity", .15) .style("stroke", "#000") .transition() .duration(1000) .delay((d,i) => i * 10) .attr("r", d => { const val = choroplethMap["$" + d.properties.name] if(val == undefined) { return 0 } else if(val[0].val == 0) { return 0 } else { return radiusScale(val[0].val) } }); svg.selectAll(".back") .data(nycGeoBack.features.filter(d => d.properties.area_type == 'borough')) .join("path") .attr("d", path) .style("fill", "none") .style("stroke", "#000") .style("stroke-width", 1) .style("pointer-events", "none") } 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", "#fff") .on("mouseenter", function(d) { d3.select(this).style("stroke-width", 1) 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.select(this).style("stroke-width", .25) title.text(""); details.text(""); }) .transition() .duration(1000) .delay((d,i) => i * 10) .style("fill", d => { const val = choroplethMap["$" + d.properties.name] if(val == undefined) { return "#fff" } else if(val[0].val == 0) { return "#fff" } else { const boro = areaToBorough[d.properties.name] const color = boroColors[boro] const colorRange = metricBins.map(d => color(d)) return colorScale.range(colorRange)(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", 1) .style("pointer-events", "none") } return svg.node(); }32:T822,legend = g => { if(Metric == 'recorded_sales' || Metric == 'inventory') { const radiusScaleDomain = radiusScale.domain() const min = radiusScaleDomain[0] const max = radiusScaleDomain[1] const mid = (max - min) / 4; const circleValues = [max * 2, max, mid ] // const legend = g.append("g") // .selectAll(".legend") // .data(circleValues) // .join("g") // .attr("class", "legend") // legend.append("circle") // .attr("r", radiusScale) // .style("fill", "#000") // .style("fill-opacity", .15) // .style("stroke", "#000") const legend = g.append("g") .attr("fill", "#777") .attr("transform", `translate(${0},${60})`) .attr("text-anchor", "middle") .style("font", "10px sans-serif") .selectAll("g") .data(circleValues) .join("g"); legend.append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", d => -radiusScale(d)) .attr("r", radiusScale); legend.append("text") .attr("y", d => -2 * radiusScale(d)) .attr("dy", -2) .text(d => metricFormat[Metric](d)); } else { const legendColorScale = d3.scaleThreshold() .domain(metricBins) .range(metricBins.map(d => legendColor(d))) const legend = g.append("g") .selectAll(".legend") .data(bins) .join("g") .attr("class", "legend") .attr("transform", (d,i) => `translate(0, ${i * 20})`) legend.append("text") .style("font", "14px sans-serif") .text((d, i, j) => { if(i == j.length - 1) { return `${metricFormat[Metric](d.x0)} +` } else { return `${metricFormat[Metric](d.x0)} to ${metricFormat[Metric](d.x1)}` } }) .style("pointer-events", "none") legend.append("rect") .attr("width", 15) .attr("height", 15) .attr("x", -20) .attr("y", -13) .style("fill", d => legendColorScale(d.x0)) .style("fill-opacity", 1) .style("Stroke", "#000") } }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 - Borough Color Scales","cells":[{"id":0,"value":"md`# StreetEasy - Borough Color Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`A fork of [this](https://observablehq.com/@pstuffa/streeteasy-compare-maps), 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`This color scale is where a lot of the work is. It's based on each borough, uses histogram binning to come up with the breakpoints, and updates for each metric.`","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":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`## Data and Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"boroColors = ({\n Manhattan: manhattanColor,\n Brooklyn: brooklynColor,\n Queens: queensColor,\n Bronx: bronxColor,\n 'Staten Island': statenIslandColor\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"manhattanColor = d3.scaleSequential(d3.interpolateReds)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"brooklynColor = d3.scaleSequential(d3.interpolateBlues)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"queensColor = d3.scaleSequential(d3.interpolateGreens)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"bronxColor = d3.scaleSequential(d3.interpolatePurples)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"statenIslandColor = d3.scaleSequential(d3.interpolateOranges)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":973,"value":"legendColor = d3.scaleSequential(d3.interpolateGreys)\n .domain(metricYDomain[Metric])","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"colorScale = d3.scaleThreshold().domain(metricBins)","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"radiusScale = d3.scaleSqrt()\n .domain(metricYDomain[Metric])\n .range([0, 20]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"bins = {\n \n const xHist = d3.scaleLinear()\n .domain(metricYDomain[Metric]).nice()\n .range([0, width])\n \n const bins = d3.histogram()\n .domain(xHist.domain())\n .thresholds(xHist.ticks(5))(values)\n \n return bins\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"metricBins = bins.map(d => d.x1)","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":826,"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\", \"Staten Island\", \"Bronx\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"path = d3.geoPath()\n .projection(d3.geoConicConformal()\n .parallels([33, 45])\n .rotate([96, -55])\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 = 120","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"metricFormat = ({\n \"inventory\": d3.format(\".2s\"),\n \"sales_list_ratio\": d3.format(\".1%\"),\n \"recorded_sales\": d3.format(\".2s\"),\n \"price_cut\": d3.format(\".1%\"),\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":635,"value":"values = filteredByDate.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.extent(values.filter(d => d > 0)),\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":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, areaToBorough} 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":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}