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 has been a staple for data visualization in JavaScript for the past few years. 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.
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:
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,
I will be showing the loadDataAsArray.html example here:
<!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>
No mouseover
Mouse in center
Mouse in intermediate layer
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. After that, and if you think you're ready for the big leagues, Amelia Wattenberger's React and D3 walkthrough 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.
Top comments (0)