From 140c3f9d7ca966ecda392af5d02bb56e3a642a03 Mon Sep 17 00:00:00 2001
From: b12f <git@benjaminbaedorf.eu>
Date: Sat, 24 Aug 2024 21:55:39 +0200
Subject: [PATCH] Inline mjs

---
 index.html | 429 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 293 insertions(+), 136 deletions(-)

diff --git a/index.html b/index.html
index a4980f4..731e128 100644
--- a/index.html
+++ b/index.html
@@ -7,158 +7,315 @@
 
   <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0" />
 
-	<style>
-		* {
-			box-sizing: border-box;
-		}
+  <style>
+    * {
+      box-sizing: border-box;
+    }
 
-		html {
-			--accent: #ed1c24;
-			--foreground: #000;
-			--background: #fff;
-			--background-alt: #f5f5f5;
+    html {
+      --accent: #ed1c24;
+      --foreground: #000;
+      --background: #fff;
+      --background-alt: #f5f5f5;
 
-			font-family: 'Open Sans', Arial, sans-serif;
-			font-weight: 800;
-			background: var(--background);
-			color: var(--foreground);
-			-ms-text-size-adjust: 100%;
-			-webkit-text-size-adjust: 100%;
-			-moz-osx-font-smoothing: grayscale;
-			-webkit-font-smoothing: antialiased;
-			box-sizing: border-box;
-			width: 100vw;
-			height: 100vh;
-			margin: 0;
-			font-size: 1vw;
-		}
+      font-family: 'Open Sans', Arial, sans-serif;
+      font-weight: 800;
+      background: var(--background);
+      color: var(--foreground);
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      box-sizing: border-box;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      font-size: 1vw;
+    }
 
-		body {
-			margin: 0;
-		}
+    body {
+      margin: 0;
+    }
 
-		.video {
-			height: 100vh;
-			width: 100vw;
-			object-fit: cover;
-			position: fixed;
-			z-index: -1;
-			top: 0%;
-			left: 0;
-		}
+    .video {
+      height: 100vh;
+      width: 100vw;
+      object-fit: cover;
+      position: fixed;
+      z-index: -1;
+      top: 0%;
+      left: 0;
+    }
 
-		@keyframes bling {
-			0% {
-				text-shadow: 0px 0px 0.0rem gold;
-			}
+    @keyframes bling {
+      0% {
+        text-shadow: 0px 0px 0.0rem gold;
+      }
 
-			30% {
-				text-shadow: 0px 0px 0.0rem gold;
-			}
+      30% {
+        text-shadow: 0px 0px 0.0rem gold;
+      }
 
-			50% {
-				text-shadow: 0px 0px 0.5rem gold;
-			}
+      50% {
+        text-shadow: 0px 0px 0.5rem gold;
+      }
 
-			70% {
-				text-shadow: 0px 0px 0.0rem gold;
-			}
+      70% {
+        text-shadow: 0px 0px 0.0rem gold;
+      }
 
-			100% {
-				text-shadow: 0px 0px 0.0rem gold;
-			}
-		}
+      100% {
+        text-shadow: 0px 0px 0.0rem gold;
+      }
+    }
 
-		@keyframes scale {
-			0% {
-				transform: scale(1);
-			}
+    @keyframes scale {
+      0% {
+        transform: scale(1);
+      }
 
-			50% {
-				transform: scale(2);
-			}
+      50% {
+        transform: scale(2);
+      }
 
-			100% {
-				transform: scale(1);
-			}
-		}
+      100% {
+        transform: scale(1);
+      }
+    }
 
-		#ad {
-			position: fixed;
-			z-index: 1;
-			bottom: 0;
-			right: 0;
-			left: 0;
-			padding: 0 16px;
-			color: gold;
-			font-size: 5vh;
-			text-shadow: 0px 0px 0.5rem gold;
-			animation-name: bling;
-			animation-duration: 1s;
-			animation-timing-function: linear;
-			animation-iteration-count: infinite;
-			white-space: nowrap;
-		}
+    #ad {
+      position: fixed;
+      z-index: 1;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      padding: 0 16px;
+      color: gold;
+      font-size: 5vh;
+      text-shadow: 0px 0px 0.5rem gold;
+      animation-name: bling;
+      animation-duration: 1s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      white-space: nowrap;
+    }
 
-		@keyframes rotate {
-			from {
-				transform: rotateY(0deg);
-			}
+    @keyframes rotate {
+      from {
+        transform: rotateY(0deg);
+      }
 
-			to {
-				transform: rotateY(360deg);
-			}
-		}
+      to {
+        transform: rotateY(360deg);
+      }
+    }
 
-		@keyframes depth {
-			0% { text-shadow: 0 0 #5b5015; }
-			25% { text-shadow: 4px 0 #5b5015, 8px 0 #5b5015, 12px 0 #5b5015, 16px 0 #5b5015, 20px 0 #5b5015; }
-			50% { text-shadow: 0 0 #5b5015; }
-			75% { text-shadow: -4px 0 #5b5015, -8px 0 #5b5015, -12px 0 #5b5015, -16px 0 #5b5015, -20px 0 #5b5015; }
-			100% { text-shadow: 0 0 #5b5015; }
-		}
+    @keyframes depth {
+      0% { text-shadow: 0 0 #5b5015; }
+      25% { text-shadow: 4px 0 #5b5015, 8px 0 #5b5015, 12px 0 #5b5015, 16px 0 #5b5015, 20px 0 #5b5015; }
+      50% { text-shadow: 0 0 #5b5015; }
+      75% { text-shadow: -4px 0 #5b5015, -8px 0 #5b5015, -12px 0 #5b5015, -16px 0 #5b5015, -20px 0 #5b5015; }
+      100% { text-shadow: 0 0 #5b5015; }
+    }
 
-		.money {
-			position: fixed;
-			top: 5vh;
-			left: 5vw;
-			z-index: 1;
-			color: gold;
-			font-size: 20vw;
-			animation-name: rotate, depth;
-			animation-timing-function: linear;
-			animation-iteration-count: infinite;
-			animation-duration: 5s;
-		}
-	</style>
+    .money {
+      position: fixed;
+      top: 5vh;
+      left: 5vw;
+      z-index: 1;
+      color: gold;
+      font-size: 20vw;
+      animation-name: rotate, depth;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      animation-duration: 5s;
+    }
+  </style>
 
-	<script
-		defer
-		type="module"
-		src="/scripts/money.mjs"
-	></script>
-	<body>
-		<video
-			class="video"
-			src="/assets/money-rains.mp4"
-			autoplay="true"
-			loop="true"
-			muted="true"
-		></video>
-		<div id="charts"></div>
-		<marquee
-			id="ad"
-			scrolldelay="10"
-			truespeed="true"
-			behavior="scroll"
-		>
-			mezza
-			nineninenine //
-			here for YOUR business //
-			we make that line go UP //
-			NEVER settle for less //
-			call NOW to talk to your personal finance savior
-		</marquee>
-		<div class="money">$</div>
-	</body>
+  <script
+    defer
+    type="module"
+  >
+    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"
+      src="/assets/money-rains.mp4"
+      autoplay="true"
+      loop="true"
+      muted="true"
+    ></video>
+    <div id="charts"></div>
+    <marquee
+      id="ad"
+      scrolldelay="10"
+      truespeed="true"
+      behavior="scroll"
+    >
+      mezza
+      nineninenine //
+      here for YOUR business //
+      we make that line go UP //
+      NEVER settle for less //
+      call NOW to talk to your personal finance savior
+    </marquee>
+    <div class="money">$</div>
+  </body>
 </html>