2a:null 2b:["$","title",null,{"children":"A Timeline of Apple Products | Mike Bostock | Observable"}] 30: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(); }31:[{"id":"3b45f0d0c26c4ff531bebe8e2d0703d584fd505f931b13efc433194c4d032d953f226f178939f02a38c762c71f48c439a0cc22c1424d6c58899ca5db2a8fb730","href":"https://static.observableusercontent.com/files/3b45f0d0c26c4ff531bebe8e2d0703d584fd505f931b13efc433194c4d032d953f226f178939f02a38c762c71f48c439a0cc22c1424d6c58899ca5db2a8fb730","name":"apple.csv","type":"text/csv","lastModified":1583603011843.649,"size":41229}] 2e:{"id":"78d14659a10ab5ca","slug":"a-timeline-of-apple-products","title":"A Timeline of Apple Products","thumbnail":"2795de2f1b70d6c567be7f9071f4d4430f6977de33870988c5faf2667fde8bbf","access_level":"public","create_time":"$D2020-03-07T17:41:56.000Z","update_time":"$D2020-03-08T04:54:21.960Z","view_time":null,"first_public_time":"$D2020-03-07T18:11:33.825Z","has_unpublished_edits":null,"fork":{"id":"f798413c39bb88c7","slug":"a-timeline-of-democratic-presidential-candidates","title":"A Timeline of Democratic Presidential Candidates","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":13,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":264,"publish_version":264,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"today = new Date(Date.UTC(2020, 2, 7))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"margin = ({top: 30, right: 10, bottom: 10, left: 70})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = (data.length + 2) * 20 + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"