Skip to content

Instantly share code, notes, and snippets.

@kristw

kristw/bubbleChart.js

Last active April 15, 2018 15:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kristw/71d73ecee8c7be61a8a7 to your computer and use it in GitHub Desktop.
Save kristw/71d73ecee8c7be61a8a7 to your computer and use it in GitHub Desktop.
Download ZIP
angular + d3Kit Bubble chart
Raw
readme.md

This example uses d3Kit with AngularJS through angular-d3Kit-adapter.

d3Kit factory helps you create a reusable chart. angular-d3Kit-adapter converts the chart into an angular directive in one line.

angular.d3KitAdapter.plug(module, 'bubbleChart', BubbleChart);

Then you can use this tag.

<bubble-chart chart-data="bubbles" chart-on-bubble-click="handleClick"></bubble-chart>

In bubbleChart.js, a custom event "bubbleClick" is defined. This event becomes an attribute chart-on-bubble-click that you can bind to an event handler automatically.

Try it by

  • Click on a bubble
  • Open in new window and resize to see the chart resize.
Raw
bubbleChart.js
// Define bubble chart
var BubbleChart = d3Kit.factory.createChart(
// First argument is the default options for this chart
{
margin: {top: 60, right: 60, bottom: 60, left: 60},
initialWidth: 800,
initialHeight: 460
},
// The second argument is an Array that contains
// names of custom events from this chart.
// In this example chart,
// it will dispatch event "bubbleClick" when users click on a bubble.
['bubbleClick'],
// The third argument is an internal constructor.
// This is where you would implement a bubble chart
// inside the passed skeleton.
function(skeleton){
var layers = skeleton.getLayerOrganizer();
var dispatch = skeleton.getDispatcher();
var color = d3.scale.category10();
layers.create(['content', 'x-axis', 'y-axis']);
var x = d3.scale.linear()
.range([0, skeleton.getInnerWidth()]);
var y = d3.scale.linear()
.range([0, skeleton.getInnerHeight()]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var visualize = d3Kit.helper.debounce(function(){
if(!skeleton.hasData()){
d3Kit.helper.removeAllChildren(layers.get('content'));
return;
}
var data = skeleton.data();
x.domain(d3.extent(data, function(d){return d.x;}))
.range([0, skeleton.getInnerWidth()]);
y.domain(d3.extent(data, function(d){return d.y;}))
.range([skeleton.getInnerHeight(), 0]);
layers.get('x-axis')
.attr('transform', 'translate(0,' + skeleton.getInnerHeight() + ')')
.call(xAxis);
layers.get('y-axis')
.call(yAxis);
var selection = layers.get('content').selectAll('circle')
.data(data);
selection.exit().remove();
selection.enter().append('circle')
.attr('cx', function(d){return x(d.x);})
.attr('cy', function(d){return y(d.y);})
.on('click', dispatch.bubbleClick);
selection
.attr('cx', function(d){return x(d.x);})
.attr('cy', function(d){return y(d.y);})
.attr('r', function(d){return d.r;})
.style('fill', function(d, i){return color(i);});
}, 10);
skeleton
.autoResize('width')
.on('resize', visualize)
.on('data', visualize);
}
);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular + d3Kit Bubble Chart</title>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<button ng-click="generate()">generate data</button>
<bubble-chart chart-data="bubbles" chart-on-bubble-click="handleClick"></bubble-chart>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/twitter/d3kit/master/dist/d3kit.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/kristw/angular-d3kit-adapter/master/dist/angular-d3kit-adapter.min.js"></script>
<script src="bubbleChart.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
var app = angular.module('app', [])
.controller('mainCtrl', function($scope){
$scope.generate = function(){
// Generate random data
var bubbles = [];
for(var i=0;i<100;i++){
bubbles.push({
x: Math.random()*100,
y: Math.random()*100,
r: Math.random()*5+3
});
}
$scope.bubbles = bubbles;
};
$scope.generate();
$scope.handleClick = function(d){
alert(JSON.stringify(d));
};
});
angular.d3KitAdapter.plug(app, 'bubbleChart', BubbleChart);
Raw
style.css
body {
font: 10px sans-serif;
}
.x-axis-layer line, .y-axis-layer line,
.x-axis-layer path, .y-axis-layer path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment