31:Td55,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("cursor", "ew-resize"); const gx = svg.append("g").call(xAxis, x); svg.append("g").call(yAxis); const clip = DOM.uid("clip"); svg .append("clipPath") .attr("id", clip.id) .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - margin.left - margin.right) .attr("height", height - margin.top - margin.bottom); function yPos(d) { return y(d.seat) + y.step() / 2; } function color(d) { return partyColor(d.parnom); } const plot = svg .append("g") .attr("clip-path", clip) .attr("cursor", "crosshair"); const stroke = 1; const line = plot.append("g"); line .selectAll("line") .data(data.filter(d => d.dateserb !== 999 && d.datesere !== 777)) .join(enter => enter .append("line") .attr("stroke", color) .attr("stroke-width", stroke) .attr("stroke-dasharray", d => (d.success === 1 ? "" : "3")) .attr("x1", d => x(d.dateserb)) .attr("x2", d => (d.datesere !== 999 ? x(d.datesere) : x(now))) .attr("y1", yPos) .attr("y2", yPos) .call(title) ); const r = 3.5; const end = plot.append("g"); end .selectAll("circle") .data( data.filter(d => d.dateserb !== 999 && ![777, 999].includes(d.datesere)) ) .join(enter => enter .append("circle") .attr("r", r) .attr("cx", d => x(d.datesere) - r) .attr("cy", yPos) .attr("fill", color) .call(title) ); end .selectAll("path") .data(data.filter(d => d.datesere === 999)) .join(enter => enter .append("path") .attr("fill", color) .attr("transform", d => `translate(${x(now)},${yPos(d)})`) .attr("d", `M0,0 L-6,-${r * 1.5} L-4,0 L-6,${r * 1.5} z`) .call(title) ); return Object.assign(svg.node(), { zoom() { const zoom = d3 .zoom() .scaleExtent([1, 64]) .extent([[margin.left, 0], [width - margin.right, height]]) .translateExtent([ [margin.left, -Infinity], [width - margin.right, Infinity] ]) .on("zoom", zoomed); svg.call(zoom); function zoomed() { const xz = d3.event.transform.rescaleX(x); line .selectAll("line") .attr("x1", d => xz(d.dateserb)) .attr("x2", d => (d.datesere !== 999 ? xz(d.datesere) : xz(now))); end.selectAll("circle").attr("cx", d => xz(d.datesere) - r); end .selectAll("path") .attr("transform", d => `translate(${xz(now)},${yPos(d)})`); gx.call(xAxis, xz); } }, update(p) { const t = d3 .transition() .duration(150) .ease(d3.easeLinear); line .selectAll("line") .transition(t) .attr("stroke-opacity", 1); end .selectAll("circle, path") .transition(t) .attr("fill-opacity", 1); if (p) { line .selectAll("line") .filter(d => d.presname !== p) .transition(t) .attr("stroke-opacity", 0.05); end .selectAll("circle, path") .filter(d => d.presname !== p) .transition(t) .attr("fill-opacity", 0.05); } } }); }32:T538,viewof missingTable = table( data .filter(d => d.dateserb === 999 || d.datesere === 777) .sort((a, b) => d3.ascending(a.name, b.name)), { style: "compact", columns: { name: { formatter(val) { return html`${val}`; } }, success: { title: "appointment", type: "string", formatter(val) { return val === 1 ? "Senate" : "Recess"; } }, seat: { type: "string", formatter(val) { return val === 1 ? "Chief" : val; } }, parnom: { title: "party", type: "string", formatter(val) { return html`${parties.get(val)}`; } }, presname: { title: "president", type: "string", formatter(val) { return presNames.get(val); } }, dateserb: { title: "from", type: "string", formatter(val) { return val !== 999 ? dateFormat(val) : "Unclear"; } }, datesere: { title: "to", type: "string", formatter(val) { return val !== 777 ? dateFormat(val) : "Unclear"; } } } } )33:[] 2f:{"title":"A Timeline of S.C.O.T.U.S. Justices","cells":[{"id":0,"value":"md`# A Timeline of S.C.O.T.U.S. Justices\n\nBy seat number. Data: Epstein et al., [Washington University in St. Louis](http://epstein.wustl.edu/research/justicesdata.html).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"viewof pres = select({\n options: [{ label: \"Choose one\", value: 0 }].concat(\n [...presNames.entries()].map(d => ({\n label: `(${d[0]}) ${d[1]}`,\n value: d[0]\n }))\n ),\n value: 0,\n title: \"Nominating President\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"html`\n

Party Affiliation at Time of Nomination (or Recess Appointment)

\n${swatches({\n color: d3.scaleOrdinal(\n uniques(\n data.filter(d => d.dateserb !== 999 && d.datesere !== 777),\n \"parnom\"\n ).map(d => parties.get(d)),\n uniques(\n data.filter(d => d.dateserb !== 999 && d.datesere !== 777),\n \"parnom\"\n ).map(d => partyColor(d))\n )\n})}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"html`\n

\n Scroll to zoom. Drag to pan. Upon zooming, dashed lines represent periods served under recess appointments, as opposed to those confirmed by the Senate.\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"md`Incomplete data: These periods are excluded from the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"html`\n\n${viewof missingTable}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"title = g =>\n g.append(\"title\").text(\n d => `${d.name}\nNominated by: ${presNames.get(d.presname)}\nAppointment: ${d.success === 1 ? \"Confirmed by Senate\" : \"Recess\"}\nFrom: ${d.dateserb !== 999 ? dateFormat(d.dateserb) : \"Unclear\"}\nTo: ${\n d.datesere === 777\n ? \"Unclear\"\n : d.datesere === 999\n ? \"Today\"\n : dateFormat(d.datesere)\n }`\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"dateFormat = d =>\n d.toLocaleString(undefined, {\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n timeZone: \"UTC\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"extract = str => str.match(/[0-9]+/g)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"update = {\n chart.zoom();\n chart.update(+pres);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"presNames = new Map(\n uniques(raw, \"presname\")\n .map(d => {\n const code = extract(d);\n const name = d\n .substr(code.length + 2)\n .split(\" \")\n .map(d => d[0].toUpperCase() + d.substr(1))\n .join(\" \");\n return [+code, name];\n })\n .filter(d => data.find(({ presname }) => presname === d[0]))\n .sort((a, b) => a[0] - b[0])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"partyColor = d3.scaleOrdinal(\n [...parties.keys()],\n [\n \"#1f77b4\",\n \"#9467bd\",\n \"#8c564b\",\n \"#ff7f0e\",\n \"#2ca02c\",\n \"#d62728\",\n \"#7f7f7f\",\n \"#bcbd22\"\n ]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"parties = new Map([\n [1, \"Democrat\"],\n [2, \"Democratic Republican\"],\n [3, \"Federalist\"],\n [4, \"Free Soil\"],\n [5, \"Independent\"],\n [6, \"Republican\"],\n [7, \"Whig\"],\n [8, \"Divided between Democrats and Republicans\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"uniques = (data, col) => Array.from(new Set(data.map(d => d[col])))","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"now = new Date(Date.now())","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"x = d3\n .scaleUtc()\n .domain([data[0].dateserb, now])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"y = d3\n .scaleBand()\n .domain(uniques(data, \"seat\"))\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"xAxis = (g, x) =>\n g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .selectAll(\".tick\")\n .append(\"line\")\n .attr(\"stroke\", \"#eee\")\n .attr(\"y2\", height - margin.bottom)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\"line\").remove())\n .call(g =>\n g\n .selectAll(\".tick text\")\n .attr(\"font-weight\", d => (d !== 1 ? \"normal\" : \"bold\"))\n .text(d => (d !== 1 ? d : \"Chief\"))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"n = d3.max(data, d => d.seat)","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"margin = ({ top: 20, left: 35, right: 10, bottom: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"dateParse = date => {\n const format = d3.utcParse(\"%m/%d/%Y\");\n return date.match(/\\./g) ? +extract(date) : format(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = raw\n .map(\n ({\n name,\n success,\n seatid,\n birdate,\n biryear,\n famses,\n race,\n gender,\n yrposnom,\n agenom,\n parnom,\n prdssr,\n presname,\n ideo,\n dateserb,\n datesere\n }) => ({\n name,\n success: +extract(success),\n seat: +extract(seatid),\n //seatid,\n //birdate: dateParse(birdate),\n //biryear: +biryear ? +biryear : null,\n //famses: +extract(famses),\n //race: +extract(race),\n //gender: +extract(gender),\n //yrposnom: +yrposnom ? +yrposnom : null,\n //agenom: +agenom ? +agenom : null,\n parnom: +extract(parnom),\n //prdssr,\n presname: +extract(presname),\n //ideo: +ideo ? +ideo : +extract(ideo),\n dateserb: dateParse(dateserb),\n datesere: dateParse(datesere)\n })\n )\n .filter(d => d.success)\n .sort((a, b) => d3.ascending(a.dateserb, b.dateserb))","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"raw = d3.csv(\n \"https://duynguyen1678-cors.herokuapp.com/http://epstein.wustl.edu/research/justicesdata.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"import { table } from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"md`___\n## Scratch`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"famStatuses = new Map(\n uniques(raw, \"famses\")\n .map(d => {\n const code = extract(d);\n const status = d.substr(code.length + 2);\n return [+code, status];\n })\n .sort((a, b) => a[0] - b[0])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"races = new Map(\n uniques(raw, \"race\")\n .map(d => {\n const code = extract(d);\n const race = d.substr(code.length + 2);\n return [+code, race];\n })\n .sort((a, b) => a[0] - b[0])\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}