Skip to content

Instantly share code, notes, and snippets.

@aubergene

aubergene/circle-legend.js

Last active December 17, 2019 20:28
Show Gist options
  • Save aubergene/4723857 to your computer and use it in GitHub Desktop.
Save aubergene/4723857 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Circular Legend
Raw
circle-legend.js
// 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;
};
Raw
index.html
<!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