Integrating a Dendrogram into a React Application Using Visx
Written on
Chapter 1 Overview of Visx Library
Visx is an efficient library designed to simplify the addition of graphics to React applications. In this guide, we will explore how to integrate a dendrogram into our React project.
Section 1.1 Installing Necessary Packages
To begin, we need to install several required modules. Open your terminal and execute the following command:
npm i @visx/gradient @visx/group @visx/hierarchy @visx/responsive @visx/shape
Next, we will move on to creating the dendrogram.
Section 1.2 Crafting the Dendrogram
To construct the dendrogram, we can utilize the following code snippet:
import React, { useMemo } from "react";
import { Group } from "@visx/group";
import { Cluster, hierarchy } from "@visx/hierarchy";
import { LinkVertical } from "@visx/shape";
import { LinearGradient } from "@visx/gradient";
const colors = {
citrus: "#ddf163",
white: "#ffffff",
green: "#79d259",
aqua: "#37ac8c",
background: "#306c90"
};
const clusterData = {
name: "$",
children: [
{
name: "A",
children: [
{ name: "A1" },
{ name: "A2" },
{
name: "C",
children: [
{ name: "C1" }]
}
]
},
{
name: "B",
children: [{ name: "B1" }, { name: "B2" }]
},
{
name: "X",
children: [
{ name: "Z" }]
}
]
};
function Node({ node }) {
const isRoot = node.depth === 0;
const isParent = !!node.children;
if (isRoot) return null;
return (
<Group>
{node.depth !== 0 && (
<text onClick={() => alert(clicked: ${JSON.stringify(node.data.name)})}>
{node.data.name}</text>
)}
</Group>
);
}
function RootNode({ node }) {
const width = 40;
const height = 20;
const centerX = -width / 2;
const centerY = -height / 2;
return (
<Group>
<rect x={centerX} y={centerY} width={width} height={height} />
<text>{node.data.name}</text>
</Group>
);
}
const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
function Example({ width, height, margin = defaultMargin }) {
const data = useMemo(() => hierarchy(clusterData), []);
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
return width < 10 ? null : (
<svg width={width} height={height}>
<Group top={margin.top} left={margin.left}>
{(cluster) => (
<>
{cluster.links().map((link, i) => (
<LinkVertical key={i} data={link} />))}
{cluster.descendants().map((node, i) => (
<Node key={i} node={node} />))}
</>
)}
</Group>
</svg>
);
}
export default function App() {
return (
<Example width={800} height={400} />);
}
In this code, we define the structure for our dendrogram with the clusterData variable. The Node component handles the rendering of each node in the dendrogram, while the RootNode component specifically manages the root node, which is styled differently with an encompassing rectangle.
The Example component integrates the entire tree diagram, utilizing the Cluster component's render prop to display the tree nodes. Connections between parent and child nodes are established using the LinkVertical component, with child nodes accessed via cluster.descendants().
Conclusion
By following these steps, you can successfully incorporate a dendrogram into your React application using the Visx library.
Chapter 2 Video Tutorial on Dendrogram Integration
For a more visual guide, check out this tutorial on data visualization with D3, React, visx, and Typescript: