Replace canvas element with a D3 svg

docs/index.html

@@ -16,7 +16,7 @@
     </div>
     <div id="title-text"><strong>interlink</strong><small> v0.0.1-alpha.1</small></div>
   </div>
-  <canvas id="intensityGraph"></canvas>
+  <div id="intensityGraph"></div>
   <!-- Here it's better to not use the actual table markup -->
   <div id="tableContainer">
     <div class="tableHead left-most" id="model">model</div>

docs/script.js

@@ -1,14 +1,29 @@
 const folderPath = "answers/interlink_mistral_big5"
-
-document.getElementById('startButton').addEventListener('click', function() {
+const strokeWidth = 1.5
+const strokeColor = 'black'
+var svgContainer
+var path
+var yScale = d3.scaleLinear().range([4 * window.innerHeight / 100, 0])
+var lineGenerator = d3.line().curve(d3.curveBasis)
+  .x(function (d) { return d.x })
+  .y(function (d) { return yScale(d.y) });
+
+document.getElementById('startButton').addEventListener('click', function () {
   fetch(`${folderPath}/test_2719711939644891597.json`)
-  .then(response => response.json())
-  .then(data => {
+    .then(response => response.json())
+    .then(data => {
       displayBanner(data);
       preloadImages(data.answers);
-      displayChat(data.answers);
+      svgContainer = d3.select('#intensityGraph').append('svg').attr('height', '100%').attr('width', '100%');
+      path = svgContainer.append('path')
+        .attr('d', lineGenerator([{ "x": 0, "y": 3 }, { "x": 0, "y": 3 }])) // Start with an empty data array
+        .attr('stroke', strokeColor)
+        .attr('stroke-width', strokeWidth)
+        .attr('fill', 'none')
+      drawGrid(svgContainer);
+      displayChat(data.answers)
       this.remove();
-  });
+    });
 });
 
 function displayBanner(data) {
@@ -73,18 +88,18 @@ function displayChat(answers) {
     scrollToBottom(container);
     playAudioForQuestion(answers[i].index)
       .onended = () => {
-      displayAnswer(answers[i], container);
-      scrollToBottom(container);
-      playBeep(parseFloat(answers[i].sample)).onended = () => {
+        displayAnswer(answers[i], container);
         scrollToBottom(container);
-        const img = images[i];
-        img.style.display = 'inline-block';
-        img.scrollIntoView({ behavior: 'smooth', inline: 'start' });
-        updateIntensityGraph(answers[i], i, answers.length);
-        i++;
-        if (i < answers.length) nextQuestion();
-      };
-    }
+        playBeep(parseFloat(answers[i].sample)).onended = () => {
+          scrollToBottom(container);
+          const img = images[i];
+          img.style.display = 'inline-block';
+          img.scrollIntoView({ behavior: 'smooth', inline: 'start' });
+          updateIntensityGraph(answers[i], i, answers.length);
+          i++;
+          if (i < answers.length) nextQuestion();
+        };
+      }
   }
 
   nextQuestion();
@@ -98,33 +113,55 @@ function scrollToBottom(el) {
 }
 
 function updateIntensityGraph(answer, index, totalAnswers) {
-  const canvas = document.getElementById('intensityGraph');
-  const ctx = canvas.getContext('2d');
-
-  if (index === 0) {
-      canvas.width = window.innerWidth;
-      ctx.beginPath();
-      ctx.strokeStyle = 'black';
-      ctx.lineWidth = 1;
-  }
-
   const maxIntensity = 10;
-  const widthIncrement = canvas.width / totalAnswers;
+  const widthIncrement = window.innerWidth / totalAnswers;
   let currentX = index * widthIncrement;
-
   const intensity = answer.sample;
-  const y = canvas.height - (intensity / maxIntensity) * canvas.height;
-
-  // Calculate the coordinates for the control points
-  let cp1x = currentX - widthIncrement/2;
-  let cp1y = y;
-  let cp2x = currentX;
-  let cp2y = y;
-
-  if (index === 0) {
-      ctx.moveTo(currentX, y);
-  } else {
-      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, currentX, y);
-      ctx.stroke();
-  }
+  yScale.domain([0, maxIntensity]);
+
+  var dataPoint = { "x": currentX, "y": intensity };
+  var currentData = path.datum();
+
+  currentData.push(dataPoint);
+
+  path.datum(currentData)
+    .attr('d', lineGenerator);
+
+  var totalLength = path.node().getTotalLength();
+
+  path
+    .attr("stroke-dasharray", totalLength + " " + totalLength)
+    .attr("stroke-dashoffset", totalLength)
+    .transition()
+    .duration(700)
+    .ease(d3.easeLinear)
+    .attr("stroke-dashoffset", 0);
 }
+
+function drawGrid(svgContainer) {
+  var width = window.innerWidth;
+  var height = 4 * window.innerHeight / 100;
+
+  var numVerticalLines = window.innerWidth / 20;
+  var numHorizontalLines = window.innerHeight / 300;
+
+  for (let i = 0; i <= numHorizontalLines; i++) {
+    svgContainer.append("line")
+      .attr("x1", 0)
+      .attr("y1", height / numHorizontalLines * i)
+      .attr("x2", width)
+      .attr("y2", height / numHorizontalLines * i)
+      .attr("stroke", strokeColor)
+      .attr("stroke-width", 0.2);
+  }
+
+  for (let i = 0; i <= numVerticalLines; i++) {
+    svgContainer.append("line")
+      .attr("x1", width / numVerticalLines * i)
+      .attr("y1", 0)
+      .attr("x2", width / numVerticalLines * i)
+      .attr("y2", height)
+      .attr("stroke", strokeColor)
+      .attr("stroke-width", 0.2);
+  }
+}

docs/style.css

@@ -20,7 +20,6 @@ html {
   display: flex;
   align-items: center;
   font-size: 8vw;
-  z-index: 2;
   height: 16vh;
   border-bottom: 1vh solid black;
 }
@@ -30,7 +29,6 @@ html {
   width: 100%;
   top: 16vh;
   height: 4vh;
-  z-index: 2;
   border-bottom: 0.2vh solid black;
 }
 
@@ -75,14 +73,15 @@ html {
 }
 
 #tableContainer .tableHead {
-  font-size: 3vh;
+  font-size: clamp(12px, 2.8vw, 30px);
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-#tableContainer #modelContent, #tableContainer #testNameContent {
+#tableContainer #modelContent,
+#tableContainer #testNameContent {
   padding: 2vw;
   text-align: center;
 }
@@ -190,5 +189,4 @@ html {
   color: #000;
   margin-left: 1vh;
   margin-bottom: 0.5vh;
-}
-
+}