html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

#container {

  height: calc(100% - 2em);

}

​

.controls {

  text-align: center;

}

​

#label {

  font-size: 1em;

}

​

#input {

  width: auto;

  font-size: 1.8em;

  border: none;

  box-shadow: none;

  padding: 0 15px;

  border-bottom: 2px solid #456;

}

var preloader = anychart.ui.preloader();

preloader.render(document.getElementById('container'));

​

// show preloader

preloader.visible(true);

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

    // The data used in this sample can be obtained from the CDN

    'https://cdn.anychart.com/samples-data/word-tree/trump-tweets/tweets.json',

    function (data) {

      // create word-tree chart

      var chart = anychart.wordtree(data);

​

      // disable chart tooltip

      chart.tooltip(false);

​

      // set chart's font size minimum and maximum

      chart.minFontSize(3);

      chart.maxFontSize(20);

​

      // set chart connectors settings

      chart.connectors().length(50).offset(5).stroke('#1AA1F1');

​

      // set the root word

      chart.word('Fake');

​

      // drill down to the next word in the tree

      chart.drillTo('News');

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // hide preloader

      preloader.visible(false);

​

      // listener for input

      document

        .getElementById('input')

        .addEventListener('change', function (e) {

          // get array of words from input

          var words = e.target.value.split(' ');

          // Set visible preloader

          if (words.length > 1) {

            // set first word from the input as root of the tree

            chart.word(words[0]);

​

            // drill down tree to the last word from the input

            try {

              chart.drillTo(words[words.length - 1]);

            } catch (err) {

              return false;

            }

          } else {

            // set word from the input as root of the tree

            chart.word(e.target.value);

          }

        });

​

      document.getElementById('input').value = 'Fake News';

      document.getElementById('input').focus();

    }

  );

});