An Introduction to Data Visualization with VX and D3
Tags: react, visualization, javascript, beginners
Published: 2020-09-20 20:10:15

# Introduction
It's important to be able to represent and display data in a way that is both aesthetic and responsive to user interaction. [D3](https://github.com/d3/d3) has been a staple for data visualization in JavaScript for the past few years. [VX](https://github.com/hshoff/vx) is a library that utilizes D3 and builds upon that. Today, we'll go through how to make a simple bar graph, and then pursue something a little more advanced, called a 'sunburst', which resembles a layered pie chart, but is responsive to the user's mouse hover.

# Basic BarGraph with VX
First, we'll try a BarGraph from [VX's Getting Started Tutorial](https://medium.com/vx-code/getting-started-with-vx-1756bb661410).

```jsx
import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

const data = letterFrequency;

const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = (d) => d.letter;
const y = (d) => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => (data) => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
export default function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

```

Which looks like:
![VX Bar Graph](https://dev-to-uploads.s3.amazonaws.com/i/h5sukw6aehyqwyltro22.png)

Super basic, but loads quickly and looks pretty clean!

# D3 Basic Sunburst
Use the code below in conjunction with the files from [D3 Sunburst Component](https://github.com/mojoaxel/d3-sunburst),
I will be showing the `loadDataAsArray.html` example here:

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sequences sunburst</title>
		<link rel="stylesheet" type="text/css" href="../sunburst.css"/>
		<link rel="stylesheet" type="text/css" href="./examples.css"/>
		<script src="../node_modules/d3/d3.min.js" type="text/javascript"></script>
		<script src="../sunburst.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="main">
			<div id="sunburst-breadcrumbs"></div>
			<div id="sunburst-chart">
				<div id="sunburst-description"></div>
			</div>
		</div>
		<div id="sidebar">
			<input type="checkbox" id="togglelegend"> Legend<br/>
			<div id="sunburst-legend" style="visibility: hidden;"></div>
		</div>

		<script type="text/javascript">
			(function() {
				var sunburst = new Sunburst({
					colors: {
						"home": "#5687d1",
						"product": "#7b615c",
						"search": "#de783b",
						"account": "#6ab975",
						"other": "#a173d1",
						"end": "#bbbbbb"
					}
				});
				sunburst.setData([
					["account-account-account",22781],
					["account-account-end",3311],
					["account-account-home",906],
					["account-account-other",1156],
					["account-account-product",5969],
					["account-account-search",692],
					["account-end",7059],
					["account-home-account",396],
					["account-home-end",316],
					["account-home-home",226],
					["account-home-other",87],
					["account-home-product",613],
					["account-home-search",245],
					["account-other-account",446],
					["account-other-end",229],
					["account-other-home",91],
					["account-other-other",804],
					["account-other-product",776],
					["account-other-search",48],
					["account-product-account",3892],
					["account-product-end",3250],
					["account-product-home",531],
					["account-product-other",252],
					["account-product-product",4876],
					["account-product-search",476],
					["account-search-account",521],
					["account-search-end",39],
					["account-search-home",7],
					["account-search-other",8],
					["account-search-product",536],
					["account-search-search",219]
				]);
			})();
		</script>

	</body>
</html>
```
![Sunburst Inner](https://dev-to-uploads.s3.amazonaws.com/i/caeqq0y8ondnctkne5ur.png)
No mouseover


![Sunburst Center Select](https://dev-to-uploads.s3.amazonaws.com/i/zegir09c1odyklopv3i1.png)
Mouse in center


![Sunburst Intermediate Select](https://dev-to-uploads.s3.amazonaws.com/i/he9z9hfgcm0zj1szhsqd.png)
Mouse in intermediate layer


![Sunburst Outermost Select](https://dev-to-uploads.s3.amazonaws.com/i/jqvk347qsi8aq8d1mcga.png)
Mouse in outermost layer


# Conclusion

Short and sweet, but you get the idea - with D3 and VX, you can be up and running visualizing data in no time! For further reading, I recommend checking out [FreeCodeCamp's Getting Started with D3 and React Tutorial](https://www.freecodecamp.org/news/how-to-get-started-with-d3-and-react-c7da74a5bd9f/). After that, and if you think you're ready for the big leagues, [Amelia Wattenberger's React and D3 walkthrough](https://wattenberger.com/blog/react-and-d3) is utterly brilliant, I highly recommend it. Finally, for a better idea of both the breadth and depth that D3 has to offer, check out [D3's Example Gallery on ObservableHQ](https://observablehq.com/@d3).