NVD3BubbleChart

NVD3 Bubble Chart

This is the dex.js bubble chart leveraging NVD3. I really love how much polish the NVD3 folks have put into this chart.

Comments

NVD3 only works with D3 v3, so we switch over to D3v3 as we load scripts via:

<script src="https://cdn.rawgit.com/PatMartin/dexjs/master/dist/dex.min.js"></script>
<script>d3 = dex.charts.d3.d3v3;</script>
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>

And everything works fine. We can even support chart interactions between visuals written in different versions of D3 as well as altogether different non-D3 web technologies.

References

dex.js The main site

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #Nvd3_BubbleChartParent {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
</style>

for (var nameIndex = 0; nameIndex < 10; nameIndex++) {
    var name = faker.name.firstName();
    for (var year = 2015; year < 2017; year++) {
      for (var month = 0; month < 12; month++) {
        csv.data.push([name, new Date(year, month, 1),
          faker.random.number({'min': 0, 'max': 100}),
          faker.random.number({'min': 0, 'max': 100}
          )])
      }
    }
  }

var bubbleChart = dex.charts.nvd3.BubbleChart({
      'parent': '#Nvd3_BubbleChartParent',
      'csv': csv
    }
  );
  bubbleChart.render();
</script>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js