block by micahstubbs 428036f0f948a5c2b95f8a4b91931ee6

ES2015 Sequences Sunburst

Full Screen

this example shows kerryrodden‘s nifty Sequences sunburst with some new ES2015 language features.

In sequences.js you’ll see variables declared with const & let.

var radius = Math.min(width, height) / 2;

becomes:

const radius = Math.min(width, height) / 2;

We can use const since we don’t change the value of radius after we first calculate it.

We can also use those super concise arrow => functions. Before we would get the name property of the current element d with code like this:

.text(function(d) { return d.name; });

now all we need is:

.text(d => d.name);

nice, right?

This example also updates the colors to this 5-color qualitative color scheme from http://colorbrewer2.org/.

To fit with the lighter colorbrewer2 color palette, we now use the gray Background Dark Accent color from the Sunlight Foundation‘s Data Visualization Style Guide to color the leaf nodes (the arcs farthest from the center).


Original README.md


This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site’s home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

If you want to simply reuse this with your own data, here are some tips for generating the CSV file:

I created this example in my work at Google, but it is not part of any Google product. It is covered by the Apache 2.0 license (see the LICENSE file).

index.html

LICENSE

sequences.css

sequences.js