The circles represent people per square miles for each Continent.
See (Bubble Chart)[https://github.com/phuonghuynh/bubble-chart/]
forked from phuonghuynh's block: D3 Bubble chart
license: mit |
The circles represent people per square miles for each Continent.
See (Bubble Chart)[https://github.com/phuonghuynh/bubble-chart/]
forked from phuonghuynh's block: D3 Bubble chart
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Continental Density People/Square Mile</title> | |
<meta charset="utf-8"> | |
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'> | |
<script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script> | |
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script> | |
<script src="index.js"></script> | |
<style> | |
.bubbleChart { | |
min-width: 400px; | |
max-width: 800px; | |
height: 700px; | |
margin: 0 auto; | |
} | |
.bubbleChart svg{ | |
background: #ffffff; | |
} | |
</style> | |
</head> | |
<body style="background: #FFFFFF"> | |
<div class="bubbleChart"/> | |
</body> | |
</html> |
$(document).ready(function () { | |
var bubbleChart = new d3.svg.BubbleChart({ | |
supportResponsive: true, | |
//container: => use @default | |
size: 600, | |
//viewBoxSize: => use @default | |
innerRadius: 600 / 3, | |
//outerRadius: => use @default | |
radiusMin: 40, | |
//radiusMax: 100, | |
//intersectDelta: use @default | |
//intersectInc: use @default | |
//circleColor: use @default | |
data: { | |
items: [ | |
{text: "Asia", count: "242"}, | |
{text: "Africa", count: "89"}, | |
{text: "Europe", count: "192"}, | |
{text: "North America", count: "49"}, | |
{text: "South America", count: "57"}, | |
{text: "Australia", count: "12"}, | |
{text: "World", count: "118"}, | |
{text: "Antarctica", count: "0"}, | |
], | |
eval: function (item) {return item.count;}, | |
classed: function (item) {return item.text.split(" ").join("");} | |
}, | |
plugins: [ | |
{ | |
name: "central-click", | |
options: { | |
text: "(See more detail)", | |
style: { | |
"font-size": "12px", | |
"font-style": "italic", | |
"font-family": "Source Sans Pro, sans-serif", | |
//"font-weight": "700", | |
"text-anchor": "middle", | |
"fill": "black" | |
}, | |
attr: {dy: "65px"}, | |
centralClick: function() { | |
alert("Here is more details!!"); | |
} | |
} | |
}, | |
{ | |
name: "lines", | |
options: { | |
format: [ | |
{// Line #0 | |
textField: "count", | |
classed: {count: true}, | |
style: { | |
"font-size": "28px", | |
"font-family": "Source Sans Pro, sans-serif", | |
"text-anchor": "middle", | |
fill: "black" | |
}, | |
attr: { | |
dy: "0px", | |
x: function (d) {return d.cx;}, | |
y: function (d) {return d.cy;} | |
} | |
}, | |
{// Line #1 | |
textField: "text", | |
classed: {text: true}, | |
style: { | |
"font-size": "14px", | |
"font-family": "Source Sans Pro, sans-serif", | |
"text-anchor": "middle", | |
fill: "black" | |
}, | |
attr: { | |
dy: "20px", | |
x: function (d) {return d.cx;}, | |
y: function (d) {return d.cy;} | |
} | |
} | |
], | |
centralFormat: [ | |
{// Line #0 | |
style: {"font-size": "50px"}, | |
attr: {} | |
}, | |
{// Line #1 | |
style: {"font-size": "30px"}, | |
attr: {dy: "40px"} | |
} | |
] | |
} | |
}] | |
}); | |
}); |