Skip to content

Instantly share code, notes, and snippets.

@PatMartin

PatMartin/.block

Last active August 7, 2017 06:18
Show Gist options
  • Save PatMartin/8184531920febc87269322f46e172322 to your computer and use it in GitHub Desktop.
Save PatMartin/8184531920febc87269322f46e172322 to your computer and use it in GitHub Desktop.
Download ZIP
NVD3BubbleChart
Raw
.block
license: mit
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

Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment