Inline mjs

index.html

@@ -135,8 +135,165 @@
   <script
     defer
     type="module"
-		src="/scripts/money.mjs"
+  >
-	></script>
+    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+
+    // Copyright 2021 Observable, Inc.
+    // Released under the ISC license.
+    // https://observablehq.com/@d3/candlestick-chart
+    function CandlestickChart(data, {
+      date = d => d.date, // given d in data, returns the (temporal) x-value
+      open = d => d.open, // given d in data, returns a (quantitative) y-value
+      close = d => d.close, // given d in data, returns a (quantitative) y-value
+      high = d => d.high, // given d in data, returns a (quantitative) y-value
+      low = d => d.low, // given d in data, returns a (quantitative) y-value
+      title, // given d in data, returns the title text
+      marginTop = 20, // top margin, in pixels
+      marginRight = 30, // right margin, in pixels
+      marginBottom = 30, // bottom margin, in pixels
+      marginLeft = 40, // left margin, in pixels
+      width = 640, // outer width, in pixels
+      height = 400, // outer height, in pixels
+      xDomain, // array of x-values (defaults to every weekday)
+      xRange = [marginLeft, width - marginRight], // [left, right]
+      xPadding = 0.2,
+      xTicks, // array of x-values to label (defaults to every other Monday)
+      yType = d3.scaleLinear, // type of y-scale
+      yDomain, // [ymin, ymax]
+      yRange = [height - marginBottom, marginTop], // [bottom, top]
+      xFormat = "%b %-d", // a format specifier for the date on the x-axis
+      yFormat = "~f", // a format specifier for the value on the y-axis
+      yLabel, // a label for the y-axis
+      stroke = "gold", // stroke color for the daily rule
+      strokeLinecap = "round", // stroke line cap for the rules
+      colors = ["gold", "white", "black"] // [up, no change, down]
+    } = {}) {
+      // Compute values.
+      const X = d3.map(data, date);
+      const Yo = d3.map(data, open);
+      const Yc = d3.map(data, close);
+      const Yh = d3.map(data, high);
+      const Yl = d3.map(data, low);
+      const I = d3.range(X.length);
+
+      const weeks = (start, stop, stride) => d3.utcMonday.every(stride).range(start, +stop + 1);
+      const weekdays = (start, stop) => d3.utcDays(start, +stop + 1).filter(d => d.getUTCDay() !== 0 && d.getUTCDay() !== 6);
+
+      // Compute default domains and ticks.
+      if (xDomain === undefined) xDomain = weekdays(d3.min(X), d3.max(X));
+      if (yDomain === undefined) yDomain = [d3.min(Yl), d3.max(Yh)];
+      if (xTicks === undefined) xTicks = weeks(d3.min(xDomain), d3.max(xDomain), 2);
+
+      // Construct scales and axes.
+      // If you were to plot a stock using d3.scaleUtc, you’d see distracting gaps
+      // every weekend. This chart therefore uses a d3.scaleBand whose domain is every
+      // weekday in the dataset. A few gaps remain for holiday weekdays, such as
+      // Christmas, but these are infrequent and allow the labeling of Mondays. As a
+      // band scale, we specify explicit tick values.
+      const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding);
+      const yScale = yType(yDomain, yRange);
+
+      // Compute titles.
+      if (title === undefined) {
+        const formatDate = d3.utcFormat("%B %-d, %Y");
+        const formatValue = d3.format(".2f");
+        const formatChange = (f => (y0, y1) => f((y1 - y0) / y0))(d3.format("+.2%"));
+        title = i => `${formatDate(X[i])}
+    Open: ${formatValue(Yo[i])}
+    Close: ${formatValue(Yc[i])} (${formatChange(Yo[i], Yc[i])})
+    Low: ${formatValue(Yl[i])}
+    High: ${formatValue(Yh[i])}`;
+      } else if (title !== null) {
+        const T = d3.map(data, title);
+        title = i => T[i];
+      }
+
+      const svg = d3.create("svg")
+          .attr("width", width)
+          .attr("height", height)
+          .attr("viewBox", [0, 0, width, height])
+          .attr("style", "max-width: 100%; height: auto; height: intrinsic;");
+
+      const g = svg.append("g")
+          .attr("stroke", stroke)
+          .attr("stroke-linecap", strokeLinecap)
+        .selectAll("g")
+        .data(I)
+        .join("g")
+          .attr("transform", i => {
+            return `translate(${xScale.step() * i},0)`;
+          });
+
+      g.append("line")
+          .attr("y1", i => yScale(Yl[i]))
+          .attr("y2", i => yScale(Yh[i]));
+
+      g.append("line")
+          .attr("y1", i => yScale(Yo[i]))
+          .attr("y2", i => yScale(Yc[i]))
+          .attr("stroke-width", xScale.bandwidth())
+          .attr("stroke", i => colors[1 + Math.sign(Yo[i] - Yc[i])]);
+
+      if (title) g.append("title")
+          .text(title);
+
+      return svg.node();
+    }
+
+    const getNewDataPoint = (oldPoint) => ({
+      date: new Date(+oldPoint.date + (24 * 60 * 60 * 1000)), 
+      open: oldPoint.close,
+      high: oldPoint.close + Math.random() * 5000 - 1000,
+      low: oldPoint.close - Math.random() * 2000 + 1000,
+      close: oldPoint.close + Math.random() * 2000 - Math.random() * 1000,
+      volume: Math.random() * 21899500 / 2 + 4229132,
+    });
+
+    const open = Math.random() * 200;
+    const initialPoint = {
+      date: new Date(),
+      open,
+      high: open + Math.random() * 400,
+      low: open - Math.random() * 200,
+      close: open + Math.random() * 2000 - Math.random() * 1000,
+      volume: 21899500,
+    };
+
+    const baseArray = new Array(200)
+      .fill(null)
+      .reduce((list, _, i) => [
+        ...list,
+        getNewDataPoint(list[i]),
+      ], [initialPoint]);
+
+    const createChart = () => {
+      const svgs = document.body.getElementsByTagName('svg');
+      for (let svg of svgs) {
+        document.body.removeChild(svg);
+      }
+
+      const chart = CandlestickChart(baseArray, {
+        date: d => d.date,
+        high: d => d.high,
+        low: d => d.low,
+        open: d => d.open,
+        close: d => d.close,
+        yLabel: "↑ Price ($)",
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+
+      document.body.appendChild(chart);
+    }
+
+    createChart();
+
+    setInterval(() => {
+      baseArray.shift();
+      baseArray.push(getNewDataPoint(baseArray[baseArray.length - 1]));
+      createChart();
+    }, 500);
+  </script>
   <body>
     <video
       class="video"