31:T693,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", d => d.endUnknown ? "#fff" : "#ccc")); const line = svg.append("g") .attr("stroke", "currentColor") .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.index)) .attr("y2", d => y(d.index)); 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.index)) .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 && d.endUnknown === false)) .join("circle") .attr("cx", d => x(d.end)) .attr("cy", d => y(d.index)) .attr("r", 2); return svg.node(); }32:[{"id":"3b45f0d0c26c4ff531bebe8e2d0703d584fd505f931b13efc433194c4d032d953f226f178939f02a38c762c71f48c439a0cc22c1424d6c58899ca5db2a8fb730","href":"https://static.observableusercontent.com/files/3b45f0d0c26c4ff531bebe8e2d0703d584fd505f931b13efc433194c4d032d953f226f178939f02a38c762c71f48c439a0cc22c1424d6c58899ca5db2a8fb730","name":"apple.csv","type":"text/csv","lastModified":1583603011843.649,"size":41229}] 2f:{"title":"A Timeline of Apple Products","cells":[{"id":0,"value":"md`# A Timeline of Apple Products\n\nData: [Wikipedia](https://en.wikipedia.org/wiki/Timeline_of_Apple_Inc._products)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"legend = {\n const arrowId = DOM.uid(\"arrow\");\n const gradientId = DOM.uid(\"gradient\");\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = d3.csvParse(await FileAttachment(\"apple.csv\").text(), ({startDate, model, endDate}, i) => ({index: i, name: model, start: parseDate(startDate), end: endDate === \"current\" ? null : parseDate(endDate) || d3.utcYear.offset(parseDate(startDate), 3), endUnknown: endDate === \"\"}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"parseDate = {\n const parseDate = d3.utcParse(\"%B %d, %Y\");\n const parseMonth = d3.utcParse(\"%B, %Y\");\n const parseMonth2 = d3.utcParse(\"%B %Y\");\n const parseYear = d3.utcParse(\"%Y\");\n return d => parseDate(d) || parseMonth(d) || parseMonth2(d) || parseYear(d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"today = new Date(Date.UTC(2020, 2, 7))","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"x = d3.scaleUtc()\n .domain([d3.min(data, d => d.start), today])\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"y = d3.scalePoint()\n .domain(d3.range(data.length))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"g\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 2)\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y2\", height - margin.bottom - margin.top))","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"margin = ({top: 30, right: 10, bottom: 10, left: 70})","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"height = (data.length + 2) * 20 + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}