30:Tbce,graphic = { const div = d3.create("div").attr('class', 'container') .attr("style", `width: ${width}px; height: 1300px;`) const svg = div.append("svg") .attr("width", width) .attr("height", 1300); const offset = 22; const sX = d3.scaleLinear().range([10, width - 210]).domain([0, 245]) const path = d3.line() .curve(d3.curveCardinal) .x(function(d) { return sX(d.x); }) .y(function(d) { return d.y; }) const months = [0, 31,60,91,121,152,182,213, 244]; const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept"] const updateLine = svg.selectAll("g.pandemic") .data(pandemicCsv) .enter() .append("g") .attr("class", "pandemic") updateLine .append("path") .datum(d => d.dates.map((d, i) => ({ x: d.dayOfYear, y: -10 + (d.idx + 2) * offset + Math.abs((0 - 3) * 5) }))) .attr("stroke", "red") .attr("fill", "none") .attr("d", path) updateLine .selectAll("circle") .data(d => d.dates) .enter() .append("circle") .attr("cx", d => sX(d.dayOfYear)) .attr("cy", (d, i) => -10 + (d.idx + 2) * offset + Math.abs((0 - 3) * 5)) .attr("fill", d => colors[d.inPerson ? d.inPerson : d.date.getFullYear()]) .attr("r", 5); const candidates = svg.selectAll("g.chart") .data(chartData) .enter() .append("g") .attr("class", "chart") svg .selectAll("line.month") .data(months) .enter() .append("line") .attr("class", "month") .attr("stroke", "#ddd") .attr("y1", 0) .attr("y2", 1285) .attr("x1", d => sX(d)) .attr("x2", d => sX(d)) svg .selectAll("text.debate") .data(months) .enter() .append("text") .attr("class", "month") .attr("fill", "#ddd") .attr("y", 20) .attr("x", d => sX(d) + 10) .attr("text-anchor", "start") .text((d, i) => monthNames[i]) candidates .append("path") .datum(d => d.dates.map((d, i) => ({ x: d.dayOfYear, y: -10 + (d.idx + 2) * offset + Math.abs((i - 3) * 5) }))) .attr("stroke", "#222") .attr("fill", "none") .attr("d", path) candidates .selectAll("circle") .data(d => d.dates) .enter() .append("circle") .attr("cx", d => sX(d.dayOfYear)) .attr("cy", (d, i) => -10 + (d.idx + 2) * offset + Math.abs((i - 3) * 5)) .attr("fill", d => colors[d.date.getFullYear()]) .attr("r", 5); candidates .append("text") .text(d => d.state) .attr("text-anchor", "start ") .attr("x", width - 200) .attr("y", (d, i) => (i + 2) * offset + 5) .attr("fill", "#222"); candidates .append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", (d, i) => (i + 2) * (offset) + 10) .attr("y2", (d, i) => (i + 2) * (offset) + 10) .attr("stroke", "#ccc"); return div.node(); }31:[{"id":"d0a616b6a7d0cdc56b4a30dddc7c30e59d25c18783b0329f277c73a1f91baa5a26c37471099cf8948b6d0880867e3fe249a6fccac5b4060f97832ba775a69f5e","href":"https://static.observableusercontent.com/files/d0a616b6a7d0cdc56b4a30dddc7c30e59d25c18783b0329f277c73a1f91baa5a26c37471099cf8948b6d0880867e3fe249a6fccac5b4060f97832ba775a69f5e","name":"calendar@2.csv","type":"text/csv","lastModified":1583279458627.438,"size":3168}] 2e:{"title":"Calendar Drift","cells":[{"id":0,"value":"md`# Calendar Drift`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`Tracking the movement of states in the Democratic party primaries in 2008, 2016 and 2020.\n\nPandemic update - in person voting: Scheduled or Cancelled`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"md`\nGenerally the states have stayed relatively in the same order, collectively moving later into the year, with some exceptions:\n* California, which has oscillated from being an early primary between 1996-2008; a late primary in 2012 and 2016; and back to a Super Tuesday state in 2020 ([NPR](https://www.npr.org/sections/thetwo-way/2017/09/28/554147818/california-moves-up-2020-primary-elections-to-march))\n* Whilst most states have drifted later, North Carolina has moved earlier in the cycle between 2008 - 2020. (the 2012 primary was held on May 8th, around the same time as the 2008 cycle).\n\nData: [Wiki](https://en.wikipedia.org/wiki/2020_Democratic_Party_presidential_primaries)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"colors = ({ 2008: \"#99f\", 2016: \"#00f\", 2020: \"#009\", \"Cancelled\": \"#777\", \"Scheduled\": \"red\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"timeParse = d3.timeParse(\"%d/%m/%y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"timeFormat = d3.timeFormat(\"%j\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"filters = Array.from(new Set(csvData.map(d => d.state)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"chartData = {\n var output = [];\n \n for(let i = 0; i < filters.length; i++) {\n const dates = csvData.filter(d => d.state === filters[i]);\n if(dates.length > 0) {\n output.push({\n state: dates[0].state,\n dates: dates.map(e => ({\n ...e,\n idx: i,\n }))\n });\n }\n }\n \n return output;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"csvData = d3.csvParse(await FileAttachment(\"calendar@2.csv\").text()).map(d => ({\n date: timeParse(d.Date),\n dayOfYear: +timeFormat(timeParse(d.Date)),\n state: d.State\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"pandemicCsv = d3.csvParse(`State,Date,InPerson\nOhio,28/04/20,Cancelled\nGeorgia,9/06/20,Scheduled\nAlaska,10/04/20,Cancelled\nWyoming,17/04/20,Cancelled\nHawaii,22/05/20,Cancelled\nLouisiana,11/07/20,Scheduled\nMaryland,2/06/20,Scheduled\nPennsylvania,2/06/20,Scheduled\nRhode Island,2/06/20,Scheduled\nNew York,23/06/20,Scheduled\nDelaware,7/07/20,Scheduled\nConnecticut,11/08/20,Scheduled\nKansas,2/05/20,Cancelled\nIndiana,2/06/20,Scheduled\nWest Virginia,9/06/20,Scheduled\nKentucky,23/06/20,Scheduled\nNew Jersey,7/07/20,Scheduled`).map(d => ({\n date: timeParse(d.Date),\n dayOfYear: +timeFormat(timeParse(d.Date)),\n state: d.State,\n inPerson: d.InPerson,\n})).map(d => {\n const obj2 = d;\n const obj = chartData.filter(e => e.state === d.state)[0].dates[0];\n obj2.idx = obj.idx;\n return {\n state: d.state,\n dates: [\n obj,\n obj2,\n ]\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}