2d:null 2e:["$","title",null,{"children":"Bitemporal line chart | Toph Tucker | Observable"}] 33:T734,md`# Bitemporal line chart Bitemporal data has two dimensions of time — for example, a table with two columns of dates. Typically, one dimension is the date the data was made _on_, and one is the date the data is _about_. [I have been collecting examples for years.](https://observablehq.com/@tophtucker/examples-of-bitemporal-charts) To upload your own data, click 1 File above and replace libor1mo.csv.` // If you don’t want to save your chart on Observable servers, use [the version that just runs on your laptop (TK)](#).34:[{"id":"61df2a78064728a847df533c9517371b2fdc3e0895615249114685a5ecb3e50ea12ef8f5d9ee261e997b0c6007c1ab44b9e30b578805f4399f03c4b3220e65bd","href":"https://static.observableusercontent.com/files/61df2a78064728a847df533c9517371b2fdc3e0895615249114685a5ecb3e50ea12ef8f5d9ee261e997b0c6007c1ab44b9e30b578805f4399f03c4b3220e65bd","name":"libor1mo.csv","type":"text/csv","lastModified":1598462388981.779,"size":103100}] 31:{"id":"26971d8d722fcf4e","slug":"bitemporal-line-chart","title":"Bitemporal line chart","thumbnail":"990a43c65a0a15f4a4b65169e48c2d5e3576c13cd819993dda6bc2fd5e7f313d","access_level":"public","create_time":"$D2020-08-26T17:19:48.981Z","update_time":"$D2020-10-13T23:15:55.041Z","view_time":null,"first_public_time":"$D2020-10-13T23:03:36.451Z","has_unpublished_edits":null,"fork":{"id":"974ab09ca28bb254","slug":"examples-of-bitemporal-charts","title":"Examples of bitemporal charts","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"stars":7,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":2447,"publish_version":2447,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"7bba3b9291b83a00","slug":"bitemporal","title":"Bitemporal","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Bitemporal line chart","cells":[{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n const g = svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n\n g.selectAll(\"path\")\n .data(dataGrouped)\n .join(\"path\")\n .attr(\"stroke\", \"gray\")\n .attr(\"stroke-width\", .5)\n .attr(\"d\", line)\n .call(halo);\n\n g.append(\"path\")\n .datum(dataActual)\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", line);\n\n // Whisker labels\n g.selectAll(\"text\")\n .data(dataGrouped.map(d => d[d.length - 1]))\n .join(\"text\")\n .attr(\"fill\", \"gray\")\n .attr(\"font-size\", 10)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"dx\", 4)\n .attr(\"dy\", \".3em\")\n .attr(\"x\", ({ about }) => x(about))\n .attr(\"y\", ({ value }) => y(value))\n .text(({ on }) => dateFormat(on));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2258,"value":"data = d3.csvParse(\n await FileAttachment(\"libor1mo.csv\").text(),\n ({ on, about, value }) => ({\n on: dateParse(on),\n about: dateParse(about),\n value: +value\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"dataGrouped = Array.from(d3.group(data, ({ on }) => +on).values())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"dataActual = data.filter(({ on, about }) => +on === +about)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2267,"value":"dateParse = d => d3.timeMonth.round(new Date(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2415,"value":"dateFormat = d3.timeFormat(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"valueFormat = d =>\n Math.abs(d) < 1 ? d.toFixed(2) : Math.abs(d) > 100 ? d3.format(\".2s\")(d) : d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.about))\n .y(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent([...data.map(d => d.on), ...data.map(d => d.about)]))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3\n .axisLeft(y)\n .tickFormat(valueFormat)\n .ticks(5)\n )\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"LIBOR 1 month forward curve\")\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"function halo(text) {\n text\n .select(function() {\n return this.parentNode.insertBefore(this.cloneNode(true), this);\n })\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 4)\n .attr(\"stroke-linejoin\", \"round\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"