31:T949,hexbins = { const censusObj = properties.find(p => p.id === censusProp); const evictionObj = properties.find(p => p.id === evictionProp); const svg = d3.select(chart).select("g.chart"); svg.selectAll('.axis').remove(); const xAxis = d3.axisBottom(xScale) .tickFormat(v => { let val = v; if ('format' in censusObj) { val = d3.format(censusObj.format)(val); } if (censusObj.id.startsWith('pct-') || censusObj.id.endsWith('-rate') || censusObj.percent) { val += '%'; } return val; }).ticks(5); const yAxis = d3.axisLeft(yScale) .tickFormat(v => `${v}%`) .ticks(5); svg.append('g') .attr('transform', `translate(0, ${size.height - margin.bottom})`) .attr('class', 'axis x') .call(xAxis); svg.select('.axis.x') .append('text') .attr('fill', '#000') .attr('transform', `translate(${(size.width - margin.right) / 2},30)`) .style('text-anchor', 'middle') .text(censusObj.name); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .attr('class', 'axis y') .call(yAxis); svg.select('.axis.y') .append('text') .attr('fill', '#000') .attr('transform', 'rotate(-90)') .attr('x', -((size.height - margin.top) / 2)) .attr('y', -35) .style('text-anchor', 'middle') .text(evictionObj.name); const hexbin = d3.hexbin() .x(d => xScale(d[censusProp])) .y(d => yScale(d[evictionProp])) .radius(10); // Only display items which have both the eviction and census variables const binData = hexbin(counties).sort((a, b) => b.length - a.length); const opacityScale = d3.scaleSqrt() .domain([0, binData[0].length]) .range([0, 1]); const bins = svg.selectAll('path.hexbin').data(binData); bins.enter() .append('path') .attr('class', 'hexbin') .attr('fill', 'steelblue') .style('opacity', 0) .attr("d", hexbin.hexagon()) .transition() .duration(750) .ease(d3.easeQuad) .attr("transform", d => `translate(${d.x},${d.y})`) .style('opacity', d => opacityScale(d.length)); bins.transition() .duration(750) .ease(d3.easeQuad) .attr("transform", d => `translate(${d.x},${d.y})`) .style('opacity', d => opacityScale(d.length)); bins.exit() .transition() .duration(750) .ease(d3.easeQuad) .style('opacity', 0); }32:T42e,data = { function parseNum(val) { return val === '' ? -1 : +val; } return (await d3.csv("https://eviction-lab-data-downloads.s3.amazonaws.com/US/counties.csv")) .map(d => { return { id: d.GEOID, year: +d.year, name: `${d.name}, ${d['parent-location']}`, population: parseNum(d.population), 'pct-renter-occupied': parseNum(d['pct-renter-occupied']), 'poverty-rate': parseNum(d['poverty-rate']), 'median-gross-rent': parseNum(d['median-gross-rent']), 'median-household-income': parseNum(d['median-household-income']), 'rent-burden': parseNum(d['rent-burden']), 'pct-white': parseNum(d['pct-white']), 'pct-af-am': parseNum(d['pct-af-am']), 'pct-hispanic': parseNum(d['pct-hispanic']), evictions: parseNum(d['evictions']), 'eviction-rate': parseNum(d['eviction-rate']), 'eviction-filings': parseNum(d['eviction-filings']), 'eviction-filing-rate': parseNum(d['eviction-filing-rate']) }; }).filter(d => d.year === year); }33:[] 2f:{"title":"US Counties and Eviction Lab Data","cells":[{"id":0,"value":"md`# US Counties and Eviction Lab Data\n\nUsing data from the [Eviction Lab](https://evictionlab.org/) to show relationships between census variables and eviction/eviction filing rate.\n\nUse the brush on the map to filter the counties to display.\n\nCurrently displaying ${year} data for ${d3.format(',.0d')(counties.length)} counties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"chart = {\n const svg = d3.select(\n DOM.svg(size.width + mapSize.width + 50, Math.max(size.height, mapSize.height))\n ).attr(\"id\", \"main\");\n\n svg.append(\"g\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"class\", \"chart\");\n \n const path = d3.geoPath();\n const mapG = svg.append(\"g\")\n .attr(\"class\", \"minimap\")\n .attr(\"transform\", `translate(${size.width + 25},${size.height - mapSize.height})`);\n\n mapG.append(\"path\")\n .datum(topojson.feature(us, us.objects.nation))\n .attr(\"fill\", \"#ccc\")\n .attr(\"d\", path);\n\n mapG.append(\"path\")\n .datum(topojson.mesh(us, us.objects.counties, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n mapG.append('g').attr(\"class\", \"brush\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof censusProp = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"viewof evictionProp = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"viewof year = slider({value: 2016, min: 2000, max: 2016, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"brush = {\n function brushed() {\n const extent = d3.event.selection;\n // minX, minY, maxX, maxY\n mutable bbox = [\n extent[0][0],\n extent[0][1],\n extent[1][0],\n extent[1][1]\n ];\n }\n\n const brush = d3.brush().on(\"brush\", brushed);\n const brushG = d3.select(chart).select('g.brush');\n brushG.call(brush);\n\n console.log(brushG.select('rect.selection').style('display'));\n if (brushG.select('rect.selection').style('display') === 'none') {\n brushG.call(brush.move, [\n [mapSize.width * 0.1, mapSize.height * 0.1],\n [mapSize.width * 0.8, mapSize.height * 0.8]\n ]);\n } \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"mutable bbox = us.bbox","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"size = ({ width: 600, height: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"mapSize = ({ width: 300, height: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({ top: 15, left: 50, bottom: 45, right: 15 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"yScale = {\n const extent = d3.extent(counties.map(d => d[evictionProp]));\n const erMax = 20;\n const efrMax = 35;\n const yMax = evictionProp === 'eviction-rate' ? erMax : efrMax;\n return d3.scaleLinear()\n .domain([Math.max(0, extent[0]), yMax])\n .range([size.height - margin.bottom, margin.top]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"xScale = {\n const extent = d3.extent(counties.map(d => d[censusProp]));\n return d3.scaleLinear()\n .domain([Math.max(0, extent[0]), extent[1]])\n .range([margin.left, size.width - margin.right]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"properties = ([\n { name: 'Poverty Rate', id: 'poverty-rate', type: 'census', format: '0.2s', percent: true },\n { name: 'Population', id: 'population', type: 'census', format: '0.2s' },\n { name: 'Median Gross Rent', id: 'median-gross-rent', type: 'census', format: '$.2s' },\n { name: 'Median Household Income', id: 'median-household-income', type: 'census', format: '$.2s' },\n { name: 'Rent Burden', id: 'rent-burden', type: 'census', percent: true },\n { name: '% Renter Occupied', id: 'pct-renter-occupied', type: 'census' },\n { name: '% White', id: 'pct-white', type: 'census' },\n { name: '% African American', id: 'pct-af-am', type: 'census' },\n { name: '% Hispanic/Latino', id: 'pct-hispanic', type: 'census' },\n { name: 'Eviction Rate', id: 'eviction-rate', type: 'evictions' },\n { name: 'Eviction Filing Rate', id: 'eviction-filing-rate', type: 'evictions' }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"counties = {\n const countyFeatures = topojson.feature(us, us.objects.counties).features\n const countyIds = countyFeatures.map(f => {\n return {\n id: f.id,\n bbox: turf.bbox(f)\n };\n }).filter(f => {\n return (\n f.bbox[0] >= bbox[0] &&\n f.bbox[1] >= bbox[1] &&\n f.bbox[2] <= bbox[2] &&\n f.bbox[3] <= bbox[3]\n );\n }).map(f => f.id);\n return data.filter(d => countyIds.indexOf(d.id) !== -1)\n .filter(c => c[evictionProp] >= 0 && c[censusProp] >= 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"us = {\n const data = (await d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\"));\n data.transform.scale = data.transform.scale.map(d => d * 0.3);\n data.transform.translate = data.transform.translate.map(d => d * 0.3);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"https://d3js.org/d3-hexbin.v0.2.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}