31:T41a,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "10px sans-serif"); const g = svg.append("g") .selectAll("g") .data(data) .join("g") .attr("transform", (d, i) => `translate(0,${i * (step + 1) + margin.top})`); g.append("clipPath") .attr("id", d => (d.clip = DOM.uid("clip")).id) .append("rect") .attr("width", width) .attr("height", step); g.append("defs").append("path") .attr("id", d => (d.path = DOM.uid("path")).id) .attr("d", d => area(d.values)); g.append("g") .attr("clip-path", d => d.clip) .selectAll("use") .data(d => new Array(overlap).fill(d)) .join("use") .attr("fill", (d, i) => color(i)) .attr("transform", (d, i) => `translate(0,${(i + 1) * step})`) .attr("xlink:href", d => d.path.href); g.append("text") .attr("x", 4) .attr("y", step / 2) .attr("dy", "0.35em") .text(d => d.key); svg.append("g") .call(xAxis); return svg.node(); }32:[] 2f:{"title":"Exploring store transactions with Horizon Charts","cells":[{"id":0,"value":"md`# Exploring store transactions with Horizon Charts\nThis is a follow up on the [Exploring customer transactions](https://observablehq.com/@drio/exploring-customer-transactions) notebook.\n\nI wanted to be able to see data from **all** the stores at the same time without compromising visual perception. Horizon charts work great here.\n\nHere is an explanation of horizon charts from the [notebook](https://observablehq.com/@d3/horizon-chart) I forked (Thank you Mike):\n\n\"Horizon charts are an alternative to [ridgeline plots](/@d3/ridgeline-plot) and small-multiple area charts that allow greater precision for a given vertical space by using colored bands.\"\n\nHere I am showing the sales per day for 11 stores. More intense colors indicate higher sales.\n\nI believe this charts reveal overall sales patterns across stores clearly.\n\nStores are sorted by the amount of sales (store number 2 is the one with the most accumulated sales).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"md `Select a color schema here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"md `Use the following slider to adjust the number of bands to use in the horizon charts.`","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":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"height = data.length * (step + 1) + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"margin = ({top: 30, right: 10, bottom: 0, left: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"step = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"color = i => d3[scheme][Math.max(3, overlap)][i + Math.max(0, 3 - overlap)]","pinned":false,"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":false,"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":false,"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":false,"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":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = {\n const data = await d3.csv(\"https://gist.githubusercontent.com/chrtze/c74efb46cadb6a908bbbf5227934bfea/raw/c32d94689dd432609c55d1758d8e69c59f94f802/traffic_weekly.csv\", ({name, date, total_1, total_2}) => ({name, date: new Date(date * 1000), value: +total_1 + +total_2}));\n const returnValue = d3.nest()\n .key(d => d.name)\n .sortValues((a, b) => a.date - b.date)\n .entries(data)\n .map(d => (d.sum = d3.sum(d.values, d => d.value), d))\n .sort((a, b) => b.sum - a.sum)\n .slice(0,2);\n// return returnValue;\n return transactionsByStore;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"import {data as transactionsData} from \"@drio/exploring-customer-transactions\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"transactionsData","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"transactionsByStore = {\n return d3.nest()\n .key(d => d.storeId)\n .sortValues((a,b) => a.sales > b.sales)\n .rollup(leaves => leaves.map(l => ({name: \"\" + l.storeId, date: new Date(l.date), value: l.sales})))\n .entries(transactionsData)\n .map(d => ({ key:d.key, values: d.value}))\n .map(d => (d.sum = +d3.sum(d.values, d => d.value).toFixed(2), d))\n .sort((a, b) => b.sum - a.sum)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}