Built with blockbuilder.org.
Based on Kerry Rodden's Sequences Sunburst: (/kerryrodden/7090426).
Note to get to alternate data and the legend, you may need to scroll right.
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Sequences sunburst</title> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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/> <div id="percentageText">of visits begin with this sequence of pages</div> </div> </div> </div> <div id="sidebar"> <select onchange="draw();" id="csv"> <option value="carerpercent.csv">Network Use</option> <option value="family.csv">Why Go Online?</option> <option value="loggedon.csv">When logged in</option> <option value="mobile.csv">Mobile Use</option> <option value="money.csv">Save Money</option> <option value="shopping.csv">Shopping</option> <option value="time.csv">Why Internet?</option> <option value="usage.csv">Apps used</option> <option value="visit-sequences.csv">Original Sunburst sequence</option> <option value="flare.json">Flare</option> </select> <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> Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js