30:T40e,map = { const div = d3.select(DOM.element('div')).style('width', width + 'px').style('height', height + 'px'); const svg = div.append('svg').style('position', 'absolute').attr('width', '100%').attr('height', '100%'); div.node().insertBefore(basemap.canvas, svg.node()); d3.select(basemap.canvas).style('position', 'absolute'); div.select('svg').selectAll("circle") .data(data) .join("circle") // .sort(function(a,b) { return Math.abs(b.properties[budget]) - Math.abs(a.properties[budget]) }) .attr("fill", d => loan_rate(d) > 0.04 ? '#c55147' : '#007697') .attr('fill-opacity', d => loan_rate(d) > 0.04 ? .8 : .5) .attr('cx', d => d[1].x) .attr('cy', d => d[1].y) .attr("r", d => d[1].households > 1000 ? 70 * loan_rate(d) : null) // .on('mouseover click', (d) => div.property("value", d.properties).dispatch("input")) // .on('mouseout', () => div.property("value", "").dispatch("input")) // div.property("value", "").dispatch('input'); return div.node(); }31:T78b,viewof url = { const options = [ { name: "CartoDB Voyager", value: (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.basemaps.cartocdn.com/rastertiles/voyager/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`, selected: true }, { name: "Stamen Terrain", value: (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/terrain/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png`, }, { name: "Stamen Toner", value: (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/toner/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png` }, { name: "Stamen Toner (hybrid)", value: (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/toner-hybrid/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png` }, { name: "Stamen Toner (lite)", value: (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/toner-lite/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}.png` }, { name: "Stamen Watercolor", value: (x, y, z) => `https://stamen-tiles-${"abc"[Math.abs(x + y) % 3]}.a.ssl.fastly.net/watercolor/${z}/${x}/${y}.png` }, { name: "OSM Mapnik", value: (x, y, z) => `https://${"abc"[Math.abs(x + y) % 3]}.tile.osm.org/${z}/${x}/${y}.png` }, { name: "Wikimedia Maps", value: (x, y, z) => `https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png` } ]; const form = html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"loan_rate = (d) => d[1].households ? d[1][radioValue.year] / d[1].households : null","pinned":true,"hidden":false,"mode":"ojs"},{"id":1091,"value":"data = {\n let data = await d3.json(\"https://pbogden.github.io/single/data/irs_data.json\");\n data = Object.entries(data);\n data = data.filter(d => projection([d[1].lon, d[1].lat]) != null) // removes Puerto Rico\n data.forEach(d => { \n let xy = projection([d[1].lon, d[1].lat]);\n d[1].x = xy[0]; \n d[1].y = xy[1];\n return d; \n });\n return data\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`### Map\nMap tiles copyright [OpenStreetMap contributors](https://www.openstreetmap.org/copyright).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 600 * width / 960;","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"tileSize = 256","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"tile = d3.tile()\n .size([width, height])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"projection = d3.geoMercator()\n .center([-96, 39])\n .scale(Math.pow(2, 12.5) / (2 * Math.PI))\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"basemap = {\n const tiles = tile();\n const [x0, y0] = tiles[0];\n const [x1, y1] = tiles[tiles.length - 1];\n const offscreenContext = DOM.context2d((x1 - x0 + 1) * tileSize, (y1 - y0 + 1) * tileSize);\n for (const [x, y, image] of await Promise.all(tiles.map(([x, y, z]) => new Promise((resolve, reject) => {\n const image = new Image;\n image.onerror = reject;\n image.onload = () => resolve(image);\n image.src = url(x, y, z);\n }).then(image => [x, y, image])))) {\n offscreenContext.drawImage(image, (x - x0) * tileSize, (y - y0) * tileSize, tileSize, tileSize);\n }\n const context = DOM.context2d(width, height);\n context.drawImage(\n offscreenContext.canvas,\n Math.round((x0 + tiles.translate[0]) * tiles.scale),\n Math.round((y0 + tiles.translate[1]) * tiles.scale),\n (x1 - x0 + 1) * tiles.scale,\n (y1 - y0 + 1) * tiles.scale\n );\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1154,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1099,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}