PatMartin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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


## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>