Skip to content

Instantly share code, notes, and snippets.

@martin-doyle

martin-doyle/index.html

Created September 14, 2015 17:43
Show Gist options
  • Save martin-doyle/45059a0a485ccb36c747 to your computer and use it in GitHub Desktop.
Save martin-doyle/45059a0a485ccb36c747 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Second D3 Example</title>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
.theme-dropdown .dropdown-menu {
position: static;
display: block;
margin-bottom: 20px;
}
.theme-showcase > p > .btn {
margin: 5px 0;
}
.theme-showcase .navbar .container {
width: auto;
}
text {
font: bold 30px "Lucida Console", Courier, monospace;
}
.enter {
fill: green;
}
.update {
fill: #333;
}
.exit {
fill: brown;
}
</style>
</head>
<body role="document">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div class="container theme-showcase" role="main">
<div class="panel panel-default">
<div class="panel-heading">
<h2>D3 Bubbles</h2>
<p>My Test 1.0</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bubbles 1</h3>
</div>
<div id="bubblePanel1">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bubbles 2</h3>
</div>
<div id="bubblePanel2">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bubbles 3</h3>
</div>
<div id="bubblePanel3">
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Alphabet 1</h3>
</div>
<div id="bubblePanel4">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Alphabet 2</h3>
</div>
<div id="bubblePanel5">
</div>
</div>
</div>
</div>
</div>
<script>
var divName1 = '#bubblePanel1',
divName2 = '#bubblePanel2',
divName3 = '#bubblePanel3',
divName4 = '#bubblePanel4',
divName5 = '#bubblePanel5';
var initialAlphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
var belphabet = initialAlphabet.slice();
var initialData = [32, 48, 72, 108, 162, 243, 364.5];
function simpleAlphabet() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 250,
height = 250;
function my(selection) {
selection.each(function (data) {
// generate chart here; `d` is the data and `this` is the element
// Select the svg element, if it exists.
width = parseInt(d3.select(this).style('width'), 10);
var distance = ((width - margin.left - margin.right) / (initialAlphabet.length + 1));
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll('svg').data([0]);
var gEnter = svg.enter().append('svg')
.attr('width', width)
.attr('height', height)
.append('g');
var g = svg.select('g')
.attr('transform', 'translate(' + margin.left + ', ' + (height / 2) + ')');
var text = g.selectAll('text')
.data(data, function (d) {
return d;
});
text.attr('class', 'update');
text.enter().append('text')
.attr('class', 'enter')
.attr('dy', '.35em')
.attr('y', -60)
.style('fill-opacity', 0.1)
.text(function (d) {
return d;
})
.transition()
.duration(750)
.attr('y', 0)
.style('fill-opacity', 1)
.transition()
.duration(750)
.attr('class', 'update');
text.attr('x', function (d, i) {
return (belphabet.indexOf(d) * distance) + (distance / 2);
});
text.exit().transition()
.duration(750)
.transition()
.duration(750)
.attr('class', 'exit')
.attr('y', 60)
.style('fill-opacity', 0.1)
.remove();
});
}
my.width = function (value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.height = function (value) {
if (!arguments.length) return height;
height = value;
return my;
};
return my;
}
function simpleBubble() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 250,
height = 250;
function my(selection) {
selection.each(function (data) {
// generate chart here; `d` is the data and `this` is the element
// Select the svg element, if it exists.
width = parseInt(d3.select(this).style('width'), 10);
var distance = ((width - margin.left - margin.right) / (initialData.length));
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll('svg').data([[0]])
.attr('width', width);
var gEnter = svg.enter().append('svg')
.attr('height', height)
.append('g');
var g = svg.select('g')
.attr('transform', 'translate(' + margin.left + ', ' + (height / 2) + ')');
var circle = g.selectAll('circle')
.data(data, function (d) {
return d;
});
circle.attr('class', 'update')
.transition()
.duration(500)
.attr('cx', function (d, i) {
return (i * distance) + (distance / 2);
});
circle.enter().append('circle')
.attr('class', 'enter')
.attr('cy', -60)
.attr('cx', function (d, i) {
return (i * distance) + (distance / 2);
})
.attr('r', function (d) {
return Math.sqrt(d);
})
.style('fill-opacity', 0)
.transition()
.duration(500)
.style('fill-opacity', 1)
.attr('cy', 0);
circle.exit()
.transition()
.duration(500)
.attr('class', 'exit')
.attr('cy', 60)
.style('fill-opacity', 0)
.remove();
});
}
my.width = function (value) {
if (!arguments.length) return width;
width = value;
return my;
};
my.height = function (value) {
if (!arguments.length) return height;
height = value;
return my;
};
return my;
}
var alphabet = simpleAlphabet()
.height(150);
var alphabet1 = d3.select(divName4)
.datum(initialAlphabet)
.call(alphabet);
var alphabet2 = d3.select(divName5)
.datum(initialAlphabet)
.call(alphabet);
var chart = simpleBubble()
.height(150);
var chart1 = d3.select(divName1)
.datum(initialData)
.call(chart);
var chart2 = d3.select(divName2)
.datum(initialData)
.call(chart);
var chart3 = d3.select(divName3)
.datum(initialData)
.call(chart);
setInterval(function () {
var l = Math.floor(Math.random() * initialData.length) + 1;
chart1.datum(d3.shuffle(initialData)
.slice(0, (l === 0 ? 1 : l))).call(chart);
l = Math.floor(Math.random() * initialData.length) + 1;
chart2.datum(d3.shuffle(initialData)
.slice(0, (l === 0 ? 1 : l))).call(chart);
l = Math.floor(Math.random() * initialData.length) + 1;
chart3.datum(d3.shuffle(initialData)
.slice(0, (l === 0 ? 1 : l))).call(chart);
}, 1000);
setInterval(function () {
var l = Math.floor(Math.random() * initialAlphabet.length) + 1;
alphabet1.datum(d3.shuffle(initialAlphabet)
.slice(0, (l === 0 ? 1 : l))).call(alphabet);
l = Math.floor(Math.random() * initialAlphabet.length) + 1;
alphabet2.datum(d3.shuffle(initialAlphabet)
.slice(0, (l === 0 ? 1 : l))).call(alphabet);
}, 3000);
d3.select(window).on('resize', resize);
function resize() {
chart1.call(chart);
chart2.call(chart);
chart3.call(chart);
alphabet1.call(alphabet);
alphabet2.call(alphabet);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment