31:T85e,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("defs") .selectAll("linearGradient") .data(data.filter(d => d.end !== null)) .join("linearGradient") .attr("id", d => (d.gradientId = DOM.uid("gradient")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => x(d.start)) .attr("x2", d => x(d.end)) .call(g => g.append("stop").attr("stop-color", "currentColor")) .call(g => g.append("stop").attr("offset", "100%").attr("stop-color", "#ccc")); const line = svg.append("g") .attr("stroke-width", 2) .selectAll("line") .data(data) .join("line") .attr("stroke", d => d.end === null ? "currentColor" : d.gradientId) .attr("x1", d => x(d.start)) .attr("x2", d => x(d.end || x.domain()[1])) .attr("y1", d => y(d.name) + 0.5) .attr("y2", d => y(d.name) + 0.5); svg.append("g") .call(xAxis); const label = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.start) - 6) .attr("y", d => y(d.name)) .attr("dy", "0.35em") .attr("fill-opacity", d => d.end === null ? null : 0.6) .text(d => d.name); const dot = svg.append("g") .attr("fill", "currentColor") .selectAll("circle") .data(data.filter(d => d.end !== null)) .join("circle") .attr("cx", d => x(d.end)) .attr("cy", d => y(d.name) + 0.5) .attr("r", 2); return Object.assign(svg.node(), { update(data) { const t = svg.transition().duration(750); y.domain(data.map(d => d.name)); line.data(data, d => d.name).transition(t) .delay(d => y(d.name)) .attr("y1", d => y(d.name)) .attr("y2", d => y(d.name)); label.data(data, d => d.name).transition(t) .delay(d => y(d.name)) .attr("y", d => y(d.name)); dot.data(data, d => d.name).transition(t) .delay(d => y(d.name)) .attr("cy", d => y(d.name)); } }); }32:[{"id":"1acc835864c329186e0e81d42e98e3687965ebb8157df561b70af0ec823f3d2a33b2feae3614f146bfe142be265f3817d3449aef02fd3edcd6113cf80d5a4f5d","href":"https://static.observableusercontent.com/files/1acc835864c329186e0e81d42e98e3687965ebb8157df561b70af0ec823f3d2a33b2feae3614f146bfe142be265f3817d3449aef02fd3edcd6113cf80d5a4f5d","name":"candidates.csv","type":"text/csv","lastModified":1583524676391.29,"size":1027}] 2f:{"title":"A Timeline of Democratic Presidential Candidates","cells":[{"id":0,"value":"md`# A Timeline of Democratic Presidential Candidates\n\nData: [Kemper Smith](/@kemper/democratic-presidential-primary-candidate-timeline)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"viewof order = {\n const options = Object.entries(orders);\n const form = html`

Order by