Render log scales for bar chart example

aleics · Oct 3, 2024 · e56f9c5 · e56f9c5
1 parent 3743bcf
commit e56f9c5
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 25 deletions.
diff --git a/bruc-web/examples/bar-chart/index.html b/bruc-web/examples/bar-chart/index.html
@@ -1,9 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-  <body>
-    <div id="first"></div>
-    <div id="second"></div>
-    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
-    <script src="./index.js"></script>
-  </body>
+    <head>
+        <style>
+            .wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                row-gap: 20px;
+            }
+
+            .wrapper > div {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrapper">
+            <div id="first"></div>
+            <div id="first-log"></div>
+            <div id="second"></div>
+            <div id="second-log"></div>
+        </div>
+        <noscript
+            >This page contains webassembly and javascript content, please
+            enable javascript in your browser.</noscript
+        >
+        <script src="./index.js"></script>
+    </body>
 </html>
diff --git a/bruc-web/examples/bar-chart/index.js b/bruc-web/examples/bar-chart/index.js
@@ -2,8 +2,8 @@ import { Bruc } from "bruc";
 
 const specHorizontal = `{
   "dimensions": {
-    "width": 1500,
-    "height": 300
+    "width": 600,
+    "height": 200
   },
   "data": [
     {
@@ -16,13 +16,13 @@ const specHorizontal = `{
       "type": "band",
       "name": "horizontal",
       "domain": { "data": "primary", "field": "k" },
-      "range": [0, 1500]
+      "range": [0, 600]
     },
     {
       "type": "linear",
       "name": "vertical",
       "domain": { "data": "primary", "field": "q" },
-      "range": [0, 300]
+      "range": [0, 200]
     }
   ],
   "visual": {
@@ -58,10 +58,68 @@ const specHorizontal = `{
   }
 }`;
 
+const specHorizontalLog = `{
+  "dimensions": {
+    "width": 600,
+    "height": 200
+  },
+  "data": [
+    {
+      "name": "primary",
+      "values": []
+    }
+  ],
+  "scales": [
+    {
+      "type": "band",
+      "name": "horizontal",
+      "domain": { "data": "primary", "field": "k" },
+      "range": [0, 600]
+    },
+    {
+      "type": "log",
+      "name": "vertical",
+      "domain": { "data": "primary", "field": "q" },
+      "range": [0, 200]
+    }
+  ],
+  "visual": {
+    "axes": [
+      {
+        "orientation": "top",
+        "scale": "horizontal"
+      },
+      {
+        "orientation": "bottom",
+        "scale": "horizontal"
+      },
+      {
+        "orientation": "left",
+        "scale": "vertical"
+      },
+      {
+        "orientation": "right",
+        "scale": "vertical"
+      }
+    ],
+    "shapes": [
+      {
+        "from": "primary",
+        "type": "bar",
+        "properties": {
+          "x": { "field": "k", "scale": "horizontal" },
+          "height": { "field": "q", "scale": "vertical" },
+          "fill": "green"
+        }
+      }
+    ]
+  }
+}`;
+
 const specVertical = `{
   "dimensions": {
-    "width": 800,
-    "height": 800
+    "width": 600,
+    "height": 400
   },
   "data": [
     {
@@ -74,13 +132,13 @@ const specVertical = `{
       "type": "linear",
       "name": "horizontal",
       "domain": { "data": "primary", "field": "q" },
-      "range": [0, 800]
+      "range": [0, 600]
     },
     {
       "type": "band",
       "name": "vertical",
       "domain": { "data": "primary", "field": "k" },
-      "range": [0, 800]
+      "range": [0, 400]
     }
   ],
   "visual": {
@@ -116,32 +174,98 @@ const specVertical = `{
   }
 }`;
 
+const specVerticalLog = `{
+  "dimensions": {
+    "width": 600,
+    "height": 400
+  },
+  "data": [
+    {
+      "name": "primary",
+      "values": []
+    }
+  ],
+  "scales": [
+    {
+      "type": "log",
+      "name": "horizontal",
+      "domain": { "data": "primary", "field": "q" },
+      "range": [0, 600]
+    },
+    {
+      "type": "band",
+      "name": "vertical",
+      "domain": { "data": "primary", "field": "k" },
+      "range": [0, 400]
+    }
+  ],
+  "visual": {
+    "axes": [
+      {
+        "orientation": "top",
+        "scale": "horizontal"
+      },
+      {
+        "orientation": "bottom",
+        "scale": "horizontal"
+      },
+      {
+        "orientation": "left",
+        "scale": "vertical"
+      },
+      {
+        "orientation": "right",
+        "scale": "vertical"
+      }
+    ],
+    "shapes": [
+      {
+        "from": "primary",
+        "type": "bar",
+        "properties": {
+          "y": { "field": "k", "scale": "vertical" },
+          "width": { "field": "q", "scale": "horizontal" },
+          "fill": "orange"
+        }
+      }
+    ]
+  }
+}`;
+
 const horizontal = Bruc.build(specHorizontal);
 await horizontal.renderAsSvg("#first");
 
+const horizontalLog = Bruc.build(specHorizontalLog);
+await horizontalLog.renderAsSvg("#first-log");
+
 const vertical = Bruc.build(specVertical);
 await vertical.renderAsSvg("#second");
 
+const verticalLog = Bruc.build(specVerticalLog);
+await verticalLog.renderAsSvg("#second-log");
+
 while (true) {
   const data = randomData();
 
   await horizontal.setData("primary", data);
   await vertical.setData("primary", data);
+  await horizontalLog.setData("primary", data);
+  await verticalLog.setData("primary", data);
 
   await delay(1000);
 }
 
 function randomData() {
   const values = [];
-  for (let i = 0; i < 30; i++) {
-    const y = randomValue(50);
+  for (let i = 1; i <= 20; i++) {
+    const y = randomValue(1, 50);
     values.push({ k: i, q: y });
   }
   return values;
 }
 
-function randomValue(max) {
-  return Math.floor(Math.random() * max);
+function randomValue(min, max) {
+  return Math.random() * (max - min) + min;
 }
 
 function delay(time) {

diff --git a/bruc-web/examples/line-chart/index.js b/bruc-web/examples/line-chart/index.js
@@ -178,21 +178,21 @@ while (true) {
 
 function randomData() {
   const values = [];
-  for (let i = 1; i <= randomValue(200); i++) {
+  for (let i = 1; i <= randomValue(0, 200); i++) {
     values.push({
       x: i,
-      y: randomValue(50),
+      y: randomValue(0, 50),
       k: i,
-      q: randomValue(50),
+      q: randomValue(0, 50),
       a: i,
-      b: randomValue(50),
+      b: randomValue(0, 50),
     });
   }
   return values;
 }
 
-function randomValue(max) {
-  return Math.floor(Math.random() * max);
+function randomValue(min, max) {
+  return Math.random() * (max - min) + min;
 }
 
 function delay(time) {