Unlock the Power of Data Visualization with Visx

What Sets Visx Apart

Visx, a collection of React-based data visualization tools, offers a unique solution that mitigates the bugs that can arise when two libraries compete for control of the DOM. Unlike other visualization libraries, Visx is not opinionated, making it easily adaptable to any React app, regardless of architecture.

Its pure React design ensures that it’s easy to learn and integrate into existing projects. With Visx, you can cherry-pick the components you need, keeping your codebase lean and performant.

A Rare Combination of Performance, Learnability, and Expressivity

The engineering team behind Visx designed it with three primary goals in mind: performance, learnability, and expressivity. This trifecta is rarely found in other React-based frontend visualization libraries.

While D3 is a veteran in building expressive visualizations in React, it has a steep learning curve. Visx, on the other hand, offers a more accessible and efficient solution.

Getting Started with Visx

To get started with Visx, you’ll need to familiarize yourself with its components and properties. These components are standard React components, making it easy to integrate Visx into your existing workflow.

Let’s build a vertically stacked bar chart that showcases the daily average temperatures for three European cities: Paris, London, and Berlin.

Installation and Setup

To install Visx, start by creating a new React app using:

npx create-react-app visx-chart

Next, install the required Visx packages, including:

• @visx/shape
• @visx/group
• @visx/grid
• @visx/axis
• @visx/scale
• @visx/tooltip
• @visx/legend

These packages provide the building blocks for creating custom visualizations.

The Chart Component

The chart component brings together all the necessary logic and components to produce a stunning vertically stacked bar chart. Create a new file named TemperatureBarStack.js and paste the following code:

import { Group } from '@visx/group';
import { GridRows } from '@visx/grid';
import { AxisBottom } from '@visx/axis';
import { ScaleBand } from '@visx/scale';
import { TooltipWithBounds } from '@visx/tooltip';

const data = [
  {
    city: 'Paris',
    temperature: [12, 15, 18, 20, 22],
  },
  {
    city: 'London',
    temperature: [10, 12, 15, 18, 20],
  },
  {
    city: 'Berlin',
    temperature: [8, 10, 12, 15, 18],
  },
];

const width = 500;
const height = 300;

const TemperatureBarStack = () => {
  return (
    <svg width={width} height={height}>
      <GridRows
        scale={{ x: 'band', y: 'linear' }}
        width={width}
        height={height}
        numTicks={5}
      />
      <AxisBottom
        scale={{ x: 'band', y: 'linear' }}
        tickFormat={(tick) => `${tick}°C`}
      />
      <TooltipWithBounds
        showDelayMs={500}
        hideDelayMs={500}
        renderTooltip={({ tooltipData, color }) => (
          <div>
            <strong>{tooltipData.city}</strong>
            <br />
            <em>Temperature: {tooltipData.temperature}°C</em>
          </div>
        )}
      />
      <Group>
        {data.map((city, index) => (
          <rect
            key={index}
            x={index * 50}
            y={0}
            width={40}
            height={city.temperature[0]}
            fill={color[index % 3]}
          />
        ))}
      </Group>
    </svg>
  );
};

Responsiveness and Styling

Visx provides utilities to make visualizations responsive. The ParentSize component passes the width and height of the parent component down to the wrapped component, ensuring that your visualization adapts to different screen sizes.

Replace the CSS code in the index.css file with the following code to style your chart:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.svg {
  width: 100%;
  height: 300px;
}