Legend to D3.js scatterplot

Question

I have created a scatter chart with multiple y-axis. I need to create a legend to indicate the scattering. I have created a fiddle of the same in the link provided in comments. Please help me out.

Answer 1

The reason is that in your code colors is an object, not an array.

D3 expects the data that is passed to it to be an array:

I've updated your fiddle - see http://jsfiddle.net/y3LEt/3/

The critical updates are:

var colors =    [["Local", "#377EB8"],
                    ["Global", "#4DAF4A"]];

legendRect
    .attr("y", function(d, i) {
        return i * 20;
    })
    .style("fill", function(d) {
        return d[1];
    });