31:Tce0,chart = { const svg = d3.select(DOM.svg(width, height)) .property("style", ` font-family: sans-serif; font-size: 12px; background-color: white; `) svg.append("text") .attr("class", "chart-title") .attr("x", margin.left - 16) .attr("y", width < 500 ? 8 : 40) .text(`Democratic Presidential Primary Candidate Timeline`) .property("style", ` font-family: "Source Serif Pro", "Georgia", sans-serif; ${width < 500 ? "font-size: 12px" : "font-size: 24px"}; font-weight: 700; `) svg.append("g") .call(xAxis) svg.append("g") .call(yAxis) svg.append("text") .text("number of candidates") .attr("x", margin.left - 16) .attr("y", margin.top + 8) const timeline = svg.append("path") .datum(data) .attr("d", line) .attr("class", "time-line") .style("stroke", graphColor) .style("stroke-width", 2) .style("fill", "none") .style("stroke-linejoin", "round") const timearea = svg.append("path") .datum(data) .attr("d", area) .attr("class", "time-area") .style("stroke", "none") .style("fill", graphColor) .style("fill-opacity", 0.1) const candidateRange = svg.selectAll(".candidate-range") .data(candidates.filter(d => d.name === candidate)) .join("rect") .attr("class", "candidate-range") .attr("x", d => xScale(parseDate(d.start))) .attr("y", margin.top - 10) .attr("rx", 6) .attr("width", d => { let end if (d.end !== "") end = xScale(parseDate(d.end)) - xScale(parseDate(d.start)) else end = xScale(new Date()) - xScale(parseDate(d.start)) return end }) .attr("height", height - margin.bottom - margin.top + 10) .style("fill", highlightColor) .style("fill-opacity", 0.1) const candidateRangeLabel = svg.selectAll(".candidate-range-label") .data(candidates.filter(d => d.name === candidate)) .join("text") .attr("class", "candidate-range-label") .attr("x", d => { let w if (d.end !== "") w = xScale(parseDate(d.end)) - xScale(parseDate(d.start)) else w = xScale(new Date()) - xScale(parseDate(d.start)) return xScale(parseDate(d.start)) + (w / 2) }) .attr("y", margin.top - 14) .text(d => { if (d.end !== "") { const days = d3.timeDay.count(parseDate(d.start), parseDate(d.end)) return `${candidate} ran for ${days} days` } else { const days = d3.timeDay.count(parseDate(d.start), new Date()) return `${candidate}'s campaign (${days} days and counting)` } }) .property("style", ` text-anchor: middle; font-weight: 800; `) if (width > 500) { const annotationLabels = d3.annotation() .editMode(debugMode) .type(d3.annotationCallout) .accessors({ x: d => xScale(parseDate(d.date)), y: d => yScale(d.count) }) .notePadding(0) .accessorsInverse({ date: d => formatDate(xScale.invert(d.x)), close: d => yScale.invert(d.y) }) .annotations(annotationList) } svg.selectAll(".y.axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3") return svg.node() }32:T930,timeline = { const svg = d3.select(DOM.svg(width, height)) .property("style", ` font-family: sans-serif; font-size: 12px; background-color: white; `) svg.append("text") .attr("class", "chart-title") .attr("x", margin.left - 16) .attr("y", width < 500 ? 8 : 40) .text(`Democratic Presidential Primary Candidate Timeline`) .property("style", ` font-family: "Source Serif Pro", "Georgia", sans-serif; ${width < 500 ? "font-size: 12px" : "font-size: 24px"}; font-weight: 700; `) svg.append("g") .call(xAxis) const candidateGroup = svg.selectAll(".candidate-group") .data([...candidates].reverse()) .join("g") .attr("class", "candidate-group") .attr("transform", (d, i) => `translate(0, ${yScaleLanes(i)})`) candidateGroup.append("g") .append("rect") .attr("class", "candidate-rect") .attr("x", d => xScale(parseDate(d.start))) .attr("y", 0) .attr("width", d => { let end = parseDate(d.end) if (d.end === "") end = new Date() return xScale(end) - xScale(parseDate(d.start)) }) .attr("height", yScaleLanes.bandwidth) .attr("rx", 3) .property("style", d => ` fill: ${candidate === d.name ? highlightColor : graphColor}; fill-opacity: 1; `) candidateGroup.append("text") .attr("class", "candidate-label") .attr("x", d => xScale(parseDate(d.start))) .attr("y", 10) .attr("dx", d => xScale(parseDate(d.start)) < 80 ? 3 : -3) .text(d => d.name) .property("style", d => { let textColor = "black" let textAnchor = "end" if (xScale(parseDate(d.start)) < 80) { textColor = "white" textAnchor = "start" } return ` fill: ${textColor}; text-anchor: ${textAnchor}; ` }) candidateGroup.append("text") .attr("class", "candidate-label") .attr("x", d => xScale(parseDate(d.end))) .attr("y", 11) .attr("dx", 3) .text(d => { if (d.end === "") return `${d3.timeDay.count(parseDate(d.start), new Date())} days` else return `${d3.timeDay.count(parseDate(d.start), parseDate(d.end))} days` }) svg.selectAll(".y.axis line") .style("stroke", "grey") .style("stroke-dasharray", "1,3") return svg.node() }33:T79b,candidates = [ {name: "John Delaney", start: "2017-07-28", end: "2020-01-31"}, {name: "Andrew Yang", start: "2017-11-06", end: "2020-02-11"}, {name: "Richard Ojeda", start: "2018-11-11", end: "2019-01-25"}, {name: "Tulsi Gabbard", start: "2019-01-11", end: "2020-03-19"}, {name: "Julian Castro", start: "2019-01-12", end: "2020-01-02"}, {name: "Kamala Harris", start: "2019-01-21", end: "2019-12-03"}, {name: "Marianne Williamson", start: "2019-01-28", end: "2020-01-10"}, {name: "Cory Booker", start: "2019-02-01", end: "2020-01-13"}, {name: "Elizabeth Warren", start: "2019-02-09", end: "2020-03-05"}, {name: "Amy Klobuchar", start: "2019-02-10", end: "2020-03-02"}, {name: "Bernie Sanders", start: "2019-02-19", end: "2020-04-08"}, {name: "Jay Inslee", start: "2019-03-01", end: "2019-08-21"}, {name: "John Hickenlooper", start: "2019-03-04", end: "2019-08-15"}, {name: "Beto O'Rourke", start: "2019-03-14", end: "2019-11-01"}, {name: "Kristen Gillibrand", start: "2019-03-17", end: "2019-08-28"}, {name: "Wayne Messam", start: "2019-03-28", end: "2019-11-19"}, {name: "Mike Gravel", start: "2019-04-02", end: "2019-08-06"}, {name: "Tim Ryan", start: "2019-04-04", end: "2019-10-24"}, {name: "Eric Swalwell", start: "2019-04-08", end: "2019-07-08"}, {name: "Pete Buttigieg", start: "2019-04-14", end: "2020-03-01"}, {name: "Seth Moulton", start: "2019-04-22", end: "2019-08-23"}, {name: "Joe Biden", start: "2019-04-25", end: ""}, {name: "Michael Bennet", start: "2019-05-02", end: "2020-02-11"}, {name: "Steve Bullock", start: "2019-05-14", end: "2019-12-02"}, {name: "Bill de Blasio", start: "2019-05-16", end: "2019-09-20"}, {name: "Joe Sestak", start: "2019-06-23", end: "2019-12-01"}, {name: "Tom Steyer", start: "2019-07-09", end: "2020-02-29"}, {name: "Deval Patrick", start: "2019-11-14", end: "2020-02-12"}, {name: "Michael Bloomberg", start: "2019-11-24", end: "2020-03-04"} ]34:Tfa1,annotationList = { const combinedShift = 100 return [ { id: "delaney-yang-announce", type: d3.annotationCallout, note: { label: "Delaney & Yang announce in 2017", title: "" }, data: data.filter(d => d.date === "2017-11-06")[0], dx: 0, dy: -combinedShift, className: "anno" }, { id: "delaney-yang-announce-merged", type: d3.annotationCallout, note: { label: "", title: "" }, data: data.filter(d => d.date === "2017-07-28")[0], dx: xScale(parseDate(data.filter(d => d.date === "2017-11-06")[0].date)) - xScale(parseDate(data.filter(d => d.date === "2017-07-28")[0].date)), dy: -combinedShift - (yScale(0) - yScale(1)), className: "anno" }, { id: "warren-announces", type: d3.annotationCallout, note: { label: "Warren announces", title: "", }, data: data.filter(d => d.date === "2019-02-09")[0], dx: -47, dy: -0.1, className: "anno" }, { id: "sanders-announces", type: d3.annotationCallout, note: { label: "Sanders announces", title: "", align: "right" }, data: data.filter(d => d.date === "2019-02-19")[0], dx: 0, dy: -76, className: "anno" }, { id: "biden-announces", type: d3.annotationCallout, note: { label: "Biden announces", title: "" }, data: data.filter(d => d.date === "2019-04-25")[0], dx: -68, dy: -0.1, className: "anno" }, { id: "first-debate", type: d3.annotationCallout, note: { label: "First debate", title: "", align: "right" }, data: data.filter(d => d.date === "2019-06-26")[0], dx: 0, dy: 205, className: "anno" }, { id: "state-filing-deadlines-begin", type: d3.annotationCallout, note: { label: "State filing deadlines begin", title: "" }, data: data.filter(d => d.date === "2019-11-08")[0], dx: 0, dy: -74, className: "anno" }, { id: "swalwell-steyer", type: d3.annotationCallout, note: { label: "Swalwell exits & Steyer enters", title: "" }, data: data.filter(d => d.date === "2019-07-08")[0], dx: 0, dy: 136, className: "anno" }, { id: "super-tuesday", type: d3.annotationCallout, note: { label: "Super Tuesday", title: "" }, data: data.filter(d => d.date === "2020-03-03")[0], dx: 0, dy: -100, className: "anno" }, { id: "iowa-caucuses", type: d3.annotationCallout, note: { label: "Iowa Caucuses", title: "" }, data: data.filter(d => d.date === "2020-02-03")[0], dx: 0, dy: -100, className: "anno" }, { id: "joe-biden-only-candidate-remaining", type: d3.annotationCallout, note: { label: "Joe Biden only candidate remaining", title: "", align: "left", wrap: 60 }, data: {date: "2020-04-08", count: 1}, dx: 0, dy: -76, className: "anno" }, { id: "democratic-national-convention-original", type: d3.annotationCallout, note: { label: "Democratic National Convention original date", title: "", wrap: 100 }, data: {date: "2020-07-13", count: 0}, dx: 0, dy: -200, className: "anno" }, { id: "democratic-national-convention-rescheduled", type: d3.annotationCallout, note: { label: "Rescheduled Democratic National Convention", title: "", wrap: 100 }, data: {date: "2020-08-17", count: 0}, dx: 0, dy: -76, className: "anno" } ] }35:[] 2f:{"title":"Democratic Presidential Primary Candidate Timeline","cells":[{"id":0,"value":"md`\n# Democratic Presidential Primary Candidate Timeline\nA timeline of the number of [major candidates](https://en.wikipedia.org/wiki/2020_Democratic_Party_presidential_primaries) in the 2020 Democratic US Presidential Primary\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"viewof candidate = {\n let list = candidates.map(d => d.name)\n list.sort().unshift(\"Select a candidate\")\n \n return makeSelect(\"candidate\", list, \"Select a candidate to show the length of their campaign\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = {\n const earliestStartDate = d3.min(candidates.map(d => parseDate(d.start)))\n const lastDate = parseDate(\"2020-11-03\")\n \n let dates = d3.scaleTime()\n .domain([d3.timeDay.offset(earliestStartDate, -14), lastDate])\n .ticks(d3.timeDay.every(1))\n .map(d => formatDate(d))\n \n const datesAndCounts = dates.map(d => {\n let c = 0\n \n for (let i = 0; i < candidates.length; i++) {\n const cStart = candidates[i].start\n const cEnd = candidates[i].end\n \n if ((parseDate(cStart) <= parseDate(d)) && (parseDate(cEnd) > parseDate(d) || cEnd === \"\")) {\n c++\n }\n }\n \n return {date: d, count: c}\n })\n \n return datesAndCounts\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"function labels() {\n\n return d3.annotation()\n .editMode(debugMode)\n .type(d3.annotationCallout)\n .accessors({\n x: d => xScale(parseDate(d.date)),\n y: d => yScale(d.count)\n })\n .accessorsInverse({\n date: d => formatDate(xScale.invert(d.x)),\n close: d => yScale.invert(d.y)\n })\n .annotations(annotationList)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"applyLabels = {\n const c = d3.select(chart)\n \n c.append(\"g\")\n .attr(\"class\", \"annotation-group\")\n .call(labels())\n \n c.selectAll(\".anno\").selectAll(\"text\")\n .property(\"style\", `\n fill: #333;\n font-weight: 800;\n `)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"xScale = {\n const minDate = d3.min(data.map(d => parseDate(d.date)))\n const maxDate = parseDate(\"2020-11-03\")\n \n return d3.scaleTime()\n .domain([minDate, maxDate])\n .range([margin.left, width - margin.right])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(data.map(d => d.count))])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2160,"value":"yScaleLanes = d3.scaleBand()\n .domain(d3.range(candidates.length))\n .range([margin.topTimeline, height - margin.bottom])\n .paddingInner(0.1)\n .paddingOuter(0.2)\n .align(0)\n .round(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAxis = g => {\n \n return g.attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\", \"x axis\")\n .call(d3.axisBottom(xScale)\n .ticks(d3.timeMonth.every(2))\n .tickFormat(d3.timeFormat(\"%b '%y\"))\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\", \"y axis\")\n .call(d3.axisLeft(yScale)\n .tickSize(-width + margin.right + margin.left))\n .call(g => g.select(\"line\").remove())\n .call(g => g.selectAll(\"path\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"line = d3.line()\n .x(d => xScale(parseDate(d.date)))\n .y(d => yScale(d.count))\n .curve(d3.curveStepBefore)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"area = d3.area()\n .x(d => xScale(parseDate(d.date)))\n .y0(yScale(0))\n .y1(d => yScale(d.count))\n .curve(d3.curveStepAfter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2171,"value":"viewof graphColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2218,"value":"viewof highlightColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({\n \"top\": 70,\n \"topTimeline\": 50,\n \"right\": 20,\n \"bottom\": 30,\n \"left\": 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 560","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"viewof debugMode = makeCheckbox(\"debugMode\", false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"import {makeCheckbox, makeSelect} from \"@kemper/code-snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"d3 = require(\"d3@5\", \"d3-svg-annotation@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}