Just to be clear, the 0.33 is part of the 0.4, which is part of the 1.2, which is part of the 25.

jstaylor01 asked on reddit

https://www.reddit.com/r/DataVizRequests/comments/3kkrpg/how_to_visualize_data_on_very_different_scales/

Just to be clear, the 0.33 is part of the 0.4, which is part of the 1.2, which is part of the 25.

The treemap is my answer

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
	var data = google.visualization.arrayToDataTable([
		['node', 'parent', 'size', 'color'],
		['total (25)', null, 0, 0],
		['23.8/25', 'total (25)', 23.8, 0],
		['1.2/25', 'total (25)', 0, 0],
		['0.8/1.2', '1.2/25', 0.8, 0],
		['0.4/1.2', '1.2/25', 0.4, 0],
		['0.07/0.4', '0.4/1.2', 0.07, 0],
		['0.33/0.4', '0.4/1.2', 0.33, 0]
        ]);

tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

https://www.gstatic.com/charts/loader.js