31:T465,{ const svg = d3.select(DOM.svg(width, height + 100)) .style("width", "100%") .style("height", "auto"); for (let item of ramp) { svg.insert(() => item); } svg.append("g") .attr("transform", `translate(20, 20)`) .call(legend); svg.selectAll(".nyc") .data(nycGeo.features.filter(d => d.properties.area_type == 'neighborhood')) .join("path") .attr("d", path) .attr("class", "nyc") .style("stroke", "#fff") .attr("fill", d => { const val = medianAskingMap[`$${date}`][`$${d.properties.name}`] if(val != undefined) { console.log(val[0].val) return q(val[0].val) } else { return q(0) } }) svg.selectAll(".back") .data(nycGeo.features.filter(d => d.properties.area_type != 'neighborhood')) .join("path") .attr("d", path) .style("fill", "none") .style("stroke", color) .style("stroke-width", 1.5); const div = html`

${svg.node()}

`; div.append(svg.node()); d3.select(div).style("color", color); return div; }32:T4f9,ramp = [ makePattern(svg` `), makePattern(svg` `), makePattern(svg` `), makePattern(svg` `), makePattern(svg` `), makePattern(svg` `), makePattern(svg` `) ]33:T49c,legend = g => { const legendG = g.selectAll(".legendg") .data(ramp) .join("g") .attr("class", "legendg") .attr("transform", (d,i) => `translate(0, ${i * 30})`) legendG.append("rect") .attr("width", 20) .attr("height", 20) .style("stroke", color) .style("fill", d => d); legendG.append("text") .attr("x", 24) .attr("y", 15) .text(d => q.invertExtent(d).map(d => d3.format("$.2s")(Math.round(d))).join(" to ")) // g.selectAll("rect") // .data(ramp) // .join("rect") // .attr("height", 8) // .attr("x", d => x(d[0])) // .attr("width", d => x(d[1]) - x(d[0])) // .attr("fill", d => q(d[0])); // g.append("text") // .attr("class", "caption") // .attr("x", x.range()[0]) // .attr("y", -6) // .attr("fill", "#000") // .attr("text-anchor", "start") // .attr("font-weight", "bold") // .text("Median Asking Price"); // g.call(d3.axisBottom(x) // .tickSize(13) // .tickFormat(d3.format("$.0s")) // .tickValues(colorScale.range().slice(1).map(d => colorScale.invertExtent(d)[0]))) // .select(".domain") // .remove(); }34: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; }35:[] 2f:{"title":"B&W NYC Maps","cells":[{"id":0,"value":"md`# B&W NYC Maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`I really enjoyed [Tom MacWright's](https://observablehq.com/@tmcw) observable on [monochromatic visualizations](https://observablehq.com/@tmcw/monochromatic-visualization), so I wanted to try it out myself. This map of New York City Neighborhoods shows the __median asking price of for-sale apartments by neighborhood for a given month / year__. You can use the slider to adjust the timeframe. I used a similar style to Tom's implementation, and addsed a legend.`","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":546,"value":"md`These parts are from [Tom's notebook](@tmcw/b-w-choropleth)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof color = DOM.select(['black', 'red', 'blue', 'green', 'magenta'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"q = d3.scaleQuantize(valueDomain, ramp)\n// Never knew these two were the same ?!?!\n// q = d3.scaleQuantize()\n// .domain(valueDomain)\n// .range(ramp)","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"import {makePattern} from '@tmcw/b-w-choropleth'","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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"colorScaleCompare.range().map(d => colorScaleCompare.invertExtent(d))","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":528,"value":"values = medianAskingPricePivot.map(d => d.val).filter(d => d > 0).sort(d3.ascending)","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"valueDomain = [d3.min(values), d3.quantile(values, .9)]","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":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}