D3 Components

Bubble Chart

<div id="bubble-chart-default"></div>
<div id="bubble-chart-gradient"></div>

<script>
  d3.json('../data/arxiv-keywords.json', function (data) {
    d3.shuffle(data);
    d3.bubbleChart(data, { id: 'bubble-chart-default' });
    d3.bubbleChart(data, {
      id: 'bubble-chart-gradient',
      domainX: [2003, 2017],
      domainY: [0, 600],
      framed: true,
      gridY: {
        show: true
      },
      labelX: {
        show: true,
        text: 'Published year'
      },
      labelY: {
        show: true,
        text: 'Article counts'
      },
      dots: {
        gradient: true,
        normalize: 'linear',
        onclick: function (d) {
          window.open('http://arxitics.com/search?q="topological+insulator"&published=' + d.year);
        }
      },
      tooltip: {
        html: function (d) {
          var year = d.year;
          var count = d.count;
          var authors = d.authors;
          return authors + ' author' + (authors > 1 ? 's' : '') + ' published ' +
            count + ' article' + (count > 1 ? 's' : '') + ' in ' + year;
        }
      }
    });
  });
</script>