Skip to content

Instantly share code, notes, and snippets.

@mxfh

mxfh/circle-legend.js

Forked from aubergene/circle-legend.js
Last active December 16, 2015 03:14
Show Gist options
  • Save mxfh/6285470954cf4d207fd0 to your computer and use it in GitHub Desktop.
Save mxfh/6285470954cf4d207fd0 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
// forked from http://bl.ocks.org/aubergene/4723857
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
scale.domain([0,1000000]);
var formatSI = d3.format('s');
var formatCurrencySI = function(d) { return formatSI(d) + ' people'}
var circleKey = circleLegend()
.scale(scale)
.tickValues([500000, 1000000, 1500000, 2000000])
.tickFormat(formatCurrencySI)
.tickPadding(10)
.orient("left"); //default
svg.append('g')
.attr('transform', 'translate(150, 300)')
.call(circleKey);
// 2
// this behaves not as above
scale.domain([500000, 1000000, 1500000, 2000000]);
scale.range([25, 50, 75, 100]);
var circleKey2 = circleLegend()
.scale(scale)
.tickValues([500000, 1000000, 1500000, 2000000])
.tickFormat(formatCurrencySI)
.tickPadding(10)
.orient("left"); //default
svg.append('g')
.attr('transform', 'translate(500, 300)')
.call(circleKey2);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment