loading...
Cover image for An Introduction to Data Visualization with VX and D3

An Introduction to Data Visualization with VX and D3

peterklingelhofer profile image Peter Klingelhofer ・3 min read

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:
VX Bar Graph

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>

Sunburst Inner
No mouseover

Sunburst Center Select
Mouse in center

Sunburst Intermediate Select
Mouse in intermediate layer

Sunburst Outermost Select
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.

Posted on by:

Discussion

pic
Editor guide