(This is a minimal update of my original Sequences sunburst block, to work correctly with d3 v4. See the Observable version for d3 v5).
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 license (see the LICENSE file).
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Sequences sunburst</title>
<script src="//d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" type="text/css" href="sequences.css"/>
</head>
<body>
<div id="main">
<div id="sequence"></div>
<div id="chart">
<div id="explanation" style="visibility: hidden;">
<span id="percentage"></span><br/>
of visits begin with this sequence of pages
</div>
</div>
</div>
<div id="sidebar">
<input type="checkbox" id="togglelegend"> Legend<br/>
<div id="legend" style="visibility: hidden;"></div>
</div>
<script type="text/javascript" src="sequences.js"></script>
<script type="text/javascript">
// Hack to make this example display correctly in an iframe on bl.ocks.org
d3.select(self.frameElement).style("height", "700px");
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js