D3 Examples - NVD3BubbleChart

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #Nvd3_BubbleChartParent {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
</style>
​
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"/>
​
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.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>
<body>
<div id="Nvd3_BubbleChartParent"></div>
<script>
  var csv = new dex.csv(['Name', 'Date', 'Y', 'Size']);
​
  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>
​
    

NVD3BubbleChart

NVD3 Bubble Chart

Comments

References