forked from treboresque's block: Circles Chartlet
Created
May 18, 2016 22:55
-
-
Save emilyinamillion/d4f9e613fb05d9106c90c945083069e9 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