xinau/canvas.html

## canvas.html
<!doctype html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="graph"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    (async () => {
        overlap = 5
        step = 24
        mirror = false

        color = i => d3["schemeRdBu"][overlap * 2 + 1][i + (i >= 0) + overlap]

        data = [
            {k: "AAPL", v: (await fetch("AAPL.csv").then(r => r.text()))},
            {k: "GOOG", v: (await fetch("GOOG.csv").then(r => r.text()))},
            {k: "IBM",  v: (await fetch("IBM.csv").then(r => r.text()))},
            {k: "MSFT", v: (await fetch("MSFT.csv").then(r => r.text()))}
        ].map(csv => {
            const values = d3.csvParse(csv.v, d => ({
                date: d3.utcParse("%Y-%m-%d")(d["Date"]),
                value: +d["Close"]
            }));
            const v = values[0].value;
            return {
                key: csv.k,
                values: values.map(({date, value}) => ({date, value: Math.log(value / v)}))
            };
        })

        margin = ({top: 30, right: 10, bottom: 0, left: 10})
        width  = 600
        height = data.length * (step + 1) + margin.top + margin.bottom

        x = d3.scaleUtc()
            .domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])
            .range([0, width])

        ymax = d3.max(data, d => d3.max(d.values, d => Math.abs(d.value)));
        y = d3.scaleLinear()
            .domain([-ymax, +ymax])
            .range([overlap * step, -overlap * step]);

        xAxis = g => g
            .attr("transform", `translate(0,${margin.top})`)
            .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))
            .call(g => g.selectAll(".tick").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())
            .call(g => g.select(".domain").remove())

        area = d3.area()
            .curve(d3.curveLinear)
            .defined(d => !isNaN(d.value))
            .x(d => x(d.date))
            .y0(0)

        function horizon(d) {
            const {context} = this;

            area.y1(d => y(d.value)).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();
            }

            area.y1(d => y(-d.value)).context(context);
            for (let i = 0; i < overlap; ++i) {
                context.save();
                if (mirror) {
                    context.translate(0, (i + 1) * step);
                } else {
                    context.scale(1, -1)
                    context.translate(0, i * step);
                }
                context.beginPath();
                area(d.values);
                context.fillStyle = color(-i -1);
                context.fill();
                context.restore();
            }
        }

        var dpr = window.devicePixelRatio || 1;

        const graph = d3.select("#graph")

        const canvas = graph.selectAll("canvas")
              .data(data)
              .join("canvas")
              .attr("width", width * dpr)
              .attr("height", step * dpr)
              .style("position", "absolute")
              .style("top", (d, i) => `${i * (step + 1) + margin.top}px`)
              .style("width", width + "px")
              .property("context", function() {
                  var ctx = this.getContext("2d");
                  ctx.scale(dpr, dpr);
                  return ctx;
              })
              .each(horizon);

        const svg = graph.append("svg")
              .attr("width", width)
              .attr("height", 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);
    })()
  </script>
</body>

## svg.html
<!doctype html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="graph"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    (async () => {
        overlap = 5
        step = 24
        mirror = false

        color = i => d3["schemeRdBu"][overlap * 2 + 1][i + (i >= 0) + overlap]

        data = [
            {k: "AAPL", v: (await fetch("AAPL.csv").then(r => r.text()))},
            {k: "GOOG", v: (await fetch("GOOG.csv").then(r => r.text()))},
            {k: "IBM",  v: (await fetch("IBM.csv").then(r => r.text()))},
            {k: "MSFT", v: (await fetch("MSFT.csv").then(r => r.text()))}
        ].map(csv => {
            const values = d3.csvParse(csv.v, d => ({
                date: d3.utcParse("%Y-%m-%d")(d["Date"]),
                value: +d["Close"]
            }));
            const v = values[0].value;
            return {
                key: csv.k,
                values: values.map(({date, value}) => ({date, value: Math.log(value / v)}))
            };
        })

        margin = ({top: 30, right: 10, bottom: 0, left: 10})
        width  = 600
        height = data.length * (step + 1) + margin.top + margin.bottom

        x = d3.scaleUtc()
            .domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])
            .range([0, width])

        ymax = d3.max(data, d => d3.max(d.values, d => Math.abs(d.value)));
        y = d3.scaleLinear()
            .domain([-ymax, +ymax])
            .range([overlap * step, -overlap * step]);

        xAxis = g => g
            .attr("transform", `translate(0,${margin.top})`)
            .call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))
            .call(g => g.selectAll(".tick").filter(d => x(d) < margin.left || x(d) >= width - margin.right).remove())
            .call(g => g.select(".domain").remove())

        area = d3.area()
            .curve(d3.curveLinear)
            .defined(d => !isNaN(d.value))
            .x(d => x(d.date))
            .y0(0)
            .y1(d => y(d.value))

        function DomUID(id) {
            this.id = id;
            this.href = new URL(`#${id}`, location) + "";
            return this
        }
        DomUID.count = 0;
        DomUID.uid = function(name) {
            return new DomUID("O-" + (name == null ? "" : name + "-") + ++this.count)
        };
        DomUID.prototype.toString = function() {
            return "url(" + this.href + ")";
        };

        const svg = d3.select("#graph")
              .append("svg")
              .attr("width", width)
              .attr("height", height)
              .style("font", "10px sans-serif");

        const g = svg.append("g")
              .selectAll("g")
              .data(data, d => {
                  console.log(d)
                  return d
              })
              .join("g")
              .attr("transform", (d, i) => `translate(0,${i * (step + 1) + margin.top})`);

        g.append("clipPath")
            .attr("id", (d, i) => (d.clip = DomUID.uid("clip")).id)
            .append("rect")
            .attr("width", width)
            .attr("height", step);

        g.append("defs")
            .append("path")
            .attr("id", (d, i) => (d.path = DomUID.uid("path")).id)
            .attr("d", d => area(d.values));

        g.append("g")
            .attr("clip-path", d => d.clip)
            .selectAll("use")
            .data(d => Array.from(
                {length: overlap * 2},
                (_, i) => Object.assign({index: i < overlap ? -i - 1 : i - overlap}, d)
            ))
            .join("use")
            .attr("fill", d => color(d.index))
            .attr("transform", d => mirror && d.index < 0
                  ? `scale(1,-1) translate(0,${d.index * step})`
                  : `translate(0,${(d.index + 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);
    })()
  </script>
</body>
	<!doctype html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="graph"></div>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	(async () => {
	overlap = 5
	step = 24
	mirror = false

	color = i => d3["schemeRdBu"][overlap * 2 + 1][i + (i >= 0) + overlap]

	data = [
	{k: "AAPL", v: (await fetch("AAPL.csv").then(r => r.text()))},
	{k: "GOOG", v: (await fetch("GOOG.csv").then(r => r.text()))},
	{k: "IBM", v: (await fetch("IBM.csv").then(r => r.text()))},
	{k: "MSFT", v: (await fetch("MSFT.csv").then(r => r.text()))}
	].map(csv => {
	const values = d3.csvParse(csv.v, d => ({
	date: d3.utcParse("%Y-%m-%d")(d["Date"]),
	value: +d["Close"]
	}));
	const v = values[0].value;
	return {
	key: csv.k,
	values: values.map(({date, value}) => ({date, value: Math.log(value / v)}))
	};
	})

	margin = ({top: 30, right: 10, bottom: 0, left: 10})
	width = 600
	height = data.length * (step + 1) + margin.top + margin.bottom

	x = d3.scaleUtc()
	.domain([data[0].values[0].date, data[0].values[data[0].values.length - 1].date])
	.range([0, width])

	ymax = d3.max(data, d => d3.max(d.values, d => Math.abs(d.value)));
	y = d3.scaleLinear()
	.domain([-ymax, +ymax])
	.range([overlap * step, -overlap * step]);

	xAxis = g => g
	.attr("transform", `translate(0,${margin.top})`)
	.call(d3.axisTop(x).ticks(width / 80).tickSizeOuter(0))
	.call(g => g.selectAll(".tick").filter(d => x(d) < margin.left \|\| x(d) >= width - margin.right).remove())
	.call(g => g.select(".domain").remove())

	area = d3.area()
	.curve(d3.curveLinear)
	.defined(d => !isNaN(d.value))
	.x(d => x(d.date))
	.y0(0)

	function horizon(d) {
	const {context} = this;

	area.y1(d => y(d.value)).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();
	}

	area.y1(d => y(-d.value)).context(context);
	for (let i = 0; i < overlap; ++i) {
	context.save();
	if (mirror) {
	context.translate(0, (i + 1) * step);
	} else {
	context.scale(1, -1)
	context.translate(0, i * step);
	}
	context.beginPath();
	area(d.values);
	context.fillStyle = color(-i -1);
	context.fill();
	context.restore();
	}
	}

	var dpr = window.devicePixelRatio \|\| 1;

	const graph = d3.select("#graph")

	const canvas = graph.selectAll("canvas")
	.data(data)
	.join("canvas")
	.attr("width", width * dpr)
	.attr("height", step * dpr)
	.style("position", "absolute")
	.style("top", (d, i) => `${i * (step + 1) + margin.top}px`)
	.style("width", width + "px")
	.property("context", function() {
	var ctx = this.getContext("2d");
	ctx.scale(dpr, dpr);
	return ctx;
	})
	.each(horizon);

	const svg = graph.append("svg")
	.attr("width", width)
	.attr("height", 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);
	})()
	</script>
	</body>