Skip to content

Instantly share code, notes, and snippets.

@rouge8

rouge8/README.md

Last active December 9, 2015 22:48
Show Gist options
  • Save rouge8/4339885 to your computer and use it in GitHub Desktop.
Save rouge8/4339885 to your computer and use it in GitHub Desktop.
Download ZIP
Circles
Raw
README.md

Just some random circles.

Click to make them disappear! Or add more!

Raw
circles.js
function randomCircleChart() {
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 960,
height = 500,
xValue = function(d) { return d.x; },
yValue = function(d) { return d.y; },
rValue = function(d) { return d.r; },
xScale = d3.scale.linear(),
yScale = d3.scale.linear(),
rScale = d3.scale.linear().range([5, 20]),
color = function(i) { return 'steelblue'; },
parent;
function chart(selection) {
selection.each(function(data) {
// update xScale
xScale
.domain([0, 1])
.range([0, width - margin.left - margin.right]);
// update y-scale
yScale
.domain([0, 1])
.range([height - margin.top - margin.bottom - d3.max(rScale.range()), 0]);
// update r-scale
rScale
.domain([0, 1]);
var svg = d3.select(this).append('svg');
var g = svg.append('g');
// otherwise, create skeletal chart
svg .attr('width', width)
.attr('height', height);
g.attr('transform', 'translate(' + [margin.left, margin.top ] + ')');
var circle = g.selectAll('circle')
.data(data)
.enter().append('circle')
.call(updateSelection);
parent = g;
});
}
function updateSelection(selection) {
selection
.attr('cx', function(d, i) { return xScale(xValue(d)); })
.attr('cy', function(d, i) { return yScale(yValue(d)); })
.attr('r', function(d, i) { return rScale(rValue(d)); })
.style('fill', function(d, i) { return color(i); })
.style('fill-opacity', 1.0)
.on('click', function(d, i) {
d3.select(this)
.on('click', function() {})
.transition()
.duration(1250)
.style('fill-opacity', 0)
.attr('r', function(d, i) { return rScale(rValue(d)) * 4; })
.remove();
});
}
chart.addCircle = function(d) {
var circle = parent.selectAll('circle');
var _ = circle.data();
_.push(d);
circle.data(_);
circle
.data(_)
.enter().append('circle')
.call(updateSelection);
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.color = function(_) {
if (!arguments.length) return color;
color = _;
return chart;
};
return chart;
}
function randomCircle() {
return {x: Math.random(), y: Math.random(), r: Math.random()};
}
var chart = randomCircleChart()
.color(d3.scale.category20());
d3.select('#circles')
.datum([])
.call(chart);
for (var i = 0; i < 15; i++) {
chart.addCircle(randomCircle());
}
d3.select('#add-random-circle')
.on('click', function() { chart.addCircle(randomCircle()); });
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>/* CSS */</style>
<body>
<button id="add-random-circle">Add a circle!</button>
<div id="circles">
</div>
<script src="//d3js.org/d3.v3.js"></script>
<script src="circles.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment