d3.js different color for tons of nodes

Question

I would like to display nodes on svg. each node should be discriminated by color or shape.

I though that color made by random generator cannot be discriminated for my eyes. so I define maxium only 20 colors.

20 colors * 3 shape = 60 nodes

.. .selectAll('circles') .append('circle') // .append('rect') // .append('another shape')

should i slice data for each shape? if data length is variable, how to code that? each shape for data[0~n] made sooo long code and messy.

score 2 · Accepted Answer · edited May 23 '17 at 12:14

You can use function d3.svg.symbol() and color function - look at this plnkr for working demo. This question explains more about creating symbols dynamically - provide your key in where color(d.y) is and it will create same color for that type of symbol.

     var series = vis.selectAll("g.series") 
            .data(data, function(d, i) { return d.id; })
            .enter() 
            .append("svg:g")
            .classed("series", true);

        series.selectAll("g.point")
            .data(function(d, i) { return d.pts })
            .enter()
            .append("svg:path")
            .attr("transform", function(d, i) { return "translate(" + d.x + "," + d.y + ")"; })
            .attr("d", function(d,i, j) { return d3.svg.symbol().type(d3.svg.symbolTypes[j])(); })
 .style("fill", function(d) {
                            return color(d.y);
                        })

d3.js different color for tons of nodes

1 Answers1