<div id="bar-chart-default"></div>
<div id="bar-chart-stacked"></div>

<script>
  d3.json('../data/china-cities-population.json', function (data) {
    d3.barChart(data, { id: 'bar-chart-default' });
  });
  d3.json('../data/china-cities-population.json', function (data) {
    var options = {
      id: 'bar-chart-stacked',
      standalone: false,
      stacked: true,
      horizontal: true,
      gridY: {
        show: true
      },
      refline: {
        show: true,
        threshold: 2000
      },
      tooltip: {
        html: function (d) {
          return d.city + ': ' + d.population + ' (' + d.type + ')';
        }
      },
      legend: {
        display: 'inline-block',
        symbol: {
          shape: 'circle'
        }
      },
      margin: {
        top: '2.5em'
      }
    };
    d3.barChart(data, options);
    d3.interval(function () {
      d3.shuffle(data);
      d3.barChart(data, options);
    }, 2000);
  });
</script>