36:null 37:["$","title",null,{"children":"Paying a premium to live on the country's coasts | Taylor Johnston | Observable"}] 3d:[{"id":"242d15160503cd1fcf68b9ce4af4620b02afa7f88842cf6211e180553ebdb30846f8c6de3718fd7fd8b8045f23e2225898b23326450ae30eef0ce2db8f589605","href":"https://static.observableusercontent.com/files/242d15160503cd1fcf68b9ce4af4620b02afa7f88842cf6211e180553ebdb30846f8c6de3718fd7fd8b8045f23e2225898b23326450ae30eef0ce2db8f589605","name":"data_new.csv","type":"text/csv","lastModified":1619466552562.078,"size":69596},{"id":"d357fd1871bc5a744ae1d22e9c0e68cf030f809689e0f69af0df3b7174f809b00ae13059033a981e46cb247d49fcacca6b023bbc544ce8a821b8700d4da4e034","href":"https://static.observableusercontent.com/files/d357fd1871bc5a744ae1d22e9c0e68cf030f809689e0f69af0df3b7174f809b00ae13059033a981e46cb247d49fcacca6b023bbc544ce8a821b8700d4da4e034","name":"states-albers-10m-1.json","type":"application/json","lastModified":1619466116807.598,"size":159455}] 3b:{"id":"6a60b0b1a2617834","slug":"paying-a-premium-to-live-on-the-countrys-coasts","title":"Paying a premium to live on the country's coasts","thumbnail":"85542b168e13ca09e1c23661aa9924cbb67dd035c7adbbbc6bd8cea6b04c80ac","access_level":"public","create_time":"$D2021-04-26T19:39:53.526Z","update_time":"$D2021-04-27T13:15:15.400Z","view_time":null,"first_public_time":"$D2021-04-27T02:59:51.141Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9d27a728b19b95c5","login":"johnstont05","name":"Taylor Johnston","avatar_url":"https://avatars-next.observableusercontent.com/712a22b359f268c222fa28ffd07e76f5780906dfa39c472ddeecb7f9e1511eaa","tier":"starter_2024","bio":"Interactive Graphics Reporter for Hearst Connecticut Media Group","following":false},"version":452,"publish_version":452,"role":null,"authored":false,"authors":[{"type":"individual","id":"e00e3e2a3e69cc92","login":"johnstont05","name":"Taylor Johnston","avatar_url":"https://avatars-next.observableusercontent.com/712a22b359f268c222fa28ffd07e76f5780906dfa39c472ddeecb7f9e1511eaa","tier":null,"bio":"Visual Data Journalist at CBS News","following":false}],"members":[{"type":"individual","id":"e00e3e2a3e69cc92","login":"johnstont05","name":"Taylor Johnston","avatar_url":"https://avatars-next.observableusercontent.com/712a22b359f268c222fa28ffd07e76f5780906dfa39c472ddeecb7f9e1511eaa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f46f3a5b7dca684","slug":"makeover-monday","title":"Makeover Monday","owner":{"id":"9d27a728b19b95c5","login":"johnstont05","name":"Taylor Johnston"}},"type":"notebook","body":{"titling":"auto","title":"Paying a premium to live on the country's coasts","cells":[{"id":0,"value":"md`# Paying a premium to live on the country's coasts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`### Regional price parities (RPPs) can be used to measure how expensive things – such as goods and services – in one place compared to another. For example, states located on the coasts have higher rent price parity indexes compared to most inland states.

As of 2019, California and Hawaii's indexes are more than 50% higher than the national average (100), whereas Mississippi's indexes are 40% below the average.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"chart = {\n const container = d3.create(\"div\").attr(\"class\", \"container\");\n\n //LEGEND\n const legendScale = container\n .append(\"svg\")\n .attr(\"class\", `legend`)\n .attr(\"width\", 300)\n .attr(\"height\", 70);\n\n legendScale\n .append(\"g\")\n .attr(\"transform\", \"translate(60, 20)\")\n .append(() =>\n legend({\n color: colorScale,\n width: 150,\n title: \"Rent price parity index\",\n tickValues: ticks\n })\n );\n\n const svg = container\n .append(\"svg\")\n .attr(\"viewBox\", [0, 0, 1045, 650])\n .attr(\"class\", \"map\");\n\n const g = svg.append(\"g\");\n\n g.selectAll(\"path\")\n .data(topojson.feature(us, us.objects.states).features)\n .enter()\n .append(\"path\")\n .attr(\"class\", \"state\")\n .attr(\"stroke\", \"#282828\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path)\n .attr(\"fill\", (d) => colorScale(stateRate.get(d.properties.name)))\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout);\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`Source: [Bureau of Economic Analysis (2019 Data)](https://apps.bea.gov/iTable/iTable.cfm?reqid=70&step=1&acrdn=8)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"data = d3\n .csvParse(await FileAttachment(\"data_new.csv\").text(), d3.autoType)\n .map((d) => ({\n ...d,\n Index: +d.Index\n }))\n .filter((d) => d.year === 2019)\n .filter((d) => d.state !== \"United States\")\n .filter((d) => d.description === \"Rents\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"stateRate = new Map(data.map((d) => [d.state, d.Index]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"stateName = new Map(data.map((d) => [d.state, d.state]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"us = FileAttachment(\"states-albers-10m-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`### Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"tooltip = {\n const container = d3.select(\"div\");\n container\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .attr(\n \"style\",\n \"background-color:#fff;border:1px solid black;border-radius:3px;display:none;font-size:12px;font-family: 'Poppins', sans-serif;width:150px;padding:4px;pointer-events:none;position:absolute;text-align:center\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"mouseover = (d) => {\n let html = ` ${stateName.get(d.properties.name)}
\nRent price parity index: ${stateRate.get(d.properties.name)}`;\n d3.select(\"#tooltip\").style(\"display\", \"block\").html(html);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"mousemove = d => {\n const tooltip = d3.select('#tooltip');\n let x = d3.event.pageX;\n let w = 125;\n\n tooltip\n .style('top', d3.event.pageY + 12 + 'px')\n .style(x > width * .8 ? 'right' : 'left', x + 12 + 'px');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"mouseout = d => {\n d3.select('#tooltip').style('display', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"ticks = [60, 80, 100, 120, 140, 160]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"colors = [\"#456993\", \"#8498b6\", \"#c1cada\", \"#ffefc1\", \"#ffdd7b\", \"#ffca00\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"colorScale = d3.scaleLinear().domain(ticks).range(colors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"albersProjection = d3\n .geoAlbersUsa()\n .scale(1300)\n .translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3c:"$3b:body"