Search code examples
dc.jscrossfilter

dc.js Scatter Chart with dot color based on counts

I am having a hard time trying to accomplish something simple. I need to display a XY scatter plot in DC js charts. However, I may have several points with the same XY values. In this case, the color of a XY point must change according to a function that receives as input the number of repetitions.

Ex:

X - Y

1 - 9

1 - 9

1 - 9

1 - 4

2 - 10

3 - 5

1 - 4

Point 1 - 9 appears 3 times... Red Color

Is it possible to implement something like this?

Solution

  • Sure, just use the colorAccessor to assign colors based on the value. (By default it is colored based on the series.)

    Additionally, you'll probably want to specify the color scale so that you have control about the value to color mapping. Below we map 0-4 to yellow, blue, purple, red, orange.

    scatterPlot
  .colorAccessor(function(kv) { return kv.value; })
  .colors(d3.scale.ordinal().domain(d3.range(5)).range(['yellow', 'blue', 'purple', 'red', 'orange']))