(This is a minimal update of my original Sequences sunburst block, to work correctly with d3 v4.)
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).
forked from kerryrodden's block: Sequences sunburst (d3 v4)
forked from lorenzopub's block: Sequences sunburst (d3 v4)
forked from jingsongs's block: Sequences sunburst (d3 v4)
forked from jingsongs's block: Sequences sunburst (d3 v4)
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