31:T6e2,chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const drawHexes = (bins, color) => svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.1) .selectAll("path") .data(bins) .join("path") .attr("d", hexbin.hexagon()) .attr("transform", d => `translate(${d.x},${d.y})`) .attr("fill", d => color(d.length)) .attr("stroke", d => d.find(c => query && c.name.toLowerCase().includes(query.toLowerCase())) ? 'yellow' : 'transparent' ) .attr("stroke-width", "4px") .attr("stroke-opacity", "1") .append("title") .text( d => `Income: $${( Math.round(average(d, 'x') / 100) * 100 ).toLocaleString()}\nDegree rate: ${Math.round(average(d, 'y'))}%\n${ d.length === 1 ? d[0].name : `${d.length} counties: \n\u{2022} ${d .map(c => c.name) .join('\n\u{2022} ')}` }` ); const regression = (endpoints, color) => svg .append("path") .datum(endpoints) .attr("fill", "none") .attr("stroke", color) .attr("stroke-opacity", 0.5) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-dasharray", "10 10") .attr("stroke-linecap", "round") .style("pointer-events", "none") .attr( "d", d3 .line() .x(d => x(d.x)) .y(d => y(d.y)) ); drawHexes(bins, color); regression(regressionEndpoints, "blue"); drawHexes(pr_bins, pr_color); regression(pr_regressionEndpoints, "red"); return svg.node(); }32:[] 2f:{"title":"Education and income in U.S. states & Puerto Rico","cells":[{"id":0,"value":"md`# Education and income in U.S. states & Puerto Rico\n\nAn example of using data from the Data Desk's open-source [census-data-downloader](https://github.com/datadesk/census-data-downloader).
\n*Forked from [a visualization](https://observablehq.com/@datadesk/education-and-income-in-u-s-counties) by [Ben Welsh](https://observablehq.com/@palewire). Regression from [a notebook](https://observablehq.com/@tmcw/d3-line-chart-with-a-linear-regression-line) by [Tom MacWright](https://observablehq.com/@tmcw).*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"html`\n

\n US except Puerto Rico\n

\n\n

\n Puerto Rico\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"viewof query = text({ placeholder: 'Search counties\\u{2026}' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`Source: [American Community Survey 2017 five-year estimates](https://github.com/datadesk/census-data-downloader)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 780","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"x = d3.scaleLinear()\n .domain([11680, 129588])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear()\n .domain([4.6875, 78.13324886495619])\n .rangeRound([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"color = d3.scaleSequential(d3.interpolateRdPu)\n .domain([0, d3.max(bins, d => d.length) * 2/3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"pr_color = d3.scaleSequential(d3.interpolateGreens)\n .domain([0, d3.max(pr_bins, d => d.length) * 2/3])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", 4)\n .attr(\"y\", margin.top)\n .attr(\"dy\", \".71em\")\n .attr(\"fill\", \"currentColor\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof radius = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px radius`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"average = (items, key) => items.map(item => item[key]).reduce((a, b) => a + b) / items.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"hexbin = d3.hexbin()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .radius(radius * width / 964)\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"regressionLine = stats.linearRegressionLine(stats.linearRegression(dataByIncome.map(row => [row.x, row.y])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"regressionEndpoints = [\n { x: dataByIncome[0].x, y: regressionLine(dataByIncome[0].x) },\n { x: dataByIncome[dataByIncome.length - 1].x, y: regressionLine(dataByIncome[dataByIncome.length - 1].x) }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"dataByIncome = data.filter(d => !d.name.includes('Puerto Rico')).sort((a, b) => a.x - b.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"pr_regressionLine = stats.linearRegressionLine(stats.linearRegression(pr_dataByIncome.map(row => [row.x, row.y])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"pr_regressionEndpoints = [\n { x: pr_dataByIncome[0].x, y: pr_regressionLine(pr_dataByIncome[0].x) },\n { x: pr_dataByIncome[pr_dataByIncome.length - 1].x, y: pr_regressionLine(pr_dataByIncome[pr_dataByIncome.length - 1].x) }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"pr_dataByIncome = pr_data.slice().sort((a, b) => a.x - b.x)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"bins = hexbin(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"pr_bins = hexbin(pr_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"pr_data = Object.assign(data.filter(d => d.name.includes('Puerto Rico')), {\n x: \"Median household income ($)\",\n y: \"Bachelor's degree or higher (%)\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"data = {\n const data = [];\n names.forEach(d => {\n const income_data = raw_income_data.find(t => t.geoid == d);\n const education_data = raw_education_data.find(t => t.geoid == d);\n data.push({\n name: income_data.name,\n \"x\": +income_data.median,\n \"y\": (+education_data.total_bachelors_or_higher/+education_data.total)*100,\n })\n })\n return Object.assign(data, {\n x: \"Median household income ($)\",\n y: \"Bachelor's degree or higher (%)\",\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"names = raw_income_data.map(d => d.geoid)","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"raw_income_data = await d3.csv(\"https://raw.githubusercontent.com/datadesk/census-data-downloader/714bf0e5c03572360dd750fe93c0873218351973/data/processed/acs5_2017_medianhouseholdincome_counties.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"raw_education_data = await d3.csv(\"https://raw.githubusercontent.com/datadesk/census-data-downloader/714bf0e5c03572360dd750fe93c0873218351973/data/processed/acs5_2017_education_counties.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"stats = require('simple-statistics')","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"import { text } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}