33:T73d,md`# Exploded 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 cbo-data.csv.` // If you don’t want to save your chart on Observable servers, use [the version that just runs on your laptop (TK)](#).34:T413,html`

${dataGrouped.map(group => { const actual = dataActual.filter(d => d.on <= group[0].on); const forecast = [group[0], group[group.length - 1]]; console.log(dateFormat(group[0].on), actual, describeSeries(actual)); return html`

In ${dateFormat( group[0].on )}, ${seriesName} ${describeSeries( actual )} and ${sourceName} predicted they ${describeSeries( forecast, true )} by ${dateFormat(group[group.length - 1].about)}

`; })}

`35:[{"id":"9e4fe670a3cf3d7f7658fb4e88c1b7279928094d4b1bd44109db14d26dcb418acc23c7b28723b6c6181df4fdc0126d1c473315694fa577c4090c4b72c8ccba55","href":"https://static.observableusercontent.com/files/9e4fe670a3cf3d7f7658fb4e88c1b7279928094d4b1bd44109db14d26dcb418acc23c7b28723b6c6181df4fdc0126d1c473315694fa577c4090c4b72c8ccba55","name":"cbo-data.csv","type":"text/csv","lastModified":1602911608498.496,"size":2489}] 31:{"title":"Exploded bitemporal line chart","cells":[{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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":false,"hidden":false,"mode":"ojs"},{"id":2457,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2489,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2453,"value":"title = \"CBO Interest Rate Forecasts\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2516,"value":"seriesName = \"rates\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2518,"value":"sourceName = \"CBO\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2258,"value":"data = d3.csvParse(\n await FileAttachment(\"cbo-data.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"},{"id":150,"value":"dataGrouped = Array.from(d3.group(data, ({ on }) => +on).values())","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"dataActual = data.filter(({ on, about }) => +on === +about)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2267,"value":"dateParse = d => d3.timeMonth.round(new Date(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2415,"value":"dateFormat = d3.timeFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"valueFormat = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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(title)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":22,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2458,"value":"widthMini = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":2460,"value":"heightMini = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":2463,"value":"xMini = x.copy().range([0, widthMini])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2464,"value":"yMini = y.copy().range([heightMini, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2467,"value":"lineMini = d3\n .line()\n .defined(d => !isNaN(d.value))\n .x(d => xMini(d.about))\n .y(d => yMini(d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2499,"value":"describeSeries = (series, future) => {\n if (!series.length) return false;\n if (series.length === 1) return `was at ${valueFormat(series[0].value)}`;\n const diff =\n series[series.length - 1].value - series[series.length - 2].value;\n const rise = future ? \"would rise to\" : \"rose to\";\n const fell = future ? \"would fall to\" : \"fell to\";\n const stay = future ? \"would stay to\" : \"stayed at\";\n return `${diff > 0 ? rise : diff < 0 ? fell : stay} ${valueFormat(\n series[series.length - 1].value\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}