Skip to content

Instantly share code, notes, and snippets.

@lsbardel

lsbardel/.block

Last active March 27, 2025 03:31
Show Gist options
  • Save lsbardel/accdb81ebdec5fe311e6af084de90b8b to your computer and use it in GitHub Desktop.
Save lsbardel/accdb81ebdec5fe311e6af084de90b8b to your computer and use it in GitHub Desktop.
Download ZIP
3D bubbles
Raw
.block
license: bsd-3-clause
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scatter plot</title>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://giottojs.org/d3-canvas-transition/0.3.3/d3-canvas-transition.js"></script>
</head>
<body>
<div id="paper" style="position: absolute;">
<button>Randomise</button>
<label>
<input id='svg' name="type" type="radio" checked>
<span>svg</span>
</label>
<label>
<input id='canvas' name="type" type="radio">
<span>canvas</span>
</label>
</div>
<div id="example" style="max-width: 960px"></div>
<style>
label {
background-color: white;
}
</style>
<script>
(function () {
d3.select('#svg').on('click', function () {draw('svg');});
d3.select('#canvas').on('click', function () {draw('canvas');});
if (d3.resolution() > 1) {
d3.select('#paper').append('label').html(
"<input id='canvas-low' name='type' type='radio'><span>canvas low resolution</span>"
);
d3.select('#canvas-low').on('click', function () {draw('canvas', 1);});
}
var example = d3.select("#example"),
width = d3.getSize(example.style('width')),
height = Math.min(500, width),
currentType,
currentRes,
data;
d3.select('button').on('click.randomise', function () {
randomise();
draw();
});
function randomise () {
data = d3.range(100).map(function () {
return {
x: Math.random() * width,
y: Math.random() * height,
r: 5 + Math.floor(Math.random() * 20),
c: 'url(#color' + Math.floor(2 * Math.random()) + ')'
};
});
}
randomise();
draw('svg');
function draw (type, r) {
var paper;
if (arguments.length) {
currentRes = r;
currentType = type;
example.select('.paper').remove();
paper = example
.append(type)
.classed('paper', true)
.attr('width', width).attr('height', height).canvasResolution(r).canvas(true);
color(paper, 0, '#999');
color(paper, 1, '#9ecae1');
} else {
paper = example.select('.paper').canvas();
}
var points = paper.selectAll('circle').data(data);
points.enter().append('circle')
.style("fill", function (d) {return d.c;})
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', 1)
.merge(points)
.transition()
.attr('cx', function (d) {return d.x;})
.attr('cy', function (d) {return d.y;})
.attr('r', function (d) {return d.r;});
}
function color (paper, id, c) {
paper
.style("stroke-width", '1px')
.style('stroke', '#000')
.append('defs')
.append('radialGradient')
.attr('id', 'color' + id)
.attr('cx', '50%')
.attr('cy', '50%')
.attr('fx', '35%')
.attr('fy', '35%')
.selectAll('stop')
.data([
{color: "#fff", offset: '0%'},
{color: c, offset: '100%'}
])
.enter()
.append('stop')
.attr('offset', function (d) {
return d.offset;
})
.attr('stop-color', function (d) {
return d.color;
});
}
}());
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment