From 95348704e3fa88483072767bc99301dcddeeda1d Mon Sep 17 00:00:00 2001
From: Mason Payne <mason@masonitestudios.com>
Date: Mon, 29 May 2023 23:09:48 -0600
Subject: [PATCH] create animation

---
 .idea/.gitignore          |   8 +++
 .idea/Lines Animation.iml |   9 ++++
 .idea/modules.xml         |   8 +++
 .idea/vcs.xml             |   6 +++
 index.html                | 101 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 132 insertions(+)
 create mode 100644 .idea/.gitignore
 create mode 100644 .idea/Lines Animation.iml
 create mode 100644 .idea/modules.xml
 create mode 100644 .idea/vcs.xml
 create mode 100644 index.html
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/Lines Animation.iml b/.idea/Lines Animation.iml
new file mode 100644
index 0000000..5e764c4
--- /dev/null
+++ b/.idea/Lines Animation.iml	
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="Go" enabled="true" />
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..e0b14c6
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Lines Animation.iml" filepath="$PROJECT_DIR$/.idea/Lines Animation.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b495c41
--- /dev/null
+++ b/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lines</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js" integrity="sha512-nfUlp2ZWPKWlnAH/OsMeAqRSYBxOdPYeBXwceyw6QqqZ7uTT/s5/eS1hMKphjVBouk0jf/JQ8ULVJRnEqSHkXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+
+</body>
+
+<script>
+  // Sample data
+  const data = [
+    { color: 'red', value: 0.8 },
+    { color: 'green', value: 0.4 },
+    { color: 'blue', value: 0.2 },
+    { color: 'yellow', value: 0.7 },
+    { color: 'orange', value: 0.5 },
+    { color: 'purple', value: 0.1 },
+    { color: 'pink', value: 0.6 },
+    { color: 'brown', value: 0.3 },
+    { color: 'gray', value: 0.9 },
+    { color: 'cyan', value: 0.2 },
+    { color: 'magenta', value: 0.8 },
+    { color: 'lime', value: 0.4 },
+  ];
+
+  // Set up SVG container
+  const svg = d3.select('body')
+    .append('svg')
+    .attr('width', 500)
+    .attr('height', 200)
+    .style('background-color', 'black');
+
+
+
+  // Update function
+  function update() {
+    // Sort the data based on the value
+    // data.sort((a, b) => a.value - b.value);
+
+    // Draw initial lines
+    const lines = svg.selectAll('.line')
+      .data(data, (d) => d.color)
+      .enter()
+      .append('line')
+      .attr('class', 'line')
+      .attr('x1', 100)
+      .attr('x2', (d) => 100 + d.value * 300)
+      .attr('y1', (d, i) => i * 15 + 10)
+      .attr('y2', (d, i) => i * 15 + 10)
+      .attr('stroke', 'black')
+      .attr('stroke-width', 10)
+      .attr('stroke-linecap', 'round')
+      .transition()
+      .delay((d, i) => 500)
+      .duration(500)
+      .attr('stroke', (d) => d.color);
+
+    // Animate the lines to their new positions
+    svg.selectAll('.line')
+      .transition()
+      .duration(500)
+      .delay((d, i) => i * 50)
+      .attr('stroke', (d) => d.color)
+      .attr('opacity', (d, i) => 1 - i * i * 0.0075)
+      // .attr('x2', (d) => 100 + d.value * 300)
+      .attr('y1', (d, i) => i * 15 + 10)
+      .attr('y2', (d, i) => i * 15 + 10);
+  }
+
+  // Call the update function initially
+  update();
+
+  setInterval(() => {
+    // Update the data
+    // data.forEach((d) => {
+    //   d.value = Math.random();
+    // });
+    data.unshift({ color: randomColor(), value: Math.random() });
+
+    if (data.length > 12) {
+      data.pop();
+    }
+    // console.log(data);
+    // Call the update function
+    update();
+  }, 2000);
+
+  function randomColor() {
+    var color = '#';
+    var letters = '0123456789ABCDEF';
+    for (var i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
+</script>
+</html>
\ No newline at end of file
