32:T3bb9,{ const body = html`

20 senators would be replaced by governor of opposing

party in case of vacancy

Republican who would be replaced by Democratic governor

Democrat who would be replaced by Republican governor

Would not be replaced by opposing party

Interim replacement

Age

20 senators would be replaced by

governor of opposing party in case

of vacancy

Republican who would be replaced by Democratic governor

Democrat who would be replaced by Republican governor

Would not be replaced by opposing party

Interim replacement

Age

20 senators would be

replaced by governor of

opposing party in case

of vacancy

Republican who would be replaced by

Democratic governor

Democrat who would be replaced by

Republican governor

Would not be replaced by opposing party

Interim replacement

Age

` ai2html_resize(); return body; }33:Tc99,chart_initial = { // init plot + get relevant data and keyframe const cp = chart_param, svg = d3.select(DOM.svg(cp.width, cp.height)), nodes = senator_data.map(d => Object.assign(Object.create(d), {x: x(d.senator_age), y: y(Math.random())})), button = b; // create beeswarm simulation const sim = d3 .forceSimulation(nodes) .force("x", d3.forceX(d => x(d.senator_age)).strength(0.5)) .force("y", d3.forceY(y(0.5)).strength(0.1)) .force("collide", d3.forceCollide() .radius(d => cp.node_size[["small_node", "big_node"][d.opposing_party]] + cp.margin[["small_node", "big_node"][d.opposing_party]])); // draw nodes (with radius based on user input and no edges) const node = svg.selectAll(".node") .data(nodes).enter() .append("circle") .classed("node", true) .attr("id", d => d.senator_short.replace(" ", "-")) .attr("cx", d => x(d.senator_age)) .attr("cy", d => 0) .attr("r", d => cp.node_size[["small_node", "big_node"][d.opposing_party]]) .style("fill", d => d.opposing_party == 1 ? (d.senator_party === "R" ? "#ff704d" : "#3eb4ff") : "#e7e7e7"); // draw labels const labels = svg.selectAll("g.label") .data(nodes.filter(d => d.opposing_party == 1)).enter() .append("g") .classed("label", true) .attr("id", d => d.senator_short.replace(" ", "-")) .attr("transform", d => `translate(${d.x}, ${d.y})`); labels.append("text") .attr("id", d => d.senator_short.replace(" ", "-")) .attr("x", 0) .attr("y", `${(-0.3 * Math.max(width / 954, 0.6)).toFixed(2)}em`) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .style("font-size", `${(0.6 * Math.max(width / 954, 0.6)).toFixed(2)}em`) .style("font-family", "monospace") .text(d => d.senator_short); // wrap the labels svg.selectAll("g.label text") .each(function(d, i) { wrap_text_nchar(d3.select(this), 3) }); // draw axis svg.append("g") .attr("id", "x-axis") .attr("transform", `translate(0, ${cp.height - (cp.margin.bottom + cp.margin.top)})`) .call(d3.axisBottom(x) .tickSizeOuter(0) .tickSizeInner(10) .tickValues([35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85])) .call(g => g.selectAll("line, path") .style("stroke", "#e7e7e7")) .call(g => g.selectAll("text") .style("fill", "#898989") .style("font-family", "monospace") .style("font-size", `${Math.max(0.7, (1.3 * width / 954).toFixed(2))}em`)); // add axis label svg.append("text") .attr("id", "x-axis-label") .attr("x", x(60)) .attr("y", cp.height - (cp.margin.bottom + cp.margin.top) + Math.max((width / 954) * 45, 35)) .style("font-family", "monospace") .style("font-size", `${Math.max((width / 954).toFixed(2), 0.6)}em`) .style("text-anchor", "middle") .style("alignment-baseline", "middle") .text("Age") // update each node upon simulation tick sim.on("tick", () => { node.attr("cx", d => d.x).attr("cy", d => d.y); labels.attr("transform", d => `translate(${d.x}, ${d.y})`); }); return svg.node(); }34:T48d,md`### Step 3: Export it for the web After cleaning up the original version, I also made two vertical versions for mobile and used [ai2html](http://ai2html.org/) to export it all. This was my first time using ai2html, so apologies if I messed it up some how! --- ## Notes + Learnings - Unless I'm completely missing something, I think Ron Johnson (R-WI) should be highlighted in Will's original chart. The current governor, [Tony Evers (D)](https://en.wikipedia.org/wiki/Governor_of_Wisconsin), would be able fill the seat temporarily pending [a special election](https://www.ncsl.org/research/elections-and-campaigns/vacancies-in-the-united-states-senate637302453.aspx). I'll have to further explore, but for now, I'm going to include it in my chart. - This was a very useful exercise in getting better at Illustrator and then using ai2html to export it for the web. ## Data The data for this piece comes from: (1) [National Conference of State Legislatures](https://www.ncsl.org/research/elections-and-campaigns/vacancies-in-the-united-states-senate637302453.aspx) and (2) [Wikipedia](https://en.wikipedia.org/wiki/List_of_current_United_States_governors).`35:Ta5a,ai2html_resize = () => { // only want one resizer on the page if (document.documentElement.className.indexOf("g-resizer-v3-init") > -1) return; document.documentElement.className += " g-resizer-v3-init"; // require IE9+ if (!("querySelector" in document)) return; function resizer() { var elements = Array.prototype.slice.call(document.querySelectorAll(".g-artboard[data-min-width]")), widthById = {}; elements.forEach(function(el) { var parent = el.parentNode, width = widthById[parent.id] || parent.getBoundingClientRect().width, minwidth = el.getAttribute("data-min-width"), maxwidth = el.getAttribute("data-max-width"); widthById[parent.id] = width; if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) { el.style.display = "block"; } else { el.style.display = "none"; } }); try { if (window.parent && window.parent.$) { window.parent.$("body").trigger("resizedcontent", [window]); } if (window.require) { require(['foundation/main'], function() { require(['shared/interactive/instances/app-communicator'], function(AppCommunicator) { AppCommunicator.triggerResize(); }); }); } } catch(e) { console.log(e); } } document.addEventListener('DOMContentLoaded', resizer); // feel free to replace throttle with _.throttle, if available window.addEventListener('resize', throttle(resizer, 200)); function throttle(func, wait) { // from underscore.js var _now = Date.now || function() { return new Date().getTime(); }, context, args, result, timeout = null, previous = 0; var later = function() { previous = _now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _now(), remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } return result; }; } }36:[{"id":"12101d4c0871d56a167897a0855715089f1df69f0d3ab2661ceeb8231533c93f27df60a86d6f343dfb120b1715d88f2f79203d52c225af6af9eb1614296dcea4","href":"https://static.observableusercontent.com/files/12101d4c0871d56a167897a0855715089f1df69f0d3ab2661ceeb8231533c93f27df60a86d6f343dfb120b1715d88f2f79203d52c225af6af9eb1614296dcea4","name":"current_senators_and_state_data_20210304@1.csv","type":"text/csv","lastModified":1614926033893.048,"size":8263},{"id":"76b2c8c087622a5e1bcd9411981325033fe4e1dd090d20b78ad127e09fa536d97640d42840799449d44f2662796123f791e6195d02dbf9f52456909c6f23e09e","href":"https://static.observableusercontent.com/files/76b2c8c087622a5e1bcd9411981325033fe4e1dd090d20b78ad127e09fa536d97640d42840799449d44f2662796123f791e6195d02dbf9f52456909c6f23e09e","name":"clean-it-up-in-illustrator.gif","type":"image/gif","lastModified":1615061912526.691,"size":1106967},{"id":"30279fdca5e4b34989e1375f86b6bddc5a8158136ca10a9df7974724adbcdd83e9e268b30fecda672ad47b682c0a165da17f45d7dccd624ee381036627652d0b","href":"https://static.observableusercontent.com/files/30279fdca5e4b34989e1375f86b6bddc5a8158136ca10a9df7974724adbcdd83e9e268b30fecda672ad47b682c0a165da17f45d7dccd624ee381036627652d0b","name":"cleaned-up-20210306-main@1.jpg","type":"image/jpeg","lastModified":1615085964094.426,"size":110250},{"id":"4c0a6b63f4a14307135ba5c584ffac69744c42aaaf072979923edf8b9295007b9499c0c2ecd8ffb8de707d04464b104461dae3857376296d7d263858621e0384","href":"https://static.observableusercontent.com/files/4c0a6b63f4a14307135ba5c584ffac69744c42aaaf072979923edf8b9295007b9499c0c2ecd8ffb8de707d04464b104461dae3857376296d7d263858621e0384","name":"cleaned-up-20210306-vertical@1.jpg","type":"image/jpeg","lastModified":1615085949884.404,"size":112012},{"id":"30e61163e207939e7430407e8aeec0480ea0b443a8e6a583c9f539019babb69e863b72cb2a439b2a934788274a2434f2c74f1bb8ad22dba2e78a82e29b04655f","href":"https://static.observableusercontent.com/files/30e61163e207939e7430407e8aeec0480ea0b443a8e6a583c9f539019babb69e863b72cb2a439b2a934788274a2434f2c74f1bb8ad22dba2e78a82e29b04655f","name":"cleaned-up-20210306-vertical-narrow@1.jpg","type":"image/jpeg","lastModified":1615085926398.653,"size":106045}] 30:{"title":"How Senate control could flip with 1 resignation, retirement, or death","cells":[{"id":0,"value":"md`# How Senate control could flip with 1 resignation, retirement, or death\n\nA recreation of [a chart](https://www.axios.com/senate-control-flip-ce1ee299-a6d7-4c63-940a-e5ca4335dcd6.html) from Will Chase at Axios.\n\nThis recreation is a mild mix of D3 work (making a beeswarm and then displaying an image with label overlays) as well as some [\"clean up in Adobe Illustrator\"](https://dataviztoday.com/blog/22) along the way.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"html`

Note: Bernie Sanders is an independent who caucuses with the Democrats.
Data: ProPublica/NCSL\n
Original Chart: Will Chase/Axios.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"md`---\n\n## Process\n\n### Step 1: Plot initial data in D3/SVG\n\nUsing the data, I just wanted to make a simple beeswarm chart out of the data using [\\`d3-force\\`](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho) so I'll only need to do minor touch up in Illustrator.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof b = button({ value: \"Re-draw beeswarm\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`For easy of identifying which highlighted node is which, I added little text labels and used [my pre-built text wrapping functions](https://observablehq.com/@ben-tanen/svg-text-and-tspan-word-wrapping) :)\n\n### Step 2: Clean it up in Illustrator\n\nAfter plotting the data, I saved a version of the beeswarm SVG and opened it up in Illustrator. Below is a simple GIF of the clean up steps. I like making \"progress GIFs.\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"FileAttachment(\"clean-it-up-in-illustrator.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"senator_data = senator_data_raw.map(d => ({\n state: d.state_abbr,\n senator_name: d.senator_name,\n senator_short: d.senator_name.split(\" \").map(e => e.slice(0, 3)).join(\" \"),\n senator_age: ((new Date()) - d.senator_dob) / (1000 * 60 * 60 * 24 * 365.25),\n senator_party: d.senator_party,\n opposing_party: ([\"Gubernatorial\", \"Special Election\"].indexOf(d.appointment_type) >= 0 & d.senator_party != d.governor_party) ? 1 : 0\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"senator_data_raw = FileAttachment(\"current_senators_and_state_data_20210304@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"chart_param = ({ \n width: width,\n height: width / 2,\n node_size: {\n big_node: (22 / 954) * width,\n small_node: (7 / 954) * width\n },\n font_size: 0,\n margin: {\n top: (65 / 954) * width,\n left: (80 / 954) * width,\n right: (80 / 954) * width,\n bottom: (65 / 954) * width,\n big_node: (3 / 954) * width,\n small_node: (1 / 954) * width\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"x = d3.scaleLinear()\n .domain(d3.extent(senator_data, d => d.senator_age))\n .range([chart_param.margin.left, \n chart_param.width - (chart_param.margin.right + chart_param.margin.left)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"y = d3.scaleLinear()\n .domain([0, 1])\n .range([chart_param.height - (chart_param.margin.top + chart_param.margin.bottom),\n chart_param.margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"import { wrap_text, wrap_text_nchar } from \"@ben-tanen/svg-text-and-tspan-word-wrapping\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}