D3 Notebook: Playing With Bubble Charts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
      .buttons {
          margin: 40px;
      }

circle {
          fill: rgb(0, 153, 255);
          fill-opacity: 0.25;
          stroke: rgb(177, 208, 229);
          stroke-width: 4px;
      }
      text {
          text-anchor: middle;
          font-family: sans-serif;
      }
    </style>
  </head>

<input type="radio" id="calories" name="property" value="calories" onclick="bubbleChart('calories')">
        <label for="calories">Calories</label>

<input type="radio" id="protein" name="property" value="protein" onclick="bubbleChart('protein')">
        <label for="protein">Protein</label>

<input type="radio" id="sodium" name="property" value="sodium" onclick="bubbleChart('sodium')">
        <label for="sodium">Sodium</label>

<input type="radio" id="fiber" name="property" value="fiber" onclick="bubbleChart('fiber')">
        <label for="fiber">Fiber</label>

<input type="radio" id="carbohydrates" name="property" value="carbohydrates" onclick="bubbleChart('carbohydrates')">
        <label for="carbohydrates">Carbohydrates</label>

<input type="radio" id="sugars" name="property" value="sugars" onclick="bubbleChart('sugars')">
        <label for="sugars">Sugars</label>

<input type="radio" id="potassium" name="property" value="potassium" onclick="bubbleChart('potassium')">
        <label for="potassium">Potassium</label>

<input type="radio" id="vitamins" name="property" value="vitamins" onclick="bubbleChart('vitamins')">
        <label for="vitamins">Vitamins</label>

</div>
      <div class="visual">
      </div>
    </div>
    <script>

let width = window.innerWidth;
      let height = window.innerHeight;

let svg = d3.select('.visual').append('svg')
        .attr('width', width)
        .attr('height', height);

function bubbleChart(property) {

let pack = d3.pack()
            .size([width, height])
            .padding(8);

let units = ['', '', 'g', 'g', 'mg', 'g', 'g', 'g', 'mg', '%']
          let duration = 1000;
          let delay = 10;

d3.csv('cereal.csv', function(d) {

if (!isNaN(parseFloat(d[property])) && isFinite(d[property])){
                d[property] = +d[property];
              } else {
                throw 'Property value isn\'t a number or doesn\'t exist';
              }

return d;

}, function(error, objects) {

if (error) throw error;

let index = objects.columns.indexOf(property)

let root = d3.hierarchy({children: objects})
                .sum(d => d[property])
                .sort((a, b) => b.value - a.value);

let nodes = svg.selectAll('.node').data([]).exit().remove();

nodes = svg.selectAll('.node')
                .data(pack(root).leaves())
                .enter().append('g')
                .attr('class', 'node')
                .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');

nodes.append('title')
                .text(d => '\"' + d.data.name + '\"\n'
                      + property.replace(property[0], l => l.toUpperCase())
                      + ': ' + d.value + units[index]);

nodes.append('circle')
                .transition()
                .duration(duration)
                .delay((d, i) => i * delay)
                .attr('r', d => d.r);

nodes.append("text")
                .transition()
                .duration(duration)
                .delay((d, i) => i * delay)
                .attr('font-size', (d) => d.r / 5)
                .text(d => d.data.name.substring(0, d.r / 3));

});
      }

bubbleChart('calories');
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js