score:0

There are several ways to do this:

  1. Replace line 39 var fill = d3.scale.category20(); with:
var fill = new Map([
  [0, '#3182bd'],
  [1, '#9ecae1'],
  [2, '#fd8d3c'],
  [3, '#fdae6b'],
  [4, '#31a354']
]);

and lines 98 fill(d.id) with this (lines 96-98 shown):

  n.append("circle")
      .attr("r",  function(d) { return d.r; })
      .style("fill", function(d) { return fill.get(d.id); })

(you could also use an object literal var fill = {...} or an array var fill = [...] and access that with fill[d.id])

https://codepen.io/Alexander9111/pen/rNjEKEP

  1. You could write a new fill function:
var fill = (id) => {
  const arr = [
    '#3182bd',
    '#9ecae1',
    '#fd8d3c',
    '#fdae6b',
    '#31a354'
  ];
  const idx = parseInt(id) % arr.length;
  return arr[idx];
};

and your line 98 would stay the same (line(d.id))

https://codepen.io/Alexander9111/pen/mdRZjeW

  1. You could possibly use CSS classes: https://codepen.io/Alexander9111/pen/oNBrMez
  2. (My preferred approach, keeping everything data-driven) You could modify your data structure to have the color defined there: https://codepen.io/Alexander9111/pen/jOyjpGX

Related Query

More Query from same tag