From e56f9c5059c31edf4e353aeddbd7f156ef0d9993 Mon Sep 17 00:00:00 2001 From: aleics Date: Thu, 3 Oct 2024 17:14:55 +0200 Subject: [PATCH] Render log scales for bar chart example --- bruc-web/examples/bar-chart/index.html | 36 ++++-- bruc-web/examples/bar-chart/index.js | 148 +++++++++++++++++++++++-- bruc-web/examples/line-chart/index.js | 12 +- 3 files changed, 171 insertions(+), 25 deletions(-) diff --git a/bruc-web/examples/bar-chart/index.html b/bruc-web/examples/bar-chart/index.html index 0da1bd5..6456d16 100644 --- a/bruc-web/examples/bar-chart/index.html +++ b/bruc-web/examples/bar-chart/index.html @@ -1,9 +1,31 @@ - + - -
-
- - - + + + + +
+
+
+
+
+
+ + + diff --git a/bruc-web/examples/bar-chart/index.js b/bruc-web/examples/bar-chart/index.js index 29b483f..6e35b43 100644 --- 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 index 03ffa77..1a524cb 100644 --- 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) {