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.

forked from chrisrzhou's block: D3 Sunburst Sequence

forked from anonymous's block: D3 Sunburst Sequence

<!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>

<header class="page-header">
    <h1>D3 Sunburst Sequence</h1> 
    <p class="text-small">Interactive sunburst visualization of sequential data changes.</p>
  </header>

<div class="main" ng-controller="MainCtrl as sunburst">

<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 />

<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>

<div class="preview">
      <h2>Data</h2>
      <pre>{{ sunburst.data }}</pre>
    </div>
  </div>

<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>

<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>

Modified http://code.angularjs.org/1.3.5/angular.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.angularjs.org/1.3.5/angular.js

https://d3js.org/d3.v3.min.js