<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-wordtree.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="container"></div>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
anychart.onDocumentReady(function () {
$.ajax( "https://gist.githubusercontent.com/shacheeswadia/ccbccc482b1fb691405e07772c0fbfa0/raw/fb7b5972838b4212f4551c4cc9d5fc026fc2e8c3/littleprince.txt"
).done(function (text) {
// create word-tree chart
chart = anychart.wordtree(text);
// set the root word
chart.word("The");
// drill down to the next word in the tree
chart.drillTo("prince");
// configure the connectors
var connectors = chart.connectors();
connectors.curveFactor(0);
connectors.length(100);
connectors.offset(10);
connectors.stroke("0.5 #96a6a6");
// set container id for the chart
chart.container("container");
// initiate chart drawing
chart.draw();
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.