examples/BubbleChartExample.html

<!DOCTYPE html>
<html>

  <head>
    <title>d3-ez : Bubble Chart Example</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="../dist/d3-ez.js"></script>
    <link rel="stylesheet" type="text/css" href="../dist/d3-ez.css"/>
  </head>

  <body>
    <div id="chartholder"></div>
    <br/>
    <div>Value: <span id="message"></span></div>

    <script type="text/javascript">
      d3.csv("data/hans_rosling_2007.csv").then(function(csv) {
        // Hans Rosling Data Source: https://plot.ly/~LeoDKFZ/0.embed


        // 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 = Array.from(d3.group(tmp, d => d.series), ([key, value]) => ({ key, values: value }));

        // Create chart base
        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 myChart = d3.ez.chart.bubbleChart()
          .width(1000)
          .height(600)
          .colors(colors)
          .title("Hans Rosling Bubble Chart")
          .subTitle("2007")
          .showLegend(true)
          .yAxisLabel("yScale")
          .on("customValueMouseOver", function(e, d) {
            d3.select("#message").text(d.value);
          })
          .on("customSeriesClick", function(e, d) {
            console.log(d);
          });

        d3.select('#chartholder')
          .datum(data)
          .call(myChart);
      });
    </script>
  </body>

</html>