D3 Examples - D3 Sunburst Changing Data

D3 Sunburst Sequence

D3 Sunburst Sequence visualizes a graph of nodes by highlighting sequential progression of nodes leading up to a final value. A sunburst sequence is useful to visualize relative weights/percentages of a starting state to an end state (e.g. webpage redirects, product retention, subscription-based products, cashflows).

Description

This is a variation of the original sunburst sequence.

A major improvement to the original visualization is to organize the code base and draw the D3 components (breadcrumbs, sunburst, legend) into a single HTML div tag, and to dynamically assign color and legend scales.

The other improvement is generalizing and conventionalizing data inputs. The input requires a simple tabular schema of sequence, stage, node, and value (see below) and the program will parse the data into a JSON graph.

The CSV data can be unsorted but it must NOT contain a header.

The data input has to be a 4-column CSV conforming to the data schema of:

sequence (int/string): an ordered sequence that clearly defines the grouping of nodes.
stage (int): the index/order of nodes in a given sequence.
node (int/string): the data name of the node.
value (int): the value at each stage of a given sequence. Only the final stage value in a given sequence is used in this visualization.

Files

index.html: main HTML file.

app.js: Main angular app file. Contains directive onReadFile to handle file uploads and sunburst to re-render the D3 visualization on data updates.

sunburst.js: Contains the logic for drawing the D3 visualization by selecting the angular.element from which the vis is to be drawn. Updates and prompts D3 to re-render the visualization when the angular data changes on file uploads.

style.css: stylesheet containing optional D3 classes that can be adjusted (commented out)

data.csv: Four CSV-data files for sample downloads and uploads to the app.

Other Notes

Visualization hover can be a little glitchy if the base data does not contain very meaningful sequences i.e. smaller parent nodes that lead up to larger child nodes.

A big help from this fiddle to help implement an AngularJS FileReader.

xxxxxxxxxx
 
<!DOCTYPE html>
<html ng-app="Sunburst">
​
<head>
  <meta charset="utf-8">
  <title>D3 Sunburst Sequence</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
  <link rel="stylesheet" href="style.css" />
</head>
​
<body class="container">
​
  <!-- header -->
  <header class="page-header">
    <h1>D3 Sunburst Sequence</h1> 
    <p class="text-small">Interactive sunburst visualization of sequential data changes.</p>
  </header>
​
​
  <!-- main content -->
  <div class="main" ng-controller="MainCtrl as sunburst">
​
    <!-- visualization -->
    <h2>Visualization</h2>
    <p>Hover for data summary, click on visualization to reset summary.</p>
    <p>Select example: <select ng-options="example for example in sunburst.examples" ng-model="sunburst.exampleSelected" ng-change="sunburst.selectExample(sunburst.exampleSelected)"></select></p>
   
    <div class="visualization">
      <sunburst data="sunburst.data"></sunburst>
    </div>
​
    <p>A sunburst visualization helps track population changes from initial states over lifecycles e.g. product churn rates, product conversions.</p>
    <p>For custom testing, load up a file conforming to the data schema (see details below) or you can test out the following sample files (fake data):</p>
    <ul>
      <li><a href="data_android_os_conversion.csv" target="_blank">Android OS Conversions</a>
      </li>
      <li><a href="data_netflix_churn.csv" target="_blank">Netflix Churn</a>
      </li>
      <li><a href="data_page_clicks.csv" target="_blank">Page Clicks</a>
      </li>
    </ul>
    <input id="fileUpload" type="file" on-read-file="sunburst.getData($fileContent)" />
    <hr />
​
​
​
    <!-- details -->
    <div class="Details">
      <h2>Details</h2>
      <p>
        This is a variation of the original <a href="https://bl.ocks.org/kerryrodden/7090426">sunburst sequence</a>. A major improvement to the original vis is to organize the code base and draw the D3 components (breadcrumbs, sunburst,
        legend) from a single HTML <code>div</code> tag, and to dynamically assign color and legend scales.
      </p>
      <p>
        The other improvement is generalizing and conventionalizing data inputs. The input requires a simple tabular schema of <code>sequence, stage, node, value</code> (see below) and the program will parse the data into a JSON graph.</p>
      <p>The design of the data input therefore makes the visualization more useable on relational database queries. The CSV data can be unsorted but it must <em>NOT</em> contain a header, and has to conform to the following data column requirements.
      </p>
      <ul>
        <li><code>sequence (int/string):</code> an ordered sequence that clearly defines the grouping of nodes.</li>
        <li><code>stage (int): </code>the index/order of nodes in a given sequence.</li>
        <li><code>node (int/string): </code>the data name of the node.</li>
        <li><code>value (int): </code>the value at each stage of a given sequence. Only the final stage value in a given sequence is used in this visualization.</li>
      </ul>
      <hr />
    </div>
​
​
    <!-- data/file preview -->
    <div class="preview">
      <h2>Data</h2>
      <pre>{{ sunburst.data }}</pre>
    </div>
  </div>
​
​
  <!-- footer -->
  <footer>
    <p><a href="https://gist.github.com/chrisrzhou/d5bdd8546f64ca0e4366" target="_blank">D3 Sunburst Sequence</a> by chrisrzhou, 2014-12-29
      <br />
      <a href="https://github.com/chrisrzhou" target="_blank"><i class="fa fa-github"></i></a> |
      <a href="https://bl.ocks.org/chrisrzhou" target="_blank"><i class="fa fa-cubes"></i></a> |
      <a href="https://www.linkedin.com/in/chrisrzhou" target="_blank"><i class="fa fa-linkedin"></i></a>
    </p>
  </footer>
​
​
  <!-- scripts -->
  <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="app.js"></script>
  <script src="sunburst.js"></script>
  <script>
    // Hack to make this example display correctly in an iframe on bl.ocks.org
    d3.select(self.frameElement).style("height", "1000px");
  </script>
</body>
​
</html>
    