2c:null 2d:["$","title",null,{"children":"Zillow Affordability Heatmap | Sophie Engle | Observable"}] 32:T5d4,md` This example visualizes the "Mortgage Affordability, Rent Affordability, Price-to-Income Ratio" dataset from [Zillow Research](https://www.zillow.com/research/data/). The full citation is: > *Data acquired from [Zillow.com/data](//www.zillow.com/data) on February 4, 2019. Aggregated data on this page is made freely available by Zillow for non-commercial use.* The direct link to the dataset is: > The "Mortgage Affordability, Rent Affordability, Price-to-Income Ratio" metric is described as: > *To calculate **mortgage affordability**, we first calculate the mortgage payment for the median-valued home in a metropolitan area.... Then, we consider what portion of the monthly median household income (U.S. Census) goes toward this monthly mortgage payment.... We calculate **rent affordability** similarly to mortgage affordability; however we use the Zillow Rent Index, which tracks the monthly median rent in particular geographical regions, to capture rental prices.* This dataset is being [hosted on a Github Gist](https://gist.github.com/sjengle/f864cae26afb457e9875e1d157c2775c) for use in this notebook. The direct link to the dataset on this gist is: > <${link}> This is based off the [Zillow Affordability Heatmap](https://bl.ocks.org/sjengle/4e8777bed44557dadafa) example, except adjusted for the latest version of [D3.js](https://d3js.org/) and [Observable](/) notebooks. `33:T553,convertRow = function(row, index) { // this will be our converted output row let out = {}; // this will be the values from each yyyy-mm column out.values = []; // now we will loop through all of the columns in our original item // and depending on the column name we will perform some sort of conversion for (let col in row) { switch (col) { // these are the text columns that do not need conversion case "RegionName": case "Index": out[col] = row[col]; break; // these are the columns that need to be converted to integer case "RegionID": case "SizeRank": out[col] = parseInt(row[col]); break; // these are the columns that need to be converted to float case "HistoricAverage_1985thru1999": out[col] = parseFloat(row[col]); break; // these should be our time series values default: // convert column name into the date var date = parseColumnName(col); // convert the value to float var value = parseFloat(row[col]); // add them to our values out.values.push({ "date": date, "value": value }); // note there really isnt any error checking here for unexpected columns! } } return out; }34:T427,createHeatmap = function(id) { let node = createPlot(id); let svg = d3.select(node); let plot = svg.select("g#plot"); // create one group per row let rows = plot.selectAll("g.cell") .data(sorted) .enter() .append("g"); rows.attr("class", "cell"); rows.attr("id", function(d) { return "Region-" + d.RegionID; }); // shift the entire group to the appropriate y-location rows.attr("transform", function(d) { return translate(0, scale.y(d["RegionName"])); }); // create one rect per cell within row group let cells = rows.selectAll("rect") .data(function(d) { return d.values; }) .enter() .append("rect"); cells.attr("x", function(d) { return scale.x(d.date); }); cells.attr("y", 0); // handled by group transform cells.attr("width", scale.x.bandwidth()); cells.attr("height", scale.y.bandwidth()); // here is the color magic! cells.style("fill", function(d) { return scale.color(d.value); }); cells.style("stroke", function(d) { return scale.color(d.value); }); return node; }35:[] 30:{"id":"e318088e44407dff","slug":"zillow-affordability-heatmap","title":"Zillow Affordability Heatmap","thumbnail":"ac600330e115540f303ca0864dadedd85e820f0c2bb579df0e94049b56b93cd8","access_level":"public","create_time":"$D2019-02-04T22:30:49.753Z","update_time":"$D2019-02-05T07:08:24.434Z","view_time":null,"first_public_time":"$D2019-02-05T07:03:37.187Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"5daeb3b295f61c60","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":"starter_2024"},"version":604,"publish_version":604,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null}],"members":[{"type":"individual","id":"cd2851261031ef7e","login":"sjengle","name":"Sophie Engle","avatar_url":"https://avatars-next.observableusercontent.com/ba843dbbe22e6effd001e1baf75052c3b58b856ba20f2250b1152f6fc72c5648","tier":null,"role":"editor"}],"comments":[{"id":"6daeab324c7e17d6","reply_to_id":null,"content":"What a great explanation of all the steps and then your final viz, thanks","create_time":"$D2022-01-11T09:50:14.176Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3d1beb3a90fbfe98","login":"sandraviz","name":"Sandraviz","avatar_url":"https://avatars-next.observableusercontent.com/9b19f1a074469dcaafa9bd24c7b08f4bc969889b551fe70c209497f1d03c6514","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":29,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zillow Affordability Heatmap","cells":[{"id":0,"value":"md`# Zillow Affordability Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"teaser = createHeatmap(\"teaser\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`\n## Data Wrangling\n\nThe following cells load the [data](${link}) in CSV format. This utlilizes the [d3-fetch](https://github.com/d3/d3-fetch) module and the [\\`d3.csv()\\`](https://github.com/d3/d3-fetch#csv) function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`\nWe start by simply loading the raw data and taking a look at the format:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"data = d3.csv(link);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`\nLooks like we have:\n\n - A \\`RegionID\\` and \\`RegionName\\` column describing the region\n - A \\`SizeRank\\` column ranking the region size (with rank 0 being the largest region)\n - An \\`Index\\` column indicating which metric the values are for\n - A \\`HistoricAverage_1985thru1999\\` column summarizing all of the values\n - Several columns in \\`YYYY-MM\\` format with individual values from 1979 until 2019\n\nOverall, there are ${Object.keys(data[0]).length} columns in this dataset.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`### Wrangling Columns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`\nWe need to convert some values (such as \\`SizeRank\\`) from text to numbers. To avoid needing a separate loop, we can perform this conversion as the data is loaded using a row conversion function.\n\nWe will first create the row conversion function, and then demonstrate how to use it later. To convert the \\`YYYY-MM\\` column names like \\`1979-12\\` into date objects, we will use the [d3-time-format](https://github.com/d3/d3-time-format) module. For converting text to numbers, we will use the [\\`parseFloat()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) and [\\`parseInt()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) JavaScript functions. This function will also demonstrate [\\`switch\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) statements in JavaScript.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"parseColumnName = d3.timeParse(\"%Y-%m\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"parseColumnName(\"1979-12\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md`\nLets test this out for the first element in our data:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"convertRow(data[0], 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"convertRow(data[0], 0).values[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md`\nUsing this row conversion function, we can now load our data directly into a more usable format. \n\nNote: For illustrative purposes, we are loading the data twice and making multiple copies for each data wrangling step. However, that would not be the best practice in a real setting. In that case, load the data once and avoid keeping around the unnecessary copies.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"converted = d3.csv(link, convertRow);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"converted[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`### Wrangling Rows`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`\nWe are not done data wrangling yet. There are ${converted.length} rows in this dataset; more than we want to visualize for this example. Instead, lets focus on the \"Rent Affordability\" metric and the top ${keep} regions by size. To do this we will use the [\\`filter()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) JavaScript function.\n\nThis will also demonstrate the use of the \\`===\\` strict comparison operator. JavaScript also has a *fuzzier* \\`==\\` comparison operator. Make sure to [read about the difference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) between the two!\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"filtered = converted.filter(function(row) {\n return row[\"Index\"] === \"Rent Affordability\" &&\n row[\"SizeRank\"] > 0 && // excludes United States\n row[\"SizeRank\"] <= keep;\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`\nAfter filtering, we reduced our dataset from ${converted.length} rows to only ${filtered.length} rows. But, we are not done data wrangling yet!\n\nSort order is *very* important when it comes to using heatmaps to visualize data. The columns should be sorted by date (from oldest to newest values), but what about the rows? \n\nWe can use the [\\`sort()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) JavaScript function, but need to decide which column sort on. We could sort by name (\\`RegionName\\`), size (\\`SizeRank\\`), or historic average (\\`HistoricAverage_1985thru1999\\`). \n\nChange the code below see how the sort order impacts the final heatmap!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"viewof sortColumn = select({\n title: \"Sort Column\",\n description: \"Select the column to use for sorting rows.\",\n options: [\"RegionName\", \"SizeRank\", \"HistoricAverage_1985thru1999\"],\n value: \"HistoricAverage_1985thru1999\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"sorted = filtered.sort(function(a, b) {\n return a[sortColumn] - b[sortColumn];\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"md`\nThe first element is ${sorted[0][\"RegionName\"]} and its \\`${sortColumn}\\` value is ${sorted[0][sortColumn]}. The last element is ${sorted[sorted.length - 1][\"RegionName\"]} and its \\`${sortColumn}\\` value is ${sorted[sorted.length - 1][sortColumn]}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`\n*Awesome.* Our columns have now been properly converted; our rows have been filtered and sorted. We are good to go!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`### Determining Domains`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md`\n*Just kidding.* We are STILL not done data wrangling!\n\nWe still need to setup our *x* and *y* scales. For that, we need to know the domains of our data. This includes all of the dates (to map to *x* position) and all of the regions (to map to *y* position). We will use the [\\`map()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) JavaScript function for this part.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"regions = sorted.map(function(row) { return row[\"RegionName\"]; });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`\nFor the dates, we can grab them from the \\`values\\` property of any row. However, we may still need to sort them. We can take advantage of the [\\`d3.ascending()\\`](https://github.com/d3/d3-array/blob/master/README.md#ascending) function of the [d3-array](https://github.com/d3/d3-array/blob/master/README.md) module rather than creating our own sort function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"dates = {\n let values = sorted[0].values;\n let mapped = values.map(function(value) { return value.date; }); \n return mapped.sort(d3.ascending);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`\n*FINALLY.* We have our data in the format we need for our visualizations.\n\nData wrangling is a non-trival part of every visualization project. This notebook demonstrates that some lightweight wrangling can be done directly in JavaScript. This becomes infeasible as the dataset size and wrangling complexity increases. Feel free to use your language or tool of choice to wrangle data before importing it for your visualizations!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`\n## Visualization, Part 1\n\nThis section will look at how to visualize all of the context required to interpret our heatmap. This includes our axis labels and plot title.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`\nThankfully, there are some [reactive variables](https://beta.observablehq.com/@mbostock/standard-library) we have access to as part of the Observable standard library. One of those is the \\`width\\` variable that tracks the available cell width for our visualizations. Currently, it is ${width} pixels. *Try resizing the window to see this value update!*\n\nWe will use this variable to create the parameters we need to size our plot area.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"mutable params = {\n let out = {};\n \n out[\"svg\"] = {\n \"width\": width, // use width variable to calculate our svg size\n \"height\": width / 1.618 // golden ratio\n };\n \n out[\"margin\"] = {\n \"top\": 10,\n \"right\": 10,\n \"bottom\": 20,\n \"left\": left\n };\n \n out[\"plot\"] = {\n \"x\": out[\"margin\"][\"left\"],\n \"y\": out[\"margin\"][\"top\"],\n \"width\": out[\"svg\"][\"width\"] - out[\"margin\"][\"left\"] - out[\"margin\"][\"right\"],\n \"height\": out[\"svg\"][\"height\"] - out[\"margin\"][\"top\"] - out[\"margin\"][\"bottom\"]\n };\n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`\nIf you haven't noticed yet, there are [multiple ways to refer to properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer) in JavaScript objects. For example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"[params.svg.width, params[\"svg\"][\"width\"], params.svg[\"width\"], params[\"svg\"].width]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`\n*Confusing,* right? There is a reason to have both notations...\n\nThe \\`[\\` \\`]\\` square bracket notation is handy when you have a variable sorting the property name (and is also used for accessing array elements by index). For example: \\`sorted[0][sortColumn] = ${sorted[0][sortColumn]}\\`. \n\nThe \\`.\\` dot notation is more compact and convenient. For example: \\`sorted[0].RegionName = ${sorted[0].RegionName}\\`. \n\nJust keep in mind the property values *can* be functions:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"d3[\"max\"]([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"d3.max([1, 2, 3])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`\nBack to the matter at hand. Lets use those params to create an example SVG. This is what our margins and plot area will look like:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"createSVG = function(id) {\n let svg = d3.select(DOM.svg(params.svg.width, params.svg.height));\n svg.attr(\"id\", id);\n \n let plot = svg.append(\"g\");\n plot.attr(\"id\", \"plot\");\n plot.attr(\"transform\", translate(params.plot.x, params.plot.y));\n \n let rect = plot.append(\"rect\");\n rect.attr(\"id\", \"background\");\n \n rect.attr(\"x\", 0);\n rect.attr(\"y\", 0);\n rect.attr(\"width\", params.plot.width);\n rect.attr(\"height\", params.plot.height);\n \n // this returns an SVG for the notebook cell\n return svg.node(); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"createSVG(\"empty_svg\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`\nNow lets create our scales and see if your margins look good.\n\nWe will use the [d3-scale](https://github.com/d3/d3-scale) module. We have discrete dates and regions. We want to map those discrete values into *bands* (either the width or height of our cells), so we will use the ordinal [band scale](https://github.com/d3/d3-scale#band-scales) for both our *x* and *y* position scales.\n\nFor encoding our values, we will use a color scale—more on that later.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"mutable scale = {\n let x = d3.scaleBand();\n x.domain(dates);\n x.range([0, params.plot.width]);\n \n let y = d3.scaleBand();\n y.domain(regions);\n y.range([params.plot.height, 0]);\n \n return {x: x, y: y}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`\nUsing the *x* scale, the date \\`${dates[0]}\\` will map to pixel \\`${scale.x(dates[0])}\\` and the date \\`${dates[dates.length - 1]}\\` will map to pixel \\`${scale.x(dates[dates.length - 1])}\\`. The width of our cells will be \\`${scale.x.bandwidth()}\\` pixels.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"md`\nUsing the *y* scale, the region \\`${regions[0]}\\` will map to pixel \\`${scale.y(regions[0])}\\` and the region \\`${regions[regions.length - 1]}\\` will map to pixel \\`${scale.y(regions[regions.length - 1])}\\`. The height of our cells will be \\`${scale.y.bandwidth()}\\` pixels.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`\nWe can now create our axis components. Rather than figure out how to draw each tick mark and tick label, we will use the handy [d3-axis](https://github.com/d3/d3-axis) module.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"axis = {\n let x = d3.axisBottom(scale.x);\n x.tickPadding(0);\n \n let y = d3.axisLeft(scale.y);\n y.tickPadding(0);\n\n return {x: x, y: y};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`\nWe also want to format the date labels so that only the years are displayed. We can do this using the [\\`tickFormat()\\`](https://github.com/d3/d3-axis/blob/master/README.md#axis_tickFormat) function.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"function dateFormatter(d) {\n if (d.getMonth() < 3) {\n return d.getFullYear();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"dateFormatter(sorted[0].values[0].date);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"axis.x.tickFormat(function(d) {\n if (d.getMonth() < 3) {\n return d.getFullYear();\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`\nWe are also going to need to format our region names to be more compact.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"function regionFormatter(d) {\n let text = d;\n let parts = text.split(/[,-]+/);\n \n if (parts !== null) {\n text = parts[0];\n \n if (parts.length > 2) {\n text = text + \"+\";\n }\n }\n \n return text;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"regionFormatter(sorted[0].RegionName);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"regionFormatter(\"Los Angeles-Long Beach-Anaheim, CA\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"axis.y.tickFormat(regionFormatter);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"createPlot = function(id) {\n let node = createSVG(id);\n let svg = d3.select(node); \n\n let gx = svg.append(\"g\");\n gx.attr(\"id\", \"x-axis\");\n gx.attr(\"class\", \"axis\");\n gx.attr(\"transform\", translate(params.plot.x, params.plot.y + params.plot.height));\n gx.call(axis.x);\n\n let gy = svg.append(\"g\");\n gy.attr(\"id\", \"y-axis\");\n gy.attr(\"class\", \"axis\");\n gy.attr(\"transform\", translate(params.plot.x, params.plot.y));\n gy.call(axis.y);\n \n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"createPlot(\"axis_svg\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"md`\nWith the handy reactive notebook controls, we can modify the left margin and how many rows we are keeping as needed see it update immediately!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"viewof left = slider({\n min: 0,\n max: 500,\n step: 1,\n value: 80,\n title: \"Left Margin\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof keep = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 30, \n title: \"Rows to Keep\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`\nThe color scale already has the range set, but we still need to set the domain. That means we need the min and max of all the values in all of our data.\n\nTo get all of the values out of our data, we will use [\\`map()\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) JavaScript function and [\\`d3.merge()\\`](https://github.com/d3/d3-array/blob/master/README.md#merge). After getting all of the values into a single array, we will use the statistics functions in the [d3-array](https://github.com/d3/d3-array/blob/master/README.md#statistics) module to generate the domain.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"{\n // get all of the value objects (with date and value) from the rows\n let values = sorted.map(function(d) { return d.values; }); \n \n // combine all of the individual object arrays into one\n let merged = d3.merge(values);\n \n // get only the value part of the objects\n let mapped = merged.map(function(d) { return d.value; });\n \n // calculate the min, max, and median\n let min = d3.min(mapped);\n let max = d3.max(mapped);\n let mid = d3.mean(mapped);\n \n scale.color = d3.scaleSequential(d3.interpolateViridis);\n scale.color.domain([min, mid, max]);\n \n return scale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`\nAll this work to draw a bunch of boxes! With all of our scales set, we can finally generate our visualization.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"createHeatmap(\"heatmap\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`\n*Whoaaaaaa.....* Does it seem like we went from nothing to something pretty quick? Most of the work here is setting up the scales. Once we have them, we only need a handful lines of code in [D3.js](https://www.d3js.org/) to bind our data to visual elements!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`\nThere is a LOT of data we are looking at here: specifically ${regions.length * dates.length} values total. And we are able to see some interesting trends. \n\nFor example, some of the cities at the top stay consistently unaffordable. Various recessions are visible across regions (like the [early 2000s recession](https://en.wikipedia.org/wiki/Early_2000s_recession) and the [housing crisis](https://en.wikipedia.org/wiki/Subprime_mortgage_crisis) near 2008). And all of the regions shown appear to be getting *more* unaffordable.\n\n

\nGeeze there is so much yellow! That ended up being a bit more depressing than I was expecting?\n

CSS Style

\n\n

Click the cell to reveal.

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`\n## Imports\n\nThe various imports needed by this notebook are included here.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"// see: https://beta.observablehq.com/@tmcw/tables\nimport {table} from \"@tmcw/tables@444\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"import {ramp} from \"@mbostock/color-ramp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"