Skip to content

Instantly share code, notes, and snippets.

@PatMartin PatMartin/.block
Last active Aug 7, 2017

Embed
What would you like to do?
NVD3BubbleChart
license: mit

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

<!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
You can’t perform that action at this time.