30:T437,chart = { const div = html`

`; const canvas = d3.select(div) .selectAll("canvas") .data(data) .enter().append(() => DOM.context2d(width, step).canvas) .style("position", "absolute") .style("top", (d, i) => `${i * (step + 1) + margin.top}px`) .each(horizon); const svg = d3.select(div.appendChild(DOM.svg(width, height))) .style("position", "relative") .style("font", "10px sans-serif"); svg.append("g") .call(xAxis); svg.append("g") .selectAll("text") .data(data) .join("text") .attr("x", 4) .attr("y", (d, i) => (i + 0.5) * (step + 1) + margin.top) .attr("dy", "0.35em") .text(d => d.key); function horizon(d) { const context = this.getContext("2d"); area.context(context); for (let i = 0; i < overlap; ++i) { context.save(); context.translate(0, (i + 1) * step); context.beginPath(); area(d.values); context.fillStyle = color(i); context.fill(); context.restore(); } } return div; }31:[{"id":"85e56dd7e03d1fd6e3f168571424ccfe8957fae03867d04d8ae56652fd3abad908783d2adb7c9bd3a139ee57e39a4f97a31b118a6c8fea49601ea22b1756d51e","href":"https://static.observableusercontent.com/files/85e56dd7e03d1fd6e3f168571424ccfe8957fae03867d04d8ae56652fd3abad908783d2adb7c9bd3a139ee57e39a4f97a31b118a6c8fea49601ea22b1756d51e","name":"traffic_weekly.csv","type":"application/octet-stream","lastModified":1572395379182.147,"size":396861},{"id":"4ea24221b4db5e916702f2056cc385f5a14a80a44c7c304af89957c5cb6c5707cf64372ab0c4ecd9858375af251ce70e9eb397da832f22afc57faf2f54eec9f9","href":"https://static.observableusercontent.com/files/4ea24221b4db5e916702f2056cc385f5a14a80a44c7c304af89957c5cb6c5707cf64372ab0c4ecd9858375af251ce70e9eb397da832f22afc57faf2f54eec9f9","name":"traffic.csv","type":"text/csv","lastModified":1579239802200.081,"size":185565}] 2e:{"title":"Canvas Horizon Chart","cells":[{"id":0,"value":"# Canvas Horizon Chart\n\nThis [horizon chart](/@d3/horizon-chart) is implemented in Canvas instead of SVG. Many D3 APIs, including [d3-shape](/collection/@d3/d3-shape) and [d3-geo](/collection/@d3/d3-geo), can be used with either Canvas or SVG.\n\nData: [Christopher Möller](https://gist.github.com/chrtze/c74efb46cadb6a908bbbf5227934bfea).","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"viewof overlap = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} band${form.i.valueAsNumber === 1 ? \"\" : \"s\"}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"height = data.length * (step + 1) + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"step = 23","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"x = d3.scaleUtc()\n .domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d3.max(d.values, d => d.value))])\n .range([0, -overlap * step])","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick\").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(0)\n .y1(d => y(d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = d3.groups(d3.csvParse(await FileAttachment(\"traffic.csv\").text(), d3.autoType), d => d.name)\n .map(([name, values]) => ({\n key: name,\n values: values.sort((a, b) => d3.ascending(a.date, b.date)),\n sum: d3.sum(values, d => d.value)\n }))\n .sort((a, b) => d3.descending(a.sum, b.sum))","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}