diff --git a/backend/alignment.go b/backend/alignment.go
index aed2a9c..20c510a 100644
--- a/backend/alignment.go
+++ b/backend/alignment.go
@@ -190,6 +190,16 @@ type FastaEntry struct {
 type SearchResult struct {
 	Database   string      `json:"db"`
 	Alignments interface{} `json:"alignments"`
+	TaxonomyReport interface{} `json:"taxonomyreport"`
+}
+
+type TaxonomyReport struct {
+    Proportion    float64 `json:"proportion"`
+    CladeReads    int     `json:"clade_reads"`
+    TaxonReads    int     `json:"taxon_reads"`
+    Rank          string  `json:"rank"`
+    TaxonID       string  `json:"taxon_id"`
+    ScientificName string `json:"name"`
 }
 
 func dbpaths(path string) (string, string) {
@@ -320,13 +330,71 @@ func ReadAlignments[T any, U interface{ ~uint32 | ~int64 }](id Id, entries []U,
 			all = append(all, results)
 		}
 		reader.Delete()
+
+		// Read the taxonomy report
+        taxonomyReportPath := filepath.Join(base, "alis_" + db + "_report")
+        taxonomyReport, _ := ReadTaxonomyReport(taxonomyReportPath)
+
 		base := filepath.Base(name)
-		res = append(res, SearchResult{strings.TrimPrefix(base, "alis_"), all})
+		res = append(res, SearchResult{
+			strings.TrimPrefix(base, "alis_"), 
+			all,
+			taxonomyReport, // Include taxonomy report
+			})
 	}
 
 	return res, nil
 }
 
+func ReadTaxonomyReport(filePath string) ([]TaxonomyReport, error) {
+    file, err := os.Open(filePath)
+    if err != nil {
+        // Return an empty report for any error
+        return []TaxonomyReport{}, nil
+    }
+    defer file.Close()
+
+    var reports []TaxonomyReport
+    scanner := bufio.NewScanner(file)
+
+    for scanner.Scan() {
+        line := scanner.Text()
+        fields := strings.Split(line, "\t")
+        if len(fields) < 6 {
+			// Skip invalid lines
+            continue
+        }
+
+        // Parse the fields
+        proportion, err := strconv.ParseFloat(fields[0], 64)
+        if err != nil {
+            continue
+        }
+
+        cladeReads, err := strconv.Atoi(fields[1])
+        if err != nil {
+            continue
+        }
+
+        taxonReads, err := strconv.Atoi(fields[2])
+        if err != nil {
+            continue
+        }
+
+        report := TaxonomyReport{
+            Proportion:    proportion,
+            CladeReads:    cladeReads,
+            TaxonReads:    taxonReads,
+            Rank:          fields[3],
+            TaxonID:       fields[4],
+            ScientificName: strings.TrimSpace(fields[5]),
+        }
+        reports = append(reports, report)
+    }
+
+    return reports, nil
+}
+
 func Alignments(id Id, entry []int64, databases []string, jobsbase string) ([]SearchResult, error) {
 	return ReadAlignments[AlignmentEntry, int64](id, entry, databases, jobsbase)
 }
diff --git a/frontend/ResultView.vue b/frontend/ResultView.vue
index 348f7ac..faeac32 100644
--- a/frontend/ResultView.vue
+++ b/frontend/ResultView.vue
@@ -96,6 +96,7 @@
                         <h2 style="margin-top: 0.5em; margin-bottom: 1em; display: inline-block;">
                             <span style="text-transform: uppercase;">{{ entry.db }}</span> <small>{{ entry.alignments ? Object.values(entry.alignments).length : 0 }} hits</small>
                         </h2>
+                        
                         <v-btn-toggle mandatory v-model="tableMode" class="ml-auto">
                             <v-btn>
                                 Graphical
@@ -106,7 +107,9 @@
                             </v-btn>
                         </v-btn-toggle>
                     </v-flex>
-
+                    <v-flex v-if="hits.results && hits.results[0].taxonomyreport">
+                        <SankeyDiagram :rawData="hits.results[0].taxonomyreport"></SankeyDiagram>
+                    </v-flex>
                     <table class="v-table result-table" style="position:relativ; margin-bottom: 3em;">
                         <colgroup>
                             <template v-if="isComplex">
@@ -251,6 +254,7 @@
 import Panel from './Panel.vue';
 import AlignmentPanel from './AlignmentPanel.vue';
 import Ruler from './Ruler.vue';
+import SankeyDiagram from './SankeyDiagram.vue';
 
 import { debounce } from './lib/debounce';
 
@@ -265,7 +269,7 @@ function getAbsOffsetTop($el) {
 
 export default {
     name: 'ResultView',
-    components: { Panel, AlignmentPanel, Ruler },
+    components: { Panel, AlignmentPanel, Ruler, SankeyDiagram },
     data() {
         return {
             alignment: null,
@@ -424,7 +428,6 @@ src: url(assets/InconsolataClustal2.woff2),
     }
 }
 
-
 .theme--dark {
     .result-table {
         a:not([href])  {
diff --git a/frontend/SankeyDiagram.vue b/frontend/SankeyDiagram.vue
new file mode 100644
index 0000000..945a43b
--- /dev/null
+++ b/frontend/SankeyDiagram.vue
@@ -0,0 +1,583 @@
+<template>
+	 <div class="sankey-container">
+        <svg ref="sankeyContainer"></svg>    
+        </div>
+</template>
+
+<script>
+import * as d3 from "d3";
+import { sankey, sankeyLinkHorizontal, sankeyJustify } from "d3-sankey";
+import { rankOrderFull, sankeyRankColumns } from "./rankUtils";
+
+export default {
+	name: "SankeyDiagram",
+    props: {
+        rawData: {
+			type: Array,
+			required: true,
+		}
+    },
+    data: () => ({
+		// Data for graph rendering
+		nonCladesRawData: null, // rawData with just clades filtered out
+		allNodesByRank: {},
+		rankOrderFull, // Imported from rankUtils
+		rankOrder: [...sankeyRankColumns, "no rank"],
+		colors: [
+			"#57291F",
+			"#C0413B",
+			"#D77B5F",
+			"#FF9200",
+			"#FFCD73",
+			"#F7E5BF",
+			"#C87505",
+			"#F18E3F",
+			"#E59579",
+			"#C14C32",
+			"#80003A",
+			"#506432",
+			"#FFC500",
+			"#B30019",
+			"#EC410B",
+			"#E63400",
+			"#8CB5B5",
+			"#6C3400",
+			"#FFA400",
+			"#41222A",
+			"#FFB27B",
+			"#FFCD87",
+			"#BC7576",
+		],
+	}),
+	watch: {
+		rawData: {
+			immediate: true,
+			handler(newValue) {
+				this.$nextTick(() => {
+					if (newValue) {
+						this.createSankey(newValue);
+					}
+				});
+			},
+		},
+    },
+    methods: {
+		// Function for processing/parsing data
+		processRawData(data) {
+			if (!this.rawData || !Array.isArray(this.rawData)) {
+				console.warn("rawData is not an array or is undefined", this.rawData);
+				return;
+			}
+			this.allNodesByRank = {}; // Reset the nodes by rank
+
+			// Filter out clades from raw data
+			const nonClades = data.filter((entry) => this.rankOrderFull.includes(entry.rank) && entry.rank !== "clade");
+			this.nonCladesRawData = nonClades;
+
+			// Store nodes by rank from full data (for calculation of maxTaxaLimit)
+			nonClades.forEach((node) => {
+				if (!this.allNodesByRank[node.rank]) {
+					this.allNodesByRank[node.rank] = [];
+				}
+				this.allNodesByRank[node.rank].push(node);
+			});
+		},
+		// Function for processing/parsing data
+		parseData(data, isFullGraph = true) {
+			const nodes = [];
+			const unclassifiedNodes = [];
+			const allNodes = [];
+			const links = [];
+			const allLinks = [];
+
+			const rankHierarchyFull = this.rankOrderFull.reduce((acc, rank, index) => {
+				acc[rank] = index;
+				return acc;
+			}, {});
+			let currentLineage = [];
+			const nodesByRank = {}; // Store nodes by rank for filtering top 10
+
+			// Step 1: Create nodes and save lineage data for ALL NODES (excluding clade ranks)
+			data.forEach((d) => {
+				let node = {
+					id: d.taxon_id,
+					taxon_id: d.taxon_id,
+					name: d.name,
+					rank: d.rank,
+					trueRank: d.rank,
+					proportion: parseFloat(d.proportion),
+					clade_reads: parseFloat(d.clade_reads),
+					taxon_reads: d.taxon_reads,
+					lineage: [...currentLineage, { id: d.taxon_id, name: d.name, rank: d.rank }], // Copy current lineage
+					type: "",
+				};
+
+				if (d.rank !== "no rank" && !this.isUnclassifiedTaxa(d)) {
+					// Declare type as 'classified'
+					node.type = "classified";
+
+					// Add classified node to its corresponding rank collection
+					if (!nodesByRank[d.rank]) {
+						nodesByRank[d.rank] = [];
+					}
+					nodesByRank[d.rank].push(node);
+
+					// Include all ranks for lineage tracking
+					if (node.rank !== "clade") {
+						let lastLineageNode = currentLineage[currentLineage.length - 1];
+						if (lastLineageNode) {
+
+							let currentRank = rankHierarchyFull[node.rank] ?? Infinity;
+							let lastRank = rankHierarchyFull[lastLineageNode.rank] ?? Infinity;
+								while (lastLineageNode && currentRank <= lastRank) {
+								const poppedNode = currentLineage.pop();
+								lastLineageNode = currentLineage[currentLineage.length - 1];
+
+								currentRank = rankHierarchyFull[node.rank] ?? Infinity;
+								lastRank = rankHierarchyFull[lastLineageNode.rank] ?? Infinity;
+							}
+						}
+						// Append current node to currentLineage array + store lineage data
+						currentLineage.push(node);
+						node.lineage = [...currentLineage];
+					}
+				} else if (this.isUnclassifiedTaxa(d)) {
+					// lineage tracking for unclassified taxa
+					let currentLineageCopy = [...currentLineage];
+					const parentName = d.name.replace("unclassified ", "");
+					let lastLineageNode = currentLineageCopy[currentLineageCopy.length - 1];
+
+					if (lastLineageNode) {
+						while (lastLineageNode && lastLineageNode.name !== parentName) {
+							currentLineageCopy.pop();
+							lastLineageNode = currentLineageCopy[currentLineageCopy.length - 1];
+						}
+					}
+
+					// Find the previous node in the lineage that is in rankOrder
+					const parentNode = currentLineageCopy.find((n) => n.name === parentName);
+					if (parentNode && parentNode === lastLineageNode) {
+						const lineage = currentLineageCopy;
+
+						let previousNode = null;
+						for (let i = lineage.length - 1; i >= 0; i--) {
+							// Start from the last item
+							if (this.rankOrder.includes(lineage[i].rank)) {
+								previousNode = lineage[i];
+								break;
+							}
+						}
+
+						// Determine the rank immediately to the right of this node
+						const parentRankIndex = this.rankOrder.indexOf(previousNode.rank);
+
+						// Edit properties for unclassified taxa
+						const nextRank = this.rankOrder[parentRankIndex + 1];
+
+						node.id = `dummy-${d.taxon_id}`;
+						node.rank = nextRank;
+						node.type = "unclassified";
+
+						// Add unclassified node to currentLineage and save lineage data
+						currentLineageCopy.push(node);
+						node.lineage = [...currentLineageCopy];
+
+						unclassifiedNodes.push(node);
+					}
+				}
+			});
+
+			// Step 2: Filter top 10 nodes by clade_reads for each rank in rankOrder
+			// + Add filtered rank nodes & unclassified nodes to sankey diagram
+			this.rankOrder.forEach((rank) => {
+				if (nodesByRank[rank]) {
+					// Store all nodes
+					allNodes.push(...nodesByRank[rank]);
+
+					// Sort nodes by clade_reads in descending order and select the top nodes based on slider value
+					const topNodes = nodesByRank[rank].sort((a, b) => b.clade_reads - a.clade_reads).slice(0, isFullGraph ? nodesByRank[rank].length : 10); // Don't apply taxaLimit when parsing fullGraphData
+					nodes.push(...topNodes);
+				}
+			});
+
+			unclassifiedNodes.forEach((node) => {
+				// Store in all nodes
+				allNodes.push(node);
+
+				// Add unclassified nodes to sankey
+				nodes.push(node);
+			});
+
+			// Step 3: Create links based on filtered nodes' lineage
+			nodes.forEach((node) => {
+				// Find the previous node in the lineage that is in rankOrder
+				const lineage = node.lineage;
+				let previousNode = null;
+
+				for (let i = lineage.length - 2; i >= 0; i--) {
+					// Start from the second last item
+					if (this.rankOrder.includes(lineage[i].rank) && nodes.includes(lineage[i])) {
+						previousNode = lineage[i];
+						break;
+					}
+				}
+
+				if (previousNode) {
+					links.push({
+						source: previousNode.id,
+						target: node.id,
+						value: node.clade_reads,
+					});
+				}
+			});
+
+			// Store links for all nodes
+			allNodes.forEach((node) => {
+				// Find the previous node in the lineage that is in rankOrder
+				const lineage = node.lineage;
+				let previousNode = null;
+
+				for (let i = lineage.length - 2; i >= 0; i--) {
+					// Start from the second last item
+					if (this.rankOrder.includes(lineage[i].rank) && allNodes.includes(lineage[i])) {
+						previousNode = lineage[i];
+						break;
+					}
+				}
+
+				if (previousNode) {
+					allLinks.push({
+						source: previousNode.id,
+						target: node.id,
+						value: node.clade_reads,
+					});
+				}
+			});
+
+			return { nodes, links };
+		},
+        // Main function for rendering Sankey
+		createSankey(items) {
+			const { nodes, links } = this.parseData(items);
+			
+			// // Check if nodes and links are not empty
+			if (!nodes.length || !links.length) {
+				console.warn("No data to create Sankey diagram");
+				return;
+			}
+
+			const container = this.$refs.sankeyContainer;
+			d3.select(container).selectAll("*").remove(); // Clear the previous diagram
+
+			const nodeWidth = 30;
+			const nodePadding = 20;
+			const marginBottom = 50; // Margin for rank labels
+			const marginRight = 70;
+
+			const width = container.parentElement.clientWidth; // Dynamically get parent width
+			const height = 360 + marginBottom; // Fixed height for now
+			
+			const svg = d3.select(container)
+			.attr("viewBox", `0 0 ${width} ${height}`)
+			.attr("width", "100%")
+			.attr("height", height);
+
+			const sankeyGenerator = sankey()
+				.nodeId((d) => d.id)
+				.nodeAlign(sankeyJustify)
+				.nodeWidth(nodeWidth)
+				.nodePadding(nodePadding)
+				.iterations(100)
+				.extent([
+					[10, 10],
+					[width - marginRight, height - 6],
+				]);
+
+			const graph = sankeyGenerator({
+				nodes: nodes.map((d) => Object.assign({}, d)),
+				links: links.map((d) => Object.assign({}, d)),
+			});
+
+			const color = d3.scaleOrdinal().range(this.colors);
+			const unclassifiedLabelColor = "#696B7E";
+
+			// Manually adjust nodes position to align by rank
+			const columnWidth = (width - marginRight) / this.rankOrder.length;
+			const columnMap = this.rankOrder.reduce((acc, rank, index) => {
+				const leftMargin = 10;
+				acc[rank] = index * columnWidth + leftMargin;
+				return acc;
+			}, {});
+
+			graph.nodes.forEach((node) => {
+				node.x0 = columnMap[node.rank];
+				node.x1 = node.x0 + sankeyGenerator.nodeWidth();
+
+				if (node.type === "unclassified") {
+					node.color = unclassifiedLabelColor;
+				} else {
+					node.color = color(node.id); // Assign color to node
+				}
+			});
+
+			// Re-run the layout to ensure correct vertical positioning
+			sankeyGenerator.update(graph);
+
+			// Add rank column labels
+			const rankLabels = ["D", "K", "P", "C", "O", "F", "G", "S"];
+			svg
+				.append("g")
+				.selectAll("text")
+				// .data(rankLabels)
+				.data(this.rankOrder)
+				.enter()
+				.append("text")
+				.attr("x", (rank) => columnMap[rank] + sankeyGenerator.nodeWidth() / 2)
+				.attr("y", height + marginBottom / 2)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "middle")
+				.text((rank, index) => rankLabels[index]);
+
+			// Draw rank label divider link
+			svg
+				.append("line")
+				.attr("x1", 0)
+				.attr("y1", height + 10)
+				.attr("x2", width)
+				.attr("y2", height + 10)
+				.attr("stroke", "#000")
+				.attr("stroke-width", 1);
+
+			// Function to highlight lineage
+			const highlightLineage = (node) => {
+				const lineageIds = new Set(node.lineage.map((n) => n.id));
+				lineageIds.add(node.id);
+
+				svg.selectAll("rect").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.2));
+				svg.selectAll("path").style("opacity", (d) => (lineageIds.has(d.source.id) && lineageIds.has(d.target.id) ? 1 : 0.2));
+				svg.selectAll(".label").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+				svg.selectAll(".clade-reads").style("opacity", (d) => (lineageIds.has(d.id) ? 1 : 0.1));
+			};
+
+			// Function to reset highlight
+			const resetHighlight = () => {
+				svg.selectAll("rect").style("opacity", 1);
+				svg.selectAll("path").style("opacity", 1);
+				svg.selectAll(".label").style("opacity", 1);
+				svg.selectAll(".clade-reads").style("opacity", 1);
+			};
+
+			// // Define a clipping path for each link (crops out curve when links are too thick)
+			// svg
+			// 	.append("defs")
+			// 	.selectAll("clipPath")
+			// 	.data(graph.links)
+			// 	.enter()
+			// 	.append("clipPath")
+			// 	// .attr("id", (d, i) => `clip-path-${this.instanceId}-${i}`)
+			// 	.append("rect")
+			// 	.attr("x", (d) => d.source.x1)
+			// 	.attr("y", 0)
+			// 	.attr("width", (d) => d.target.x0 - d.source.x1)
+			// 	.attr("height", height);
+
+			// Add links
+			svg
+				.append("g")
+				.attr("fill", "none")
+				.attr("stroke-opacity", 0.3)
+				.selectAll("path")
+				.data(graph.links)
+				.enter()
+				.append("path")
+				.attr("d", sankeyLinkHorizontal())
+				.attr("stroke", (d) => (d.target.type === "unclassified" ? unclassifiedLabelColor : color(d.source.color))) // Set link color to source node color with reduced opacity
+				.attr("stroke-width", (d) => Math.max(1, d.width));
+			// .attr("clip-path", (d, i) => `url(#clip-path-${this.instanceId}-${i})`);
+
+			// Create node group (node + labels) and add mouse events
+			const nodeGroup = svg
+				.append("g")
+				.selectAll(".node-group")
+				.data(graph.nodes)
+				.enter()
+				.append("g")
+				.attr("class", (d) => "node-group taxid-" + d.id)
+				.attr("transform", (d) => `translate(${d.x0}, ${d.y0})`)
+				.on("mouseover", (event, d) => {
+    				// Highlight the lineage
+					highlightLineage(d);
+
+					// Append tooltip to the body
+					const tooltip = d3.select("body")
+						.append("div")
+						.attr("class", "tooltip")
+						.style("position", "absolute")
+						.style("background-color", "rgba(38, 50, 56, 0.95)")
+						.style("color", "white")
+						.style("border-radius", "8px")
+						.style("padding", "10px")
+						.style("box-shadow", "0 2px 6px rgba(0, 0, 0, 0.1)")
+						.style("opacity", 1)
+						.html(`
+							<div style="padding-top: 4px; padding-bottom: 4px; padding-left: 8px; padding-right: 8px;">
+								<p style="font-size: 0.6rem; margin-bottom: 0px;">#${d.id}</p>
+								<div style="display: flex; justify-content: space-between; align-items: center;">
+									<div style="font-weight: bold; font-size: 0.875rem;">${d.name}</div>
+									<span style="background-color: rgba(255, 167, 38, 0.25); color: #ffa726; font-weight: bold; padding: 4px 8px; border-radius: 12px; font-size: 0.875rem; margin-left: 10px;">${d.rank}</span>
+								</div>
+								<hr style="margin: 8px 0; border: none; border-top: 1px solid #fff; opacity: 0.2;">
+								<div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
+									<div style="font-weight: bold;">Clade Reads</div>
+									<div style="margin-left: 10px;">${d.value}</div>
+								</div>
+							</div>
+						`);
+
+					// Position the tooltip
+					tooltip
+					.style("left", `${event.pageX + 10}px`)
+					.style("top", `${event.pageY + 10}px`);
+				})
+				.on("mousemove", (event, d) => {
+					// Move the tooltip as the mouse moves
+					d3.select(".tooltip")
+						.style("left", `${event.pageX + 10}px`)
+						.style("top", `${event.pageY + 10}px`);
+				})
+				.on("mouseout", () => {
+					resetHighlight();
+					// Remove the tooltip when mouse leaves
+					d3.select(".tooltip").remove();
+				})
+			;
+
+			// Create node rectangles
+			nodeGroup
+				.append("rect")
+				.attr("width", (d) => d.x1 - d.x0)
+				.attr("height", (d) => Math.max(1, d.y1 - d.y0))
+				.attr("fill", (d) => (d.type === "unclassified" ? unclassifiedLabelColor : d.color))
+				.attr("class", (d) => "node taxid-" + d.id) // Apply the CSS class for cursor
+				.style("cursor", "pointer");
+
+			// Add node name labels next to node
+			nodeGroup
+				.append("text")
+				.attr("id", (d) => `nodeName-${d.id}`)
+				.attr("class", (d) => "label taxid-" + d.id)
+				.attr("x", (d) => d.x1 - d.x0 + 3)
+				.attr("y", (d) => (d.y1 - d.y0) / 2)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "start")
+				.text((d) => d.name)
+				.style("font-size", "9px")
+				.style("cursor", "pointer");
+
+			// Add label above node (proportion/clade reads)
+			nodeGroup
+				.append("text")
+				.attr("id", (d) => `cladeReads-${d.id}`)
+				.attr("class", "clade-reads")
+				.attr("x", (d) => (d.x1 - d.x0) / 2)
+				.attr("y", -4)
+				.attr("dy", "0.35em")
+				.attr("text-anchor", "middle")
+				.style("font-size", "9px")
+				.text((d) => this.formatCladeReads(d.value))
+				.style("cursor", "pointer");
+		},
+
+		formatCladeReads(value) {
+			if (value >= 1000) {
+				return `${(value / 1000).toFixed(2)}k`;
+			}
+			return value.toString();
+		},
+
+		isUnclassifiedTaxa(d) {
+			const name = d.name;
+
+			// Check if the name starts with "unclassified"
+			if (!name.includes("unclassified")) {
+				return false;
+			}
+
+			// Split the name into words
+			const words = name.trim().split(/\s+/);
+
+			// Check if there are at least two words
+			if (words.length < 2) {
+				return false;
+			}
+			return true;
+		},
+
+		// Throttle function (used for improving performance during node hover)
+		throttle(func, delay) {
+			let lastCall = 0;
+			return function (...args) {
+				const now = new Date().getTime();
+				if (now - lastCall < delay) {
+					return;
+				}
+				lastCall = now;
+				return func(...args);
+			};
+		},
+		onResize() {
+			if (this.rawData) {
+				this.drawSankey(this.rawData);
+			}
+		},
+		mounted() {
+			// Listener for screen resizing event
+			window.addEventListener("resize", this.onResize);
+		},
+		beforeUnmount() {
+			window.removeEventListener("resize", this.onResize);
+		},
+	},
+}
+
+</script>
+
+<style scoped>
+.sankey-container {
+	display: flex;
+	width: 100%;
+	height: auto; /* Ensure it takes full viewport height */
+}
+svg {
+  display: block; /* Prevent extra margins caused by inline SVG */
+  width: 100%;
+  height: auto;
+}
+.sankey-diagram {
+	width: 100%;
+	height: auto;
+	padding-bottom: 32px;
+	overflow-x: scroll;
+	/* Hide horizontal scrollbar for IE, Edge and Firefox */
+	-ms-overflow-style: none; /* IE and Edge */
+	scrollbar-width: none; /* Firefox */
+}
+/* Hide horizontal scrollbar for Chrome, Safari and Opera */
+.sankey-diagram::-webkit-scrollbar {
+	display: none;
+}
+
+svg.hide {
+	display: none;
+}
+/* Node Hover Tooltip */
+.tooltip {
+	position: absolute;
+	background-color: rgba(38, 50, 56, 0.95);
+	padding: 10px;
+	border-radius: 8px;
+	color: white;
+	pointer-events: none;
+	z-index: 1000;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/rankUtils.js b/frontend/rankUtils.js
new file mode 100644
index 0000000..92068dc
--- /dev/null
+++ b/frontend/rankUtils.js
@@ -0,0 +1,75 @@
+/** Full rank order used for sorting/ordering of hierarchy */
+export const rankOrderFull = [
+	"superkingdom",
+	"kingdom",
+	"subkingdom",
+	"superphylum",
+	"phylum",
+	"subphylum",
+	"superclass",
+	"class",
+	"subclass",
+	"superorder",
+	"order",
+	"suborder",
+	"infraorder",
+	"parvorder",
+	"superfamily",
+	"family",
+	"subfamily",
+	"supergenus",
+	"genus",
+	"subgenus",
+	"superspecies",
+	"species",
+	"subspecies",
+	"no rank",
+	"clade",
+];
+
+/** Ranks displays as levels/columns on sankey diagram
+ * Include 'no rank' for nodes displayed on sankey */
+export const sankeyRankColumns = ["superkingdom", "kingdom", "phylum", "class", "order", "family", "genus", "species"];
+
+const rankColors = [
+	// Superkingdom
+	"#57291F",
+	"#E63A06",
+	"#EE9595",
+	// Superphylum
+	"#FF6200",
+	"#FF9200",
+	"#F7B267",
+	// Superclass
+	"#E8B600",
+	"#FFD000",
+	"#E6DB6A",
+	// Superorder
+	"#044036",
+	"#0A7A26",
+	"#46A74B",
+	"#86B614",
+	"#ABE188",
+	// Superfamily
+	"#0065A2",
+	"#00A5E3",
+	"#77D0D0",
+	// Supergenus
+	"#520073",
+	"#9C47B0",
+	"#C792C7",
+	// Superspecies
+	"#FD4BB9",
+	"#F389F3",
+	"#FAB3E3",
+	// No rank
+	"#8A9BA7",
+	// Clade
+	"#696B73",
+];
+
+/** Function to retrieve color corresponding to rank */
+export function getRankColor(rank) {
+	const rankIndex = rankOrderFull.indexOf(rank);
+	return rankColors[rankIndex % rankColors.length];
+}
diff --git a/package-lock.json b/package-lock.json
index 31b903b..97aa259 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,17 @@
 {
   "name": "mmseqs-app",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "mmseqs-app",
-      "version": "1.7.0",
+      "version": "1.8.0",
       "license": "GPL-3.0-or-later",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3"
+      },
       "devDependencies": {
         "@babel/core": "^7.22.11",
         "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
@@ -5056,6 +5060,456 @@
         "node": ">=4"
       }
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -5399,6 +5853,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -7866,7 +8329,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -8218,6 +8680,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -10953,6 +11424,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10976,6 +11453,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -10985,8 +11468,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sanitize-filename": {
       "version": "1.6.3",
@@ -17428,6 +17910,313 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
+    "d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "requires": {
+        "d3-array": "^3.2.0"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+        }
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "requires": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.12.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+          "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+          "requires": {
+            "internmap": "^1.0.0"
+          }
+        },
+        "d3-path": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+          "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "d3-shape": {
+          "version": "1.3.7",
+          "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+          "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+          "requires": {
+            "d3-path": "1"
+          }
+        },
+        "internmap": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+          "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+        }
+      }
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "requires": {
+        "d3-path": "^3.1.0"
+      }
+    },
+    "d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -17697,6 +18486,14 @@
         "slash": "^3.0.0"
       }
     },
+    "delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "requires": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -19593,7 +20390,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -19827,6 +20623,11 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "interpret": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
@@ -21911,6 +22712,11 @@
         "sprintf-js": "^1.1.2"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -21920,6 +22726,11 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -21929,8 +22740,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sanitize-filename": {
       "version": "1.6.3",
diff --git a/package.json b/package.json
index efee910..d72bc38 100644
--- a/package.json
+++ b/package.json
@@ -146,5 +146,9 @@
     "webpack-dev-server": "^4.15.1",
     "webpack-hot-middleware": "^2.25.4",
     "webpack-subresource-integrity": "^5.1.0"
+  },
+  "dependencies": {
+    "d3": "^7.9.0",
+    "d3-sankey": "^0.12.3"
   }
 }