Skip to content

Instantly share code, notes, and snippets.

@phuonghuynh

phuonghuynh/README.md

Last active October 21, 2019 08:38
Show Gist options
  • Save phuonghuynh/54a2f97950feadb45b07 to your computer and use it in GitHub Desktop.
Save phuonghuynh/54a2f97950feadb45b07 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Bubble chart
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello Bubble Chart</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: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #000000;
}
</style>
</head>
<body style="background: #000000">
<div class="bubbleChart"/>
</body>
</html>
Raw
index.js
$(document).ready(function () {
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3.5,
//outerRadius: => use @default
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: {
items: [
{text: "Java", count: "236"},
{text: ".Net", count: "382"},
{text: "Php", count: "170"},
{text: "Ruby", count: "123"},
{text: "D", count: "12"},
{text: "Python", count: "170"},
{text: "C/C++", count: "382"},
{text: "Pascal", count: "10"},
{text: "Something", count: "170"},
],
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": "white"
},
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: "white"
},
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: "white"
},
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"}
}
]
}
}]
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment