31:T8b0,svg = { const svg = d3.select(DOM.svg(width, height)); if (showHeader) { const header = svg.append('g').append('text') .attr('y', headerFontSize + margin.top) .attr('x', margin.left) .attr('font-size', headerFontSize) .attr('font-family', 'sans-serif'); header.append('tspan') .text('Ideological Shift in the House') header.append('tspan') .text(' by @zzzev') .attr('fill', 'rgba(0, 0, 0, 0.2)'); } const getX = d => d[0]; const getY = d => -d[1]; const line = d3.line() .x(getX) .y(getY) .curve(d3.curveCardinal); const area = d3.area() .x(getX) .y0(-perRowY(epsilon)) .y1(getY) .curve(d3.curveCardinal); const perSession = svg.append('g') .selectAll('g').data(chartData).enter() .append('g') .attr('class', d => `congress-${d[0]}`) .attr('transform', d => `translate(0, ${rowY(115 - d[0])})`) .attr('opacity', 0); perSession.transition().duration(500).delay((d, i) => i * 250) .attr('opacity', 1); // area perSession .selectAll('g.area').data(d => d[1]).enter() .append('g').attr('class', 'area').attr('fill', d => color(d[0])).attr('opacity', 0.2) .selectAll('path').data(d => [d[1]]).enter() .append('path') .attr('d', area); // stroke perSession .selectAll('g.line').data(d => d[1]).enter() .append('g') .attr('class', 'line') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 0.5) .attr('opacity', 0.5) .selectAll('path').data(d => [d[1]]).enter() .append('path') .attr('d', line); const xAxis = svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(3)) .attr('font-size', axisFontSize); xAxis.select('.tick:last-child text').clone() .text('voteview.com NOMINATE score') .attr('text-anchor', 'end') .attr('font-weight', 700) .attr('transform', `translate(0, ${width / 60})`); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(rowY).tickSizeOuter(0).tickFormat(t => 2018 - t * 2)) .attr('font-size', axisFontSize); return svg.node(); }32:[] 2f:{"title":"Ideological Shift in the House of Representatives","cells":[{"id":0,"value":"md`# Ideological Shift in the House of Representatives\n\nI came across an earlier version of this graphic [here](https://twitter.com/rowlsmanthorpe/status/1060104225089351680), but could not find the original context. The data was easily available (thanks [Voteview](//voteview.com)), so I figured I'd recreate it, and see how the last few years stack up with the trend.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"html`Data source: Lewis, Jeffrey B., Keith Poole, Howard Rosenthal, Adam Boche, Aaron Rudkin, and Luke Sonnet (2018). Voteview: Congressional Roll-Call Votes Database. https://voteview.com/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"html`${color.domain().map(d => {\n return `

\n ${d}\n

`;\n})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"viewof sessionsBack = slider({\n min: 5,\n max: 115,\n step: 1,\n value: 30,\n description: 'Number of congressional sessions to show',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof hillHeight = slider({\n min: 10,\n max: height,\n step: 1,\n value: Math.round(height / 5),\n description: 'Amount of overlap',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"viewof filterThirdParties = checkbox({\n options: [{ value: 'filter', label: \"Filter out third parties\" }],\n value: 'filter'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"chartData = Object.entries(houseDataByCongressAndParty).slice(-(sessionsBack + 1)).map(c => {\n c[1] = c[1].filter(p => filterThirdParties ? p[0] === 'Republican Party' || p[0] === 'Democratic Party' : true)\n .map(p => {\n return [\n p[0],\n p[1].filter((d, i) => { // remove zero points unless adjacent to non-zero points\n if (!almostZero(d[1])) return true;\n if (i !== 0 && !almostZero(p[1][i - 1][1])) return true;\n if (i < p[1].length - 1 && !almostZero(p[1][i + 1][1])) return true;\n }).map(d => [x(d[0]), perRowY(d[1])])\n ]\n });\n // trim kde data\n // p[1] = p[1].filter((d, i) => { // remove zero points unless adjacent to non-zero points\n // if (d[1] !== 0) return true;\n // if (i !== 0 && p[1][i - 1][1] !== 0) return true;\n // if (i < p[1].length - 1 && p[1][i + 1][1] !== 0) return true;\n // });\n // return p;\n // });\n return c;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"showHeader = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"headerFontSize = width / 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"axisFontSize = width / 70","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"epsilon = 1e-1","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"almostZero = (n) => Math.abs(n) <= epsilon","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"buckets = width / 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"rowOffset = (height - margin.top - margin.bottom - hillHeight) / sessionsBack","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"rowY = d3.scaleLinear()\n .domain([0, sessionsBack])\n .range([height - margin.bottom, margin.top + hillHeight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"perRowY = d3.scaleLinear()\n .domain([0, maxKdeValue]).nice()\n .range([0, hillHeight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"biggestBucket = d3.max(chartData, q =>\n d3.max(q[1], w => \n d3.max(w[1], e => e.length)\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"x = d3.scaleLinear()\n .domain(d3.extent(houseData.filter(d => d.congress >= 115 - sessionsBack), d => d.nominate_dim1)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"margin = ({\n top: width / 100,\n left: width / 16,\n bottom: width / 20,\n right: width / 60,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"height = width * 9 / 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"maxKdeValue = {\n const entries = Object.entries(houseDataByCongressAndParty).slice(-(sessionsBack + 1));\n return d3.max(entries, c => {\n const [congress, parties] = c;\n return d3.max(parties, p => {\n const [party, data] = p;\n return d3.max(data, d => d[1]);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"houseDataByCongressAndParty = {\n const getScore = d => d.nominate_dim1;\n const treed = houseData.reduce((o, d) => {\n const party = parties[d.party_code];\n o[d.congress] = o[d.congress] || {};\n o[d.congress][party] = o[d.congress][party] || []\n o[d.congress][party].push(d);\n return o;\n }, {});\n Object.keys(treed).forEach(congress => {\n const session = treed[congress];\n const h = d3.histogram()\n .domain(x.domain())\n .value(getScore)\n .thresholds(buckets);\n const kde = science.stats.kde().bandwidth(science.stats.bandwidth.nrd0);\n treed[congress] = Object.entries(session).map(entry => {\n const [partyName, reps] = entry;\n return [\n partyName,\n kde.sample(reps.map(getScore))(d3.range(margin.left, width - margin.right).map(x.invert))\n ];\n });\n });\n return treed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"houseData = data.filter(d => d.chamber === 'House')","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"color = d3.scaleOrdinal()\n .domain(['Democratic Party', 'Republican Party'])\n .range([d3.schemeCategory10[0], d3.schemeCategory10[3]])\n .unknown('rgba(0,0,0,0.3)')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n const csv = await d3.csv('https://cors-anywhere.herokuapp.com/https://voteview.com/static/data/out/members/HSall_members.csv');\n return csv.map(d => {\n const r = {...d};\n Object.entries(r).forEach((entry) => {\n const [key, value] = entry;\n if (/^[-0-9]/.test(value)) {\n r[key] = /\\./.test(value) ? parseFloat(value) : parseInt(value);\n }\n });\n return r;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"parties = {\n const csv = await d3.csv('https://gist.githubusercontent.com/zzzev/5131937fbd6cf492e52c89229034c945/raw/d0c999b8973a1ced6ebf256294ebada007ceff86/voteview_party_codes.csv')\n return csv.reduce((o, d) => {\n o[parseInt(d['Party Code'])] = d['Party Name'];\n return o;\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"science = require('https://bundle.run/science@1.9.3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"import {checkbox, slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}