
import { CodeSandbox } from 'mdx-embed';

## Table of Contents

One of my favorite charts in data visualization is [Pictorial Fraction](https://datavizproject.com/data-type/pictorial-fraction-chart/). It's essentially a bar chart as a shape that can be partially filled or used as a [small multiple](https://datavizproject.com/data-type/fraction-of-pictograms/) to represent the ratio.

## What We're Building

<CodeSandbox codeSandboxId="svelte-svg-pictorial-fraction-f1hv2" />

## Why Svelte.js?

I've been excited to check out [svelte.js](https://svelte.dev/) for a while and this winter break gave me some time to try it out. It seemed especially great as a way to run data vis in a light-weight way. This was a way to learn a little more about it and see I can make multiple components.

## The Pieces

The pictorial fraction is a combination of svg pieces that come together to show and mask elements.

## Fill Area

Let's create a new file and call it `PictorialFraction.svelte`. In here, we'll set up our svg and add a rectangle with a color of your choosing. This will be the color that will show up in the droplet.

```html filename=PictorialFraction.svelte
<svg xmlns="http://www.w3.org/2000/svg" width="264.5" height="264.5">
  <rect width="264.5" height="264.5" fill="#ff9900" />
</svg>
```

Now we can add some variables for width and height. In svelte, we export these in the script tag. We can also pass those variables into the elements.

```html 1-4,6-7
<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">
  <rect width="{width}" height="{height}" fill="#ff9900" />
</svg>
```

💡 Svelte tip: we can use a shortcut to add those variables since they have the same name as the attributes. Instead of `<svg width={width} />` we can use `<svg width />`.

Let's position the rectangle using `transform: translate(0, 20px);`. This should allow us to `slide` the rectangle up using the y position, giving our mask the feeling that the water drop is filling up. We're using the style attribute for transform rather than the `transform` attribute on `rect` because Safari doesn't animate the attribute in the same way Chrome and Firefox do, making it choppy.

```html line=7
<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">
  <rect
    width="{width}"
    height="{height}"
    style="{`transform:"
    translate(0,
    20px);`}
    fill="#ff9900"
  />
</svg>
```

Now we'll create the ripple shape that will be placed on top of our rectangle to give a "fluid" feel. For this, we'll use a `path` element and animate it with css.

```html
<path
  class="water"
  d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"
/>
```

That creates the shape, and now we'll position it to be on top of the rectangle. To do this we'll need to know where the rectangle will be positioned, and we'll wrap the `path` in group that's positioned based on `rect`'s y position.

```html line=9-11
<script>
  export let width;
  export let height;
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">
  <rect
    width="{width}"
    height="{height}"
    style="{`transform:"
    translate(0,
    20px);`}
    fill="#ff9900"
  />

  <g class="water-container" style="{`transform:" translate(0, 0);`}>
    <path
      class="water"
      d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"
    />
  </g>
</svg>
```

Let's add our styles to get the ripples animating in smooth way. To do this we can add a `<style>` tag underneath our `<script>` tag.

```html line=6-22
<script>
  export let width;
  export let height;
</script>

<style>
  rect,
  .water-container {
    transition: transform 500ms;
  }

  .water {
    animation: ripple 1.4s infinite linear;
    fill: #ff9900;
  }

  @keyframes ripple {
    100% {
      transform: translate3d(-105%, 0, 0);
    }
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">
  <rect
    width="{width}"
    height="{height}"
    style="{`transform:"
    translate(0,
    20px);`}
    fill="#ff9900"
  />

  <g class="water-container" style="{`transform:" translate(0, 0);`}>
    <path
      class="water"
      d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"
    />
  </g>
</svg>
```

We declare a `keyframes` animation and let `.water` leverage that in an infinite loop. We're adding a transition to the rectangle and container for the ripple to make sure it slides up and down smoothly.

## Mask Area

Now we can work on the mask area which will give us the water drop shape. We're going to use a `clipPath` with a path shaped as a water droplet. We'll apply the clipPath to a group that wraps the rectangle and ripple to mask out anything outside the water droplet shape.

We fill the droplet path with black to make the mask full opacity. We can then add another droplet of a different color so that we can have a different background color for our `empty` section.

```html line=2-4,6,8,14
<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">
  <clipPath id="mask_shape">
    <path
      d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z"
      fill="#000000"
    />
  </clipPath>

  <path
    d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z"
    fill="#555"
  />

  <g clip-path="url(#mask_shape)">
    <rect
      width="{width}"
      height="{height}"
      style="{`transform:"
      translate(0,
      20px);`}
      fill="#ff9900"
    />

    <g class="water-container" style="{`transform:" translate(0, 0);`}>
      <path
        class="water"
        d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"
      />
    </g>
  </g>
</svg>
```

## Fill

Cool, now that we have the mask and bar set up we can configure the logic for the filling of the droplet. For this we'll create a variable of `ratio` and a [reactive declaration](https://svelte.dev/tutorial/reactive-declarations) that updates when props change. We'll call our reactive declaration `offsetY` and it will be based on `ratio` and `height`.

```html line=4,6-7
<script>
  export let width;
  export let height;
  export let ratio;

  // offset should help the bar "fill" from the bottom
  $: offsetY = height - height * ratio;
</script>
```

Now we'll pass that offset to the rectangle and ripple container, so they'll be positioned together. If the ratio is zero, the y should be the negative height of the ripple path which is 19px.

```html line=9,11
<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewbox='0 0 264 264' >
  <clipPath id='mask_shape' >
    <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#000000" />
  </clipPath>

  <path d="M132.281 264.564c51.24 0 92.931-41.681 92.931-92.918 0-50.18-87.094-164.069-90.803-168.891L132.281 0l-2.128 2.773c-3.704 4.813-90.802 118.71-90.802 168.882.001 51.228 41.691 92.909 92.93 92.909z" fill="#555"/>

  <g clip-path='url(#mask_shape)'>
    <rect width={width} height={height} style={`transform: translate(0, ${offsetY}px)`} fill="#ff9900" />

    <g class='water-container' style={`transform: translate(0, ${ratio === 0 ? offsetY : offsetY - 19}px);`}>
      <path class='water' d="M420 20.0047C441.5 19.6047 458.8 17.5047 471.1 15.5047C484.5 13.3047 497.6 10.3047 498.4 10.1047C514 6.50474 518 4.70474 528.5 2.70474C535.6 1.40474 546.4 -0.0952561 560 0.00474393V20.0047H420ZM420 20.0047C398.5 19.6047 381.2 17.5047 368.9 15.5047C355.5 13.3047 342.4 10.3047 341.6 10.1047C326 6.50474 322 4.70474 311.5 2.70474C304.3 1.40474 293.6 -0.0952561 280 0.00474393V20.0047H420ZM140 20.0047C118.5 19.6047 101.2 17.5047 88.9 15.5047C75.5 13.3047 62.4 10.3047 61.6 10.1047C46 6.50474 42 4.70474 31.5 2.70474C24.3 1.40474 13.6 -0.0952561 0 0.00474393V20.0047H140ZM140 20.0047C161.5 19.6047 178.8 17.5047 191.1 15.5047C204.5 13.3047 217.6 10.3047 218.4 10.1047C234 6.50474 238 4.70474 248.5 2.70474C255.6 1.40474 266.4 -0.0952561 280 0.00474393V20.0047H140Z"/>
    </g>
  </g>
</svg>
```

## Using the component

To use this component we import it and pass it our width, height and ratio. Let's give it a height and width of 264.5px and a ratio of 0.5 (50%). Update the ratio to see the droplet fill or drain smoothly.

```html filename=App.svelte
<script>
  import PictorialFraction from './PictorialFraction.svelte';
</script>

<main>
  <PictorialFraction width="{264.5}" height="{264.5}" ratio="{0.5}" />
</main>
```

## Conclusion

Thanks for following along! We now have a droplet component that we can use in our svelte app. We can add ways to control the ratio and make it more interactive. To add buttons to control the increase/decrease, check out the example on [codesandbox](https://codesandbox.io/s/svelte-svg-pictorial-fraction-f1hv2?from-embed=&file=/App.svelte)


Animated SVG Water Pictorial Fraction in Svelte


import { CodeSandbox } from 'mdx-embed';

<Note>

_Update: October 2020_ - @vx is now [@visx](https://github.com/airbnb/visx) and is at 1.0. You can read about [the update from Airbnb Engineering](https://medium.com/airbnb-engineering/introducing-visx-from-airbnb-fd6155ac4658). As of this update, the api is all the same, and it has TypeScript support 👍.

</Note>

## Table of Contents

We've built a [bar chart](/blog/data-vis-react-bar-chart-vx/) in react using the data vis library [@vx](https://github.com/hshoff/vx). The next chart that we can build to help tell our data’s story is a line chart. Line charts are great for showing trends over time and that’s what we’ll build today.

## What We're Building TL;DR

<CodeSandbox codeSandboxId="single-line-chart-with-vx-322xd" />

## Requirements

- [ ] Display time along the x-axis
- [ ] Display metrics along the y-axis
- [ ] Show each data point on line

## Packages

Let's start by getting the packages we need from @vx. We'll need shapes, scale, axis, gradient (easy background color), and some mock data to get started.

```bash
  yarn add @vx/shapes @vx/group @vx/scale @vx/axis @vx/curve @vx/gradient @vx/text
```

Or

```bash
  npm install @vx/shapes @vx/group @vx/scale @vx/axis @vx/curve @vx/gradient @vx/text --save
```

## Data

Now that we have our packages we can start stubbing out our data. We're going to use some mock data to get started so feel free to create your own or use this data set.

```js
const defaultData1 = [
  {
    miles: 5.6,
    date: 1595228400000,
  },
  {
    miles: 3.2,
    date: 1595314800000,
  },
  {
    miles: 7.9,
    date: 1595401200000,
  },
  {
    miles: 4.1,
    date: 1595487600000,
  },
  {
    miles: 9.3,
    date: 1595574000000,
  },
];
```

Now that we have the shape of our data we can add some helper functions that will access those items. This will help us add the date across the x-axis and the miles along the y-axis. We'll see how these come into play a little later.

```js
// accessors return the miles and date of that data item
const x = (d) => d.miles;
const y = (d) => d.date;
```

## Scales

We can now define the max height and max width that we would like our chart to be. Our component will take height and width as props and then we can add a little padding. This will help us as we define our scales for this chart.

```js
// bounds
const xMax = width - 120;
const yMax = height - 80;
```

The scales are where the magic really happen. It all comes down to `domain` and `range`. The general rule of thumb based on my understanding is that `domain` is the lowest and highest data points. The `range` is the pixel range we would like to plot these data points on.

In our scales below we can see that `range` (`rangeRound`) is from `0` to `xMax` which is the height bound of our chart. @vx gives us a helper, `rangeRound`, that prettifies the numbers.

The `domain` is an array of all data points which resolves to lowest (4.1) and highest (9.3) of the data set.

```js
const xScale = scaleTime({
  rangeRound: [0, xMax],
  domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
});

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0],
});
```

## Building our Line Chart

Now we can start building the component. Let's start by setting up the `svg` that will hold our line and axes.

```jsx
import React from 'react';
import { Group } from '@vx/group';
import { scaleTime, scaleLinear } from '@vx/scale';

// dimensions
const height = 500;
const width = 800;

// accessors
const x = (d) => new Date(d.date).valueOf();
const y = (d) => d.miles;

const LineChart = ({ data = [] }) => {
  // bounds
  const xMax = width - 120;
  const yMax = height - 80;

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  });

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  });

  return (
    <svg width={width} height={height}>
      <Group top={25} left={65}></Group>
    </svg>
  );
};

export default LineChart;
```

Looks good. The first thing we'll add is the y-axis. To do this we use [`AxisLeft`](https://vx-demo.now.sh/docs/axis#AxisLeft) from @vx. We need to pass it our yScale and we'll give it a few other props for styling. The `numTicks` limits the number of values shown on the y-axis and `label` is what will display along the axis.

Then we'll add the [`AxisBottom`](https://vx-demo.now.sh/docs/axis#AxisBottom) that has similar props to `AxisLeft`. The `top` is where it should start vertically from the top, which is the chart height in this case. The `labelOffset` prop dictates how much space is in between the ticks and the axis label. It should look like this:

```jsx line=4,9-10
import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"

...

<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
</Group>
```

- [x] Display time along the x-axis
- [x] Display metrics along the y-axis

Now we can add the line to the chart using `LinePath` from `@vx/shapes` and we'll pass it `curveLinear` from `@vx/curve` to dictate its shape.

```jsx line=5-6,13-20
import React from "react"
import { Group } from "@vx/group"
import { scaleTime, scaleLinear } from "@vx/scale"
import { AxisLeft, AxisBottom } from "@vx/axis"
import { LinePath } from "@vx/shape"
import { curveLinear } from "@vx/curve"

...

<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
  <LinePath
    data={data}
    curve={curveLinear}
    x={(d) => xScale(x(d))}
    y={(d) => yScale(y(d))}
    stroke="#222222"
    strokeWidth={1.5}
  />
</Group>
```

It's looking like a nice, one-line chart now. We might want to add some dots to represent the data points. To do that we'll map over the data items and use the `circle` element positioned using each item's points.

```jsx line=4-14
<Group top={25} left={65}>
  <AxisLeft scale={yScale} numTicks={4} label="Miles" />
  <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
  {data.map((point, pointIndex) => (
    <circle
      key={pointIndex}
      r={5}
      cx={xScale(x(point))}
      cy={yScale(y(point))}
      stroke="#222222"
      fill="#222222"
      fillOpacity={0.5}
    />
  ))}
  <LinePath
    data={data}
    curve={curveLinear}
    x={(d) => xScale(x(d))}
    y={(d) => yScale(y(d))}
    stroke="#222222"
    strokeWidth={1.5}
  />
</Group>
```

- [x] Show each data point on line

Awesome, we fulfilled all of our requirements for this one-line chart. Here is all the code together.

```jsx
import React from 'react';
import { Group } from '@vx/group';
import { scaleTime, scaleLinear } from '@vx/scale';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { LinePath } from '@vx/shape';
import { curveLinear } from '@vx/curve';

// dimensions
const height = 500;
const width = 800;

// accessors
const x = (d) => new Date(d.date).valueOf();
const y = (d) => d.miles;

const LineChart = ({ data = [] }) => {
  // bounds
  const xMax = width - 120;
  const yMax = height - 80;

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  });

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  });

  return (
    <svg width={width} height={height}>
      <Group top={25} left={65}>
        <AxisLeft scale={yScale} numTicks={4} label="Miles" />
        <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
        {data.map((point, pointIndex) => (
          <circle
            key={pointIndex}
            r={5}
            cx={xScale(x(point))}
            cy={yScale(y(point))}
            stroke="#222222"
            fill="#222222"
            fillOpacity={0.5}
          />
        ))}
        <LinePath
          data={data}
          curve={curveLinear}
          x={(d) => xScale(x(d))}
          y={(d) => yScale(y(d))}
          stroke="#222222"
          strokeWidth={1.5}
        />
      </Group>
    </svg>
  );
};

export default LineChart;
```

## Bonus

For better sizing/resizing we can use a resize observer hook in our component. I like to use the package `use-resize-observer` for this. Let's see how we can use it in our component.

```jsx line=7,18,35,61
import React from 'react';
import { Group } from '@vx/group';
import { scaleTime, scaleLinear } from '@vx/scale';
import { AxisLeft, AxisBottom } from '@vx/axis';
import { LinePath } from '@vx/shape';
import { curveLinear } from '@vx/curve';
import useResizeObserver from 'use-resize-observer';

// dimensions
const height = 500;
const width = 800;

// accessors
const x = (d) => new Date(d.date).valueOf();
const y = (d) => d.miles;

const LineChart = ({ data = [] }) => {
  const { ref, width = 1, height = 1 } = useResizeObserver();

  // bounds
  const xMax = width - 120;
  const yMax = height - 80;

  const xScale = scaleTime({
    rangeRound: [0, xMax],
    domain: [Math.min(...data.map(x)), Math.max(...data.map(x))],
  });

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  });

  return (
    <div style={{ width: '100%', height: '100%' }} ref={ref}>
      <svg width={width} height={height}>
        <Group top={25} left={65}>
          <AxisLeft scale={yScale} numTicks={4} label="Miles" />
          <AxisBottom scale={xScale} label="Day" labelOffset={15} numTicks={5} top={yMax} />
          {data.map((point, pointIndex) => (
            <circle
              key={pointIndex}
              r={5}
              cx={xScale(x(point))}
              cy={yScale(y(point))}
              stroke="#222222"
              fill="#222222"
              fillOpacity={0.5}
            />
          ))}
          <LinePath
            data={data}
            curve={curveLinear}
            x={(d) => xScale(x(d))}
            y={(d) => yScale(y(d))}
            stroke="#222222"
            strokeWidth={1.5}
          />
        </Group>
      </svg>
    </div>
  );
};

export default LineChart;
```


Create a Single Line Chart in React with @vx


import { CodeSandbox } from 'mdx-embed';

<Note>

_Update: October 2020_ - @vx is now [@visx](https://github.com/airbnb/visx) and is at 1.0. You can read about [the update from Airbnb Engineering](https://medium.com/airbnb-engineering/introducing-visx-from-airbnb-fd6155ac4658). As of this update, the api is all the same, and it has TypeScript support 👍.

</Note>

## Table of Contents

## What We're Building TL;DR

<CodeSandbox codeSandboxId="react-bar-chart-with-vx-yi48e" />

Data visualization is steadily becoming more valuable to companies as they try to understand all the data they have coming in. There are a lot of different solutions for data visualization in javaScript, [d3](https://d3js.org/) being one of the most popular.

When working in React it can be frustrating to handle d3 since they tend to compete for the DOM. There is a solution that we've been using for a little while at Sprinklr to help with this.

That solution is the library [@vx](https://vx-demo.now.sh/). It's a set of base components in React that wrap d3, made to build a charting library from. There are some great helpers rolled up in the components that make working with `svg`'s much better. It hasn't been released as stable quite yet but it works for our purposes.

Today we're going to focus on building a bar chart component. Here are the requirements for this component.

- [ ] Can take an array of single dimension data
- [ ] Render each item on a shared scale
- [ ] Should have a x and y axis

## Packages

Let's start by getting the packages we need from @vx. Well need shapes, scale, axis, gradient (easy background color), and some mock data to get started.

```bash
  yarn add @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient
```

Or

```bash
  npm install @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient --save
```

## Data

Now that we have our packages we can start stubbing out our data. We're going to use some mock data to get started so feel free to create your own or use this data set.

```js
const defaultData1 = [
  {
    label: 'Happy',
    value: 4000,
  },
  {
    label: 'Sad',
    value: 2000,
  },
  {
    label: 'Angry',
    value: 3000,
  },
  {
    label: 'Joyful',
    value: 4500,
  },
  {
    label: 'Anxious',
    value: 7000,
  },
];
```

Now that we have the shape of our data we can add some helper functions that will access those items. This will help us add the labels across the x-axis, and the values along the y-axis. We'll see how these come into play a little later.

```js
// accessors return the label and value of that data item
const x = (d) => d.label;
const y = (d) => d.value;
```

## Scales

We can now define the max height and max width that we would like our chart to be. Our component will take height and width as props, and then we can add a little padding. This will help us as we define our scales for this chart.

```js
// bounds
const xMax = width - 80;
const yMax = height - 80;
```

The scales are where the magic really happen. It took me a while to understand what the `domain` and `range` in d3 were all about. The general rule of thumb based on my understanding is that `domain` is the lowest and highest data points. The `range` is the pixel range we would like to plot these data points on.

In our scales below we can see that `range` (`rangeRound`) is from `0` to `xMax` which is the height bound of our chart. @vx gives us a helper, `rangeRound`, that prettifies the numbers.

The `domain` is an array of all data points which resolves to lowest (2000) and highest (7000) of the data set.

The padding is another helper from @vx that adds banding or space between and the width of the bars for us.

```js
// scales
const xScale = scaleBand({
  rangeRound: [0, xMax],
  domain: data.map(x),
  padding: 0.4,
});

const yScale = scaleLinear({
  rangeRound: [0, yMax],
  domain: [Math.max(...data.map(y)), 0],
});
```

## Bar Chart

Cool, let's build the component! We'll start by setting up the `svg` and `Group` to hold our chart. The `Group` helps us place the axes and the bars.

```jsx
import React from 'react';
import { Group } from '@vx/group';
import { LinearGradient } from '@vx/gradient';
import { scaleBand, scaleLinear } from '@vx/scale';
import { AxisLeft, AxisBottom } from '@vx/axis';

// accessors return the label and value of that data item
const x = (d) => d.label;
const y = (d) => d.value;

function BarChart({ data, width, height }) {
  // bounds
  const xMax = width - 80;
  const yMax = height - 80;

  // scales
  const xScale = scaleBand({
    rangeRound: [0, xMax],
    domain: data.map(x),
    padding: 0.4,
  });

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  });

  return (
    <svg width={width} height={height}>
      <Group top={25} left={55}></Group>
    </svg>
  );
}

export default BarChart;
```

- [x] Can take an array of single dimension data

Looks good. The first thing we'll add is the y-axis. To do this we use [`AxisLeft`](https://vx-demo.now.sh/docs/axis#AxisLeft) from @vx. We need to pass it our yScale, and we'll give it a few other props for styling. The prop `left` pushes the axis over enough to show the `label` and the `numTicks` limits the number of values shown on the y-axis.

Then we'll add the [`AxisBottom`](https://vx-demo.now.sh/docs/axis#AxisBottom) that has similar props to `AxisLeft`. It should look like this:

```jsx line=2-3
<Group top={25} left={55}>
  <AxisLeft left={10} scale={yScale} numTicks={4} label="Times Expressed" />
  <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
</Group>
```

- [x] Should have a x and y axis

Now we can loop over the data and return the bar. The width, height, and x are all using the scale to determine where they would be plotted in the graph.

```jsx
{
  data.map((d, i) => {
    const label = x(d);
    const barWidth = xScale.bandwidth();
    const barHeight = yMax - yScale(y(d));
    const barX = xScale(label);
    const barY = yMax - barHeight;

    return <Bar key={`bar-${label}`} x={barX} y={barY} width={barWidth} height={barHeight} />;
  });
}
```

- [x] Render each item on a shared scale

## Finish

Nice! It should be good to go. We're going to add in the `LinearGradient` for a background color as well. Here it is all together:

```jsx
import React from 'react';
import { Group } from '@vx/group';
import { LinearGradient } from '@vx/gradient';
import { scaleBand, scaleLinear } from '@vx/scale';
import { AxisLeft, AxisBottom } from '@vx/axis';

// accessors return the label and value of that data item
const x = (d) => d.label;
const y = (d) => d.value;

function BarChart({ data, width, height }) {
  // bounds
  const xMax = width - 80;
  const yMax = height - 80;

  // scales
  const xScale = scaleBand({
    rangeRound: [0, xMax],
    domain: data.map(x),
    padding: 0.4,
  });

  const yScale = scaleLinear({
    rangeRound: [0, yMax],
    domain: [Math.max(...data.map(y)), 0],
  });

  return (
    <svg width={width} height={height}>
      <LinearGradient from={`#e9e9e9`} to={`#fff`} id={`gradientFill`} />
      <rect width={width} height={height} fill={`url(#gradientFill)`} rx={5} />
      <Group top={25} left={55}>
        <AxisLeft left={10} scale={yScale} numTicks={4} label="Times" />
        {data.map((d, i) => {
          const label = x(d);
          const barWidth = xScale.bandwidth();
          const barHeight = yMax - yScale(y(d));
          const barX = xScale(label);
          const barY = yMax - barHeight;

          return <Bar key={`bar-${label}`} x={barX} y={barY} width={barWidth} height={barHeight} />;
        })}
        <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
      </Group>
    </svg>
  );
}

export default BarChart;
```

## Bonus

Add a little smoothness to your bars with a css transition like:

```css
.vx-bar {
  transition: height 150ms, y 150ms;
}
```

This way, when the data changes it will move to the next height smoothly.


Tag: data-visualization

Animated SVG Water Pictorial Fraction in Svelte

Create a Single Line Chart in React with @vx

Bar Chart in React with @vx