Skip to content

Instantly share code, notes, and snippets.

@trebor

trebor/index.html

Forked from treboresque/index.html
Last active September 2, 2016 19:14
Show Gist options
  • Save trebor/3817668ce6a358a685cab29907c0f52f to your computer and use it in GitHub Desktop.
Save trebor/3817668ce6a358a685cab29907c0f52f to your computer and use it in GitHub Desktop.
Download ZIP
Circles Chartlet
Raw
index.html
<!DOCTYPE html>
<html >
<head>
<title>Circles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chart"></div>
</body>
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/twitter/d3kit/v2.0.0/dist/d3kit.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</html>
Raw
main.js
var MIN_RADIUS = 20;
var MAX_RADIUS = 50;
var DEFAULT_OPTIONS = {
margin: {top: MAX_RADIUS, right: MAX_RADIUS, bottom: MAX_RADIUS, left: MAX_RADIUS}
};
var xScale = d3.scaleLinear();
var yScale = d3.scaleLinear();
var radiusScale = d3.scaleLinear()
.range([MIN_RADIUS, MAX_RADIUS]);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var data = d3.range(20).map(function(i) {
return {size: i, x: Math.random(), y: Math.random()};
});
// create and configure the circle charlet
var circles = CircleChartlet()
.property('radius', function(d, i) {return radiusScale(d.size);})
.property('color', function(d, i) {return d.customColor || color(i);})
.on('circleClicked', onClicked);
// create chart
var chart = new d3Kit.Skeleton('.chart', DEFAULT_OPTIONS)
.autoResize('both')
.on('resize', onResize)
.on('data', onData);
chart.resizeToFitContainer();
chart.data(data);
// cope with data change
function onData(data) {
if (chart.hasData()) {
radiusScale.domain(d3.extent(data, function(d) {return d.size;}));
var nodes = chart.getRootG().selectAll('g.node')
.data(data);
nodes.enter()
.append('g')
.classed('node', true)
.call(circles.enter);
nodes.exit()
.call(circles.exit);
onResize();
}
}
// handle resize
function onResize() {
xScale.range([0, chart.getInnerWidth ()]);
yScale.range([0, chart.getInnerHeight()]);
chart.getRootG().selectAll('.node')
.attr('transform', function(d) {return 'translate(' + [xScale(d.x), yScale(d.y)] + ')';})
.call(circles.update);
}
// toggle circles back when clicked
function onClicked(d) {
d.customColor = d.customColor ? null : 'black';
chart.getRootG().selectAll('.node').call(circles.update);
}
// circle chartlet constructor
function CircleChartlet() {
var events = ['circleClicked'];
var chartlet = d3Kit.Chartlet(enter, update, exit, events);
function enter(selection, done) {
selection
.append('circle')
.attr('r', 0)
.attr('fill', 'white')
.on('click', function(d) {
chartlet.getDispatcher().call('circleClicked', this, d);
});
done(selection);
}
function update(selection, done) {
selection.select('circle')
.transition()
.attr('fill', chartlet.property('color'))
.attr('r', chartlet.property('radius'))
.on('end', done);
}
function exit(selection, done) {
selection.select('circle')
.transition()
.attr('r', 0)
.remove()
.on('end', done);
}
return chartlet;
};
Raw
style.css
html {
color: #444;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background: white;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
.chart {
position: absolute;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment