D3 Examples - d3-ez : Bubble Chart Example

d3-ez : Bubble Chart Example

A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk that expresses two of the vi values through the disk’s xy location and the third through its size. Bubble charts can facilitate the understanding of social, economical, medical, and other scientific relationships. Bubble charts can be considered a variation of the scatter plot, in which the data points are replaced with bubbles.

FUNCTION: Comparison, Distribution, Trend over time

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : Bubble Chart Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
​
<body>
  <div id="chartholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>
​
  <script type="text/javascript">
    d3.csv("hans_rosling_2007.csv").then(function(csv) {
      // Hans Rosling Data Source: https://plot.ly/~LeoDKFZ/0.embed
​
      var colors = [d3.rgb(31, 119, 180), d3.rgb(255, 127, 14), d3.rgb(44, 160, 44), d3.rgb(214, 39, 40), d3.rgb(148, 103, 189)];
      var chart = d3.ez.chart.bubbleChart().colors(colors).yAxisLabel("yScale");
      var legend = d3.ez.component.legend().title("Continent");
      var title = d3.ez.component.title().mainText("Hans Rosling Bubble Chart").subText("2007");
​
      // Convert csv to d3-ez data format
      // Rename keys
      var tmp = csv.map(function(d) {
        return { "key": d.Text, "value": d.Size, "x": d.X, "y": d.Y, "series": d.Continent };
      });
      // Nest Data
      var data = d3.nest().key(function(d) {
        return d.series;
      }).entries(tmp);
​
      // Create chart base
      var myChart = d3.ez.base()
        .width(750)
        .height(400)
        .chart(chart)
        .legend(legend)
        .title(title)
        .on("customValueMouseOver", function(d) {
          d3.select("#message").text(d.value);
        })
        .on("customSeriesClick", function(d) {
          console.log(d);
        });
​
      d3.select('#chartholder')
        .datum(data)
        .call(myChart);
    });
  </script>
</body>
​
</html>
​
    