Stacked barplot playground

unipept · Sep 15, 2023 · 3fca52a · 3fca52a
1 parent cf67bb5
commit 3fca52a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/examples/stacked-percentage-barplot.html b/examples/stacked-percentage-barplot.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+    <title>Stacked Percentage Barplot example</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
+
+    <!-- Visualisations -->
+    <script src="../dist/unipept-visualizations.js"></script>
+</head>
+
+<body>
+<div id="d3Barplot"></div>
+
+<script>
+    const barplot = new UnipeptVisualizations.StackedPercentageBarplot(
+        document.getElementById("d3Barplot"),
+        {
+            width: 600,
+            height: 600,
+            enableTooltips: false
+        }
+    );
+
+</script>
+</body>
+</html>
+
diff --git a/src/visualizations/barplot/StackedPercentageBarplot.ts b/src/visualizations/barplot/StackedPercentageBarplot.ts
@@ -1,13 +1,15 @@
 import * as d3 from "d3";
 import BarCollection from "./BarCollection";
+import StackedPercentageBarplotSettings from "./StackedPercentageBarplotSettings";
 
 export default class StackedPercentageBarplot {
     private stackedBarplot!: d3.Selection<HTMLDivElement, unknown, null, undefined>;
     private legend!: d3.Selection<HTMLDivElement, unknown, null, undefined>;
 
     constructor(
         private readonly element: HTMLElement,
-        private readonly bars: BarCollection
+        private readonly bars: BarCollection,
+        private readonly settings: StackedPercentageBarplotSettings
     ) {
         this.stackedBarplot = d3.select(this.element).append("div");
         this.legend = d3.select(this.element).append("div");
@@ -21,6 +23,22 @@ export default class StackedPercentageBarplot {
         // For each of the bars, we need to figure out how many items are on there, and what percentage each of the
         // items occupies.
 
+        const allPercentages = [];
 
+        for (const bar of data.bars) {
+            if (bar.counts.length !== data.itemNames.length) {
+                throw new Error("Every bar must provide the same amount of items and counts!");
+            }
+
+            const totalCount = bar.counts.reduce((prev, curr) => prev + curr, 0);
+            const percentages = bar.counts.map(c => c / totalCount);
+
+            allPercentages.push(percentages);
+        }
+
+        this.stackedBarplot.selectAll(".bar")
+            .data(allPercentages)
+            .enter()
+            .append("div");
     }
 }
diff --git a/src/visualizations/treeview/Treeview.ts b/src/visualizations/treeview/Treeview.ts
@@ -175,7 +175,7 @@ export default class Treeview {
             .attr("class", "node")
             .style("cursor", "pointer")
             // Every node is originally situated on the clicked node's (the source) position. Animations afterwards
-            // reposition the node to it's final location.
+            // reposition the node to its final location.
             .attr("transform", `translate(${source.y || 0},${source.data.previousPosition.x || 0})`)
             .on("click", (event: MouseEvent, d: HPN<TreeviewNode>) => this.click(event, d))
             .on("mouseover", (event: MouseEvent, d: HPN<TreeviewNode>) => this.tooltipIn(event, d))