Draw a Scatter Plot with different shapes and colors

[augustindelaf]

I have a issue when I draw the points to form a Scatter plot.

I managed to drawn points using this piece of code :

var symbolGenerator = d3.symbol()
	                .type(d3.symbolTriangle)
                        .size(50);
        var pathData = symbolGenerator();
            d3.select('g')
              .selectAll('path')
              .data(dataset)
              .enter()
              .append('path')
              .attr('transform', function(d)
              {
                return 'translate(' + d + ')';
              })
              .attr('d', pathData);

The dataset objet has the following structure (from the console of Chrome) : 

(2) [284.59006809392395, 187.71827199184258]
   0: 284.59006809392395
   1: 187.71827199184258
   length: 2__proto__: Array(0)
(2) [281.0531355568319, 191.9381025269946]
   0: 281.0531355568319
   1: 191.9381025269946
   length: 2__proto__: Array(0)
(2) [277.96866725586324, 191.98163348042283]
   0: 277.96866725586324
   1: 191.98163348042283
   length: 2__proto__: Array(0)
(2) [275.51203017895375, 92.07609526839624]
   0: 275.51203017895375
   1: 92.07609526839624
   length: 2__proto__: Array(0)
(2) [274.7791280240074, 200.0082897287657]
   0: 274.77912802400741: 200.0082897287657
   length: 2__proto__: Array(0)
(2) [268.5760456771269, 178.96484922697573]
   0: 268.5760456771269
   1: 178.96484922697573
   length: 2__proto__: Array(0)
(2) [257.6277264085918, 122.41861595825438]
   0: 257.6277264085918
   1: 122.41861595825438
   length: 2__proto__: Array(0)

It was my starting code.

But I need to change the shape of each point drawn (by looping in d3.symbols) and, if the the basics shapes are all used (I have ten points instead of seven, for example), the drawing restarts a loop in d3.symbols with another color.
All the points, wtith the correct shape and color are to be displayed in a legend.

I think the piece of code I use is a dead end to manage this.

Thank in advance.

Best regards.