function SvgLegend(root, cfg, clicked) {
    'use strict';

    var shapes = cfg.symbols;

    var data = d3.map(shapes).entries().filter(function (d) {
        return d.key !== 'undefined'
    });

    data.forEach(function (v) {
        v.classed = 'symbol ' + v.key;
        v.symbol = true;
    });

    data = data.concat([
        {key: 'cool-line', value: 'circle', path: 'M-10,0 L10,0'},
        {key: 'hot-line', value: 'circle', path: 'M-10,0 L10,0'},
        {key: 'balanced-line', value: 'circle', path: 'M-10,0 L10,0'},
        {key: 'cool-point', value: 'circle', classed: 'cool-point', off: true},
        {key: 'hot-point', value: 'circle', classed: 'hot-point', off: true},
        {key: 'balanced-point', value: 'circle', classed: 'balanced-point', off: true},
        {key: 'graticule', value: 'circle', path: 'M-8.25,0 L8.25,0', off: true},
        {key: 'map', value: 'square', classed: 'map'}
    ]);

    var l = root.selectAll('legend').data(data);

    var g = l.enter().append('g')
        .attr('class', 'legend')
        .attr('transform', function (d, i) {
            return 'translate(' + [0, i * cfg.lineHeight] + ')';
        })
        .style('opacity', function (d) {
            return d.off ? 0.25 : null;
        })
        .on('click', function (d) {
            d.off = !d.off;
            d3.select(this).style('opacity', d.off ? 0.25 : null);
            clicked(d);
        });

    g.append('path')
        .attr('class', function (d) {
            return d.classed || d.key;
        })
        .style('stroke-width', function (d) {
            return (d.key === 'map') ? 1.5 : ((d.path || d.classed) && !d.symbol) ? 2 : 1;
        })
        .attr('transform', 'translate(' + [cfg.fontSize / 2, cfg.lineMid] + ')')
        .attr('d', function (d) {
            return d.path || d3.svg.symbol().size(cfg.sizes[d.key]).type(d.value)();
        });

    g.append('text')
        .attr('dy', cfg.fontSize)
        .attr('dx', cfg.fontSize + cfg.lineMid)
        .text(function (d) {
            return d.key.replace('-', ' ');
        });

    var lookShapes = {};
    var lookFilter = {};

    data.forEach(function (d) {
        lookFilter[d.key] = d;

        if (shapes[d.key]) {
            lookShapes[d.key] = d;
        }
    });

    return {
        data: data,
        lookShapes: lookShapes,
        lookFilter: lookFilter
    };
}