score:3

Accepted answer

the problem is you're not using the data bound to each rectangle, but instead looping over all the colors each time. try something like this:

svg.selectall("rect")
    .data(colore.range()).enter()
    .append("rect")
    .attr("fill", function (color){ return color; })
    .attr("x", function (color, index){ return (index * 12) + "px"; })
    .attr("y", margin - 8 + "px")
    .attr("width", 8 + "px")
    .attr("height", 8 + "px");

the key thing to note is that if you can pass an attribute a function that takes an object and an index as arguments that will then get applied to each datum. using this approach, i get this:

example output


Related Query