Last active
August 19, 2016 00:42
-
-
Save treboresque/0f01e42fb3c9268d7105 to your computer and use it in GitHub Desktop.
Circles Chartlet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html > | |
<head> | |
<title>Circles</title> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<div class="chart"></div> | |
</body> | |
<script src="http://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
<script src="https://rawgit.com/twitter/d3kit/v0.1.0/dist/d3kit.min.js" type="text/javascript"></script> | |
<script src="main.js" type="text/javascript"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.scale.linear(); | |
var yScale = d3.scale.linear(); | |
var radiusScale = d3.scale.linear() | |
.range([MIN_RADIUS, MAX_RADIUS]); | |
var colorScale = d3.scale.category20(); | |
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 || colorScale(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', chartlet.getDispatcher().circleClicked); | |
done(selection); | |
} | |
function update(selection, done) { | |
selection.select('circle') | |
.transition() | |
.attr('fill', chartlet.property('color')) | |
.attr('r', chartlet.property('radius')) | |
.each('end', done); | |
} | |
function exit(selection, done) { | |
selection.select('circle') | |
.transition() | |
.attr('r', 0) | |
.remove() | |
.each('end', done); | |
} | |
return chartlet; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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