31:T4fd,function mousemoved() { const [mx, my] = d3.mouse(d3.select(this).node()); // the mutable keyword is an Observable thing, don't reference it on a normal browser // https://observablehq.com/@observablehq/introduction-to-mutable-state mutable hover = find(mx, my); if (!hover) return mouseleft(); // quick trick for avoiding the edges in the tooltip const xRatio = mx / width; const yRatio = my / height; d3 .select(tooltip) .style('display', 'block') .style( 'left', `${xRatio > 0.75 ? mx - 330 : mx + 10}px` ) .style( 'top', `${yRatio > 0.75 ? my - 120 : my + 10}px` ) .html(`

Name

${hover.name}

State

${hover.state}-${hover.district === "" ? 'AL' : hover.district}

Party

${hover.party}

Environmental Rating

${hover.environmental_rating}

Ideological Rating

${d3.format("0.2%")(hover.ideology_rating)}

`); }32:[] 2f:{"title":"Political Landscape","cells":[{"id":0,"value":"md`# Political Landscape`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`This chart creates a \"political environmental landscape\" by comparing current congressional politicians ideological scores, as calculated by [govtrack.us](https://www.govtrack.us/congress/members/report-cards/2018/house/ideology) ([methodology](https://www.govtrack.us/about/analysis#ideology)), with the politician's national environmental rating, as calculated by the [League of Conservation Voters](http://scorecard.lcv.org/members-of-congress) ([methodology](http://scorecard.lcv.org/methodology))`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`With observable help from:\n* https://observablehq.com/@d3/density-contours\n* https://observablehq.com/@martgnz/distance-limited-interaction-with-d3-delaunay`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"container = html`\n

\n ${chart}\n ${tooltip}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"chart = {\n const svg = d3.create('svg')\n .attr('width', width)\n .attr('height', height);\n \n const g = svg\n .append('g')\n \n g.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .selectAll(\"path\")\n .data(contours)\n .enter().append(\"path\")\n .attr(\"stroke-width\", (d, i) => i % 5 ? 0.25 : 1)\n .attr(\"fill\", d => colorScale(d.value))\n .attr(\"d\", d3.geoPath());\n \n g.append('g')\n .selectAll('circle')\n .data(data)\n .join('circle')\n .attr('cx', d => x(d.ideology_rating))\n .attr('cy', d => y(d.environmental_rating))\n .attr('stroke', 'white')\n .attr('stroke-width', 1)\n .attr('fill', d => d.party === \"R\" ? 'red' : 'blue')\n .attr('r', 2.5)\n \n g.append('g').call(rect);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"tooltip = {\n const div = d3\n .create('div')\n .style('width', '300px')\n .style('position', 'absolute')\n .style('padding', '5px')\n .style('border', '1px solid #ccc')\n .style('pointer-events', 'none')\n .style('background', 'white')\n .style('display', 'none');\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"colors = [\"#fff\", \"#fed976\", \"#feb24c\", \"#fd8d3c\", \"#fc4e2a\", \"#e31a1c\", \"#bd0026\", \"#800026\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"linearColorScale = d3.scaleLinear()\n .domain(d3.range(0,1,1/colors.length))\n .range(colors)\n .interpolate(d3.interpolateLab);","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"ramp(linearColorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"colorScale = d3.scaleOrdinal()\n .domain(contours.map(d => d.value))\n .range(d3.quantize(linearColorScale, threshold_domain.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"threshold_domain = contours.map(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"delaunay = d3.Delaunay.from(data, d => x(d.ideology_rating), d => y(d.environmental_rating ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"rect = g =>\n g\n .append('rect')\n .attr('fill', 'transparent')\n .attr('width', width)\n .attr('height', height)\n .on('mousemove', mousemoved)\n .on('mouseleave', mouseleft)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"mutable hover = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"mouseleft = () => {\n d3.select(tooltip).style('display', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"distance = (px, py, mx, my) => {\n const a = px - mx;\n const b = py - my;\n\n return Math.sqrt(a * a + b * b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"find = (mx, my) => {\n const idx = delaunay.find(mx, my);\n\n if (idx !== null) {\n const datum = data[idx];\n const d = distance(x(datum.ideology_rating), y(datum.environmental_rating), mx, my);\n\n return d < 50 ? datum : null;\n }\n\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data.map(d => d.ideology_rating)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data.map(d => d.environmental_rating))).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"y\", 35)\n .attr('x', -35)\n .attr(\"dy\", null)\n .attr(\"font-weight\", \"bold\")\n .text('More Conservative'))\n .call(g => g.select(\".tick:first-of-type text\").clone()\n .attr(\"y\", 35)\n .attr('x', -65)\n .attr('text-anchor', 'start')\n .attr(\"dy\", null)\n .attr(\"font-weight\", \"bold\")\n .text('More Liberal'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", -180)\n .attr(\"y\", -35)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"transform\", \"rotate(-90)\")\n .text(\"More Pro-Environment Voting Record\"))\n .call(g => g.select(\".tick:first-of-type text\").clone()\n .attr(\"x\", 0)\n .attr(\"y\", -35)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"transform\", \"rotate(-90)\")\n .text(\"Less Pro-Environment Voting Record\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"voronoi = d3.voronoi()\n .x(d => x(d.ideology_rating))\n .y(d => y(d.environmental_rating))\n .extent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"contours = d3.contourDensity()\n .x(d => x(d.ideology_rating))\n .y(d => y(d.environmental_rating))\n .size([width, height])\n .bandwidth(30)\n .thresholds(30)\n (data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mutable data = fetch(\"https://gist.githubusercontent.com/efrymire/cc1d66b2169184ae048047a2749e2fcd/raw/bcd19cced94e54e244081cd1dbe2b027938b0db8/politics_contour_data.json\").then(response => {\n return (response.ok) ? response.json() : false;\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3@5\", \"d3-delaunay@^5.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"import { ramp } from \"@d3/working-with-color\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}