Fine tune

MarkHershey · Dec 19, 2023 · 3ff2cef · 3ff2cef
1 parent 5b9034f
commit 3ff2cef
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/bar-chart-race/index.html b/bar-chart-race/index.html
@@ -3,7 +3,16 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>HDB Flat Resale Price</title>
+        <!-- <title>HDB Flat Resale Price Chart</title> -->
+        <title>Explore Singapore's Priciest HDB Towns</title>
+        <!-- for SEO -->
+        <meta
+            name="description"
+            content="Explore Singapore's Priciest HDB Towns via Bar Chart Race from 2012 to 2023."
+        />
+        <meta name="author" content="Mark He Huang" />
+        <meta name="keywords" content="HDB, Singapore, Resale Price, HDB Price, Bar Chart Race" />
+        <meta name="robots" content="index, follow" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
@@ -13,21 +22,22 @@
     </head>
     <body>
         <div id="app">
-            <h1>What are the most expensive HDB towns in Singapore?</h1>
+            <!-- <h1>What are the most expensive HDB towns in Singapore?</h1> -->
+            <h1>Explore Singapore's Priciest HDB Towns</h1>
             <p style="color: #5c5c5c">
                 <i>
-                    based on official resale flat price data published by the
+                    based on official resale flat price data published by
                     Housing and Development Board (HDB)
                 </i>
-                <i
-                    >, Unit: Singapore dollar (S$) / Square meters
-                    (m<sup>2</sup>)</i
+                <i></i>
+                    ; Unit: Singapore dollar per square meters
+                    (S$/m<sup>2</sup>)</i
                 >
             </p>
             <div id="control"></div>
             <div id="chart"></div>
             <p style="margin-top: 2rem; color: #5c5c5c">
-                Source:
+                source:
                 <a
                     href="https://beta.data.gov.sg/collections/189/view"
                     ref="noopener noreferrer"

diff --git a/bar-chart-race/main.js b/bar-chart-race/main.js
@@ -17,7 +17,7 @@ const duration = 150; // animation duration between keyframes in milliseconds
 const margin = ({ top: 16, right: 6, bottom: 6, left: 0 });
 const barSize = 48;
 const height = margin.top + barSize * topN + margin.bottom;
-const width = 1280;
+const width = 1800;
 const y = d3.scaleBand()
   .domain(d3.range(topN + 1))
   .rangeRound([margin.top, margin.top + barSize * (topN + 1 + 0.1)])
@@ -234,8 +234,8 @@ async function updateAnimation(svg, updateAxis, updateBars, updateLabels, update
 
 async function updateAnimationByProgress(svg, updateAxis, updateBars, updateLabels, updateTicker, updateProgressBar, progress) {
   // progress is a number between 0 and 1 (0% and 100%)
-  if (progress < 0) progress = 0;
-  if (progress > 1) progress = 1;
+  if (progress <= 0.001) progress = 0;
+  if (progress >= 0.995) progress = 1;
   // get the keyFramesIdx (rounding down)
   var keyFramesIdx;
   if (progress === 1) {
@@ -251,8 +251,8 @@ async function updateAnimationByProgress(svg, updateAxis, updateBars, updateLabe
 
 async function playAnimationFromProgress(svg, updateAxis, updateBars, updateLabels, updateTicker, updateProgressBar, progress) {
   // progress is a number between 0 and 1 (0% and 100%)
-  if (progress < 0) progress = 0;
-  if (progress > 1) progress = 1;
+  if (progress <= 0.001) progress = 0;
+  if (progress >= 0.995) progress = 1;
   const keyFramesIdx = Math.floor(progress * keyFramesGlobal.length);
   for (let i = keyFramesIdx; i < keyFramesGlobal.length; i++) {
     await updateAnimation(svg, updateAxis, updateBars, updateLabels, updateProgressBar, updateTicker, i);
@@ -270,7 +270,7 @@ async function main() {
   /////////////////////////////////////////////////////////////////////////////
   // Play Text Button
 
-  const playText = "Play";
+  const playText = " Play ";
   const pauseText = "Pause";
 
   const playButton = d3.select("#control")
@@ -295,10 +295,10 @@ async function main() {
   // Draggable Progress Bar
 
   const barWidth = 800;
-  const barHeight = 20;
+  const barHeight = 22;
   const handleRadius = barHeight / 2 - 2;
-  const minPosition = handleRadius;
-  const maxPosition = barWidth - handleRadius;
+  const minPosition = handleRadius + 2;
+  const maxPosition = barWidth - minPosition;
   const positionRange = maxPosition - minPosition;
 
 
@@ -353,6 +353,7 @@ async function main() {
     handle.attr("cx", position);
     progressBar.attr("width", position);
     palyPaused = true;
+    playButton.text(playText);
   }
 
   function dragEnded(event) {