31:Tfdf,{ const output = html`

Distribution of Boston-area rents for ${brCountFilter}-bedroom rentals

` const chartSvg = d3.select(output).select('svg') const cursor = chartSvg.select('.cursor') const touchSupport = 'ontouchstart' in document.documentElement const mouseover = touchSupport ? 'touchstart' : 'mouseover' const mouseout = touchSupport ? 'touchend' : 'mouseout' const mousemove = touchSupport ? 'touchmove': 'mousemove' chartSvg.on(mouseover, function (e) { cursor.attr('opacity', 1) }) chartSvg.on(mouseout, function (e) { cursor.attr('opacity', 0) }) chartSvg.on(mousemove, function (e) { const x = Math.min(Math.max(d3.mouse(this)[0], xScale.range()[0]), xScale.range()[1]) const percentile = xScale.invert(x) const dataPoints = selectedDates.filter(d => d).map(dateKey => { const date = parseDate(dateKey) const dataForDate = joinedData.filter(d => +d.date === +date) return [dateKey, closest(dataForDate, d => d.percentile, percentile)] }) cursor.select('line').attr('x1', x).attr('x2', x) cursor.select('.details') .attr( 'transform', percentile < 0.5 ? `translate(${x} ${margin.top + selectedDates.filter(d => d).length * 20 + 15})` : `translate(${x - 225} ${chartHeight - margin.top - margin.bottom - selectedDates.filter(d => d).length * 20 - 25})` ) cursor.selectAll('.details > .labels > *').remove() cursor.select('.details > .labels').node().appendChild(svg` ${d3.format('.1%')(percentile)} (nearest values) `) dataPoints.forEach(([dateKey, closest], i) => { cursor.select('.details > .labels').node().appendChild(svg` ${formatDateVerbose(parseDate(dateKey))}: $${closest.price} ${d3.format('.1%')(closest.percentile)} `) }) }) return output }32:[] 2f:{"title":"Boston-Area Rent Changes","cells":[{"id":0,"value":"md`# Boston-Area Rent Changes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"viewof selectedDates = listInput({\n value: [\n // Use the most recent value and the 12th most recent value\n dataFiles.map(d => dateToKey(d.date))[dataFiles.length - 13],\n dataFiles.map(d => dateToKey(d.date))[dataFiles.length - 1]\n ],\n defaultValue: null,\n input: (value, i, values) => html.fragment`\n \n \n `,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof brCountFilter = select({\n title: \"Bedrooms\",\n options: Array.from(\n new Set(dataSets[dataSets.length - 1].map(d => d.bedrooms))\n ).sort((a, b) => a - b),\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`Data: [Jeff Kaufman](https://www.jefftk.com/apartment_prices/details) (See also: his blog post on [Coronavirus and Rents](https://www.jefftk.com/p/coronavirus-and-rents))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`### Advanced Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"viewof quantileRange = rangeSlider({\n title: 'Visible Range',\n description: 'Items outside of this threshold (defined as a percentile range) will be excluded from the graph as outliers',\n min: 0,\n max: 1,\n step: 0.01,\n format: '.0%',\n value: [0.01, 0.99]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`

\n\n***\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`### Fetch Data File List`","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"dateToKey = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":411,"value":"formatDateVerbose = d3.timeFormat(\"%B %d, %Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`Scrape a list of data sets from Jeff's apartment price tracker:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"dataFiles = {\n const domparser = new DOMParser()\n const rawHtml = await (await fetch(CORS_PROXY_PREFIX + 'https://www.jefftk.com/apartment_prices/data-listing')).text()\n const htmlDoc = domparser.parseFromString(rawHtml, 'text/html')\n return Array.from(htmlDoc.querySelectorAll('a')).map(a => ({\n date: parseDate(a.text),\n url: 'https://www.jefftk.com' + a.getAttribute('href')\n }))\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`### Data File Parsing Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`Space-separated file parser:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"RentFileParser = d3.dsvFormat(' ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"md`Parser function to cast all values to numbers and annotate points with the date:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"parseRentFile = (text, date) => RentFileParser.parseRows(\n text,\n d => ({\n price: +d[0],\n bedrooms: +d[1],\n aptId: +d[2],\n lon: +d[3],\n lat: +d[4],\n date: date,\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`### Fetch Data Files`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`Fetch and parse data files:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"dataSets = Promise.all(selectedDates.filter(d => d).map(async dateKey => {\n const {date, url} = dataFiles.find(d => dateToKey(d.date) === dateKey)\n const rawData = await (await fetch(CORS_PROXY_PREFIX + url)).text()\n return parseRentFile(rawData, date)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`Parser function to annotate an individual year of data with a percentile value for each point:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"annotateAndFilter = data => data.filter(d => d.bedrooms === +brCountFilter)\n .sort((a, b) => a.price - b.price)\n .map((d, i, arr) => ({\n ...d,\n percentile: (i + 1)/arr.length\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`Fully annotated data:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"joinedData = dataSets.reduce((acc, data) => acc.concat(annotateAndFilter(data)), [])","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`## Chart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"margin = ({ top: 20, bottom: 80, left: 40, right: 20 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"chartWidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"chartHeight = width > 600 ? chartWidth / 1.6 : chartWidth * 1.6","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`If the specified quantile ranges are within 5% of 0% to 100% continue to show the full x-axis, otherwise crop it to the range:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"xScaleRange = {\n const min = quantileRange[0] < 0.05 ? 0 : quantileRange[0]\n const max = quantileRange[1] > 0.95 ? 1 : quantileRange[1]\n return [min, max]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"xScale = d3.scaleLinear()\n .domain(xScaleRange)\n .range([margin.left, chartWidth - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"yScale = d3.scaleLinear()\n .domain([\n d3.min(joinedData.filter(d => d.percentile > quantileRange[0]).map(d => d.price)),\n d3.max(joinedData.filter(d => d.percentile < quantileRange[1]).map(d => d.price)),\n ])\n .range([chartHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"xAxis = d3.axisBottom(xScale)\n .tickFormat(d3.format('.0%'))\n .tickSize(-chartHeight - margin.top - margin.bottom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"yAxis = d3.axisLeft(yScale)\n .tickFormat(d => '$' + d3.format('~s')(d))\n .tickSize(-chartWidth - margin.left - margin.right)","pinned":true,"hidden":false,"mode":"ojs"},{"id":566,"value":"md`We need a version of the color scale function that doesn't rely on selected date so that we can use it _in_ the date selector:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"colorScaleNonCircular = (date, dates) => d3.schemeSet2[dates.indexOf(typeof date === 'string' ? date : dateToKey(date))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`And the eaasy to use version that relies on global state:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"colorScale = date => colorScaleNonCircular(date, selectedDates)","pinned":true,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`### Chart Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"// Filter out data that's above or below our scale range\n// and then render it as data points\nchartDataPoints = (data, xScale, yScale, colorScale) => data.filter(\n d => d.price > yScale.domain()[0] && d.price < yScale.domain()[1] &&\n d.percentile > xScale.domain()[0] && d.percentile < xScale.domain()[1]\n).map(d => svg.fragment`\n \n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"legend = () => svg.fragment`\n d).length} fill=\"#FFF\" stroke=\"#CCC\" />\n ${selectedDates.filter(d => d).map((dateKey, i) => svg.fragment`\n \n ${formatDateVerbose(parseDate(dateKey))}\n `)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`This \\`closest\\` function accepts a \\`data\\` array, an \\`accessor\\` function that should return a value extracted from the data point, a \\`value\\` that should be comparable to the result of \\`accessor\\`, a comparison function \\`cmp\\` that should return a number representing the distance between two values. It returns the data entry for which the result of \\`accessor\\` is closest to \\`value\\` using the comparison function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"closest = (\n data,\n accessor,\n value,\n cmp = (a, b) => Math.abs(a - b)\n) => {\n const idx = d3.bisectLeft(data.map(accessor), value)\n if (idx === data.length - 1) return data[idx]\n return cmp(accessor(data[idx]), value) < cmp(accessor(data[idx + 1]), value) ? data[idx] : data[idx + 1]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"CORS_PROXY_PREFIX = 'https://corsproxy.harrislapiroff.com/'","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"import { select } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"import {listInput} from '@harrislapiroff/list-input'","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"R = require('ramda@0.27')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}