Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
D3 Circular Legend
// Adapted from https://github.com/mbostock/d3/blob/master/src/svg/axis.js
var circleLegend = function() {
'use strict';
var scale,
orient = 'left',
tickPadding = 3,
tickExtend = 5,
tickArguments_ = [10],
tickValues = null,
tickFormat_,
ε = 1e-6;
function key(selection) {
selection.each(function() {
var g = d3.select(this);
g.attr('class', 'circle-legend');
// Stash a snapshot of the new scale, and retrieve the old snapshot.
var scale0 = this.__chart__ || scale,
scale1 = this.__chart__ = scale.copy();
// Ticks, or domain values for ordinal scales.
var ticks = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments_) : scale.domain()) : tickValues,
ticks = ticks.slice().filter(function(d) { return d > 0 }).sort(d3.descending),
tickFormat = tickFormat_ == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments_) : String) : tickFormat_,
tick = g.selectAll('.tick').data(ticks, scale1),
tickEnter = tick.enter().insert('g', '.tick').attr('class', 'tick').style('opacity', ε),
tickExit = d3.transition(tick.exit()).style('opacity', ε).remove(),
tickUpdate = d3.transition(tick.order()).style('opacity', 1),
tickTransform;
tickEnter.each(function(tick) {
var gg = d3.select(this);
var tickText = tickFormat(tick);
if (!tickText) return;
gg.append('circle')
.attr('cx', 0)
.attr('cy', 0)
.attr('r', scale(tick));
gg.append('line')
.attr('y1', 0)
.attr('y2', 0)
.attr('stroke', '#000')
.text(tick);
gg.append('text')
.attr('dy', '.35em')
.style('text-anchor', 'left' == orient ? 'end' : 'start')
.text(tickText);
});
tickEnter.call(d3_svg_legend, scale0);
tickUpdate.call(d3_svg_legend, scale1);
tickExit.call(d3_svg_legend, scale1);
function d3_svg_legend(selection, scale) {
selection.select('circle')
.attr('r', scale);
var x2 = scale(ticks[0]) + tickExtend;
var sign = 'left' == orient ? -1 : 1;
selection.select('text')
.attr('transform', 'translate(' + (x2 + tickPadding) * sign + ', 0)');
selection.select('line')
.attr('x1', function(d) { return scale(d) * sign })
.attr('x2', x2 * sign);
selection.attr('transform', function(d) { return 'translate(0,' + -scale(d) + ')'; });
}
});
}
key.scale = function(value) {
if (!arguments.length) return scale;
scale = value;
return key;
};
key.orient = function(value) {
if (!arguments.length) return orient;
orient = value;
return key;
};
key.ticks = function() {
if (!arguments.length) return tickArguments_;
tickArguments_ = arguments;
return key;
};
key.tickFormat = function(x) {
if (!arguments.length) return tickFormat_;
tickFormat_ = x;
return key;
};
key.tickValues = function(x) {
if (!arguments.length) return tickValues;
tickValues = x;
return key;
};
key.tickPadding = function(x) {
if (!arguments.length) return tickPadding;
tickPadding = +x;
return key;
};
key.tickExtend = function(x) {
if (!arguments.length) return tickExtend;
tickExtend = +x;
return key;
};
key.width = function(value) {
if (!arguments.length) return width;
width = value;
return key;
};
key.height = function(value) {
if (!arguments.length) return height;
height = value;
return key;
};
return key;
};
<!DOCTYPE html>
<html>
<head>
<title>d3 circle legend</title>
<style type="text/css">
body {
font: 10px sans-serif;
}
.legend {
font-size: 12px;
font-family: sans-serif;
}
.legend path,
.legend line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
opacity: 1;
}
.circle-legend line {
stroke: #000;
shape-rendering: crispEdges;
}
.circle-legend circle {
stroke: #ccc;
stroke-dasharray: 4, 2;
fill: none;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="circle-legend.js"></script>
<script type="text/javascript">
var margin = {top: 20, right: 100, bottom: 20, left: 100};
var width = 940 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
svg = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var scale = d3.scale.sqrt()
.domain([0, 1000000])
.range([0, 100])
// 1
var circleKey = circleLegend()
.scale(scale)
// Return falsey value from tickFormat to remove it
.tickFormat(function(d) {
return d % 3 == 0 ? d : null
})
svg.append('g')
.attr('transform', 'translate(100, 200)')
.call(circleKey)
// 2
scale.domain([0,1000000])
var formatSI = d3.format('s')
var formatCurrencySI = function(d) { return '$' + formatSI(d) }
var circleKey = circleLegend()
.scale(scale)
.tickValues([10000, 100000, 500000, 1000000])
.tickFormat(formatCurrencySI)
.tickPadding(10)
.orient("left") //default
svg.append('g')
.attr('transform', 'translate(400, 200)')
.call(circleKey)
// 3
scale.domain([0,10000])
var circleKey = circleLegend()
.scale(scale)
.orient("right")
.ticks(2)
svg.append('g')
.attr('transform', 'translate(100, 450)')
.call(circleKey)
// 4
scale
.range([0, 100])
.domain([0, 100000])
var circleKey = circleLegend()
.scale(scale)
.tickExtend(15)
.orient("right")
var g = svg.append('g')
.attr('transform', 'translate(400, 450)')
function update(){
var max = sigFigs(Math.random() * 1e6, 1)
scale.domain([0, max])
circleKey.tickValues([max/100, max/10, max/2, max])
g.transition()
.duration(400)
.call(circleKey)
setTimeout(update, 1000)
}
update()
function sigFigs(n, sig) {
var mult = Math.pow(10,
sig - Math.floor(Math.log(n) / Math.LN10) - 1);
return Math.round(n * mult) / mult;
}
</script>
</body>
</html>
@danse
Copy link

danse commented Feb 7, 2013

good job, but could you indent the html with four spaces instead of tab? sorry, it's just the first thing that my eye notices!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment