d3sample.html

<div id="chartContainer">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
      d3.tsv("/assets/data/example_data.tsv", function (data) {
        dimple.filterData(data, "Date", "01/12/2012");
        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 420, 330)
        myChart.addMeasureAxis("x", "Price");
        myChart.addMeasureAxis("y", "Sales Value");
        myChart.addSeries(["SKU", "Channel", "Owner"], dimple.plot.bubble);
        var myLegend = myChart.addLegend(530, 100, 60, 300, "Right");
        myChart.draw();
        myChart.legends = [];
        svg.selectAll("title_text")
          .data(["Click legend to","show/hide owners:"])
          .enter()
          .append("text")
            .attr("x", 499)
            .attr("y", function (d, i) { return 90 + i * 14; })
            .style("font-family", "sans-serif")
            .style("font-size", "10px")
            .style("color", "Black")
            .text(function (d) { return d; });
        var filterValues = dimple.getUniqueValues(data, "Owner");
        myLegend.shapes.selectAll("rect")
          .on("click", function (e) {
            var hide = false;
            var newFilters = [];
            filterValues.forEach(function (f) {
              if (f === e.aggField.slice(-1)[0]) {
                hide = true;
              } else {
                newFilters.push(f);
              }
            });
            if (hide) {
              d3.select(this).style("opacity", 0.2);
            } else {
              newFilters.push(e.aggField.slice(-1)[0]);
              d3.select(this).style("opacity", 0.8);
            }
            filterValues = newFilters;
            myChart.data = dimple.filterData(data, "Owner", filterValues);
            myChart.draw(800);
          });
      });
  </script>
</div>

A demonstration of D3js (with a helper library, dimple) to render interactive bubble charts.
Attribution: http://dimplejs.org/advanced_examples_viewer.html?id=advanced_interactive_legends
Blog post: http://www.emergingstack.com/2015/05/12/Beyond-Spreadsheets-Part-2-of-2.html