US population with Light Provence theme

US population

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-treemap.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/light_provence.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('lightProvence');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/tree-map-charts/top-1000-companies/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/tree-map-charts/us-population/data.json',
        function (data) {
          // makes tree from the data for the sample
          var dataTree = anychart.data.tree(data, 'as-table');
          var chart = anychart.treeMap(dataTree);

          // sets chart settings
          chart
            .selectionMode('none')
            // set colorScale with colors
            .colorScale(anychart.scales.linearColor('#f1a122', '#a50b01'));

          // sets chart settings
          chart.selectionMode('none')
            // set colorScale with colors
            .colorScale(anychart.scales.linearColor('#f1a122', '#a50b01'));

          // sets credits for this sample
          chart
            .credits()
            .enabled(true)
            .url(
              'https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population'
            )
            .text(
              'Data source: https://en.wikipedia.org/wiki/List_of_United_States_cities_by_population'
            )
            .logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico');

          // sets title for chart and customizes it
          chart
            .title()
            .enabled(true)
            .useHtml(true)
            .padding([0, 0, 20, 0])
            .text(
              'US population by Biggest Cities<br/>' +
              '<span style="color:#212121; font-size: 13px;">According to en.wikipedia.org</span>'
            );

          // sets settings for labels
          chart
            .labels()
            .useHtml(true)
            .fontColor('#212121')
            .fontSize(12)
            .format(function () {
              return (
                this.getData('name') +
                '<br/><span style="font-size: 10px; font-weight: bold">' +
                parseFloat(this.value).toLocaleString() +
                '</span> '
              );
            });

          // sets settings for tooltips
          chart.tooltip().format(function () {
            return parseFloat(this.value).toLocaleString() + ' people';
          });

          // set container id for the chart
          chart.container('container');
          // initiate chart drawing
          chart.draw();
        }
      );
    });
  
</script>
</body>
</html>

Tree Map Charts are predominantly used in cases of hierarchical data representation. The points of this chart type look like rectangles of different width and height and colored in a hue of a Color Scale according to the value the point represent.

Here you can see a TreeMap Chart where the points (or cells) of the root level are representing the population in the states of the USA and the points of the lower level shows the population in towns. On both levels, the labels show the name of the state (town) and the whole population value. Color Scale uses the colors from red to light orange for the values from the highest to the lowest. The mostly populated state is California with 18 383 442 people, the most populated town in California is Los Angeles with 3 792 621 people. The less populated state and its town are Montana with 104 170 people and its only described town (Billings).

Warning!

US population

US population