Colors

This page explains more on the color_range option, you can customize TreeSpider chart head colors to fit your taste by providing an array of colors to the color_range option, by default, TreeSpider uses a range of rainbow colors, how does it work? TreeSpider interpolates the provided colors using d3.interpolateRgbBasis() which produces a color range based on the provided colors, it then slice out a color based on the index of the tree data of the chart head, the index gets converted into percentage, like for example if the index of the tree data is 98 and the total length of the tree data is 200, the maths is going to be 98/200 which then gives the percentage and with this percentage it is used to get a slice from the interpolated color range and then the tree data's chart head get assigned the color slice, next let's check out how it really works.

For example lets use the 3 basic colors red, green, and blue.

const instance1 = new TreeSpider({
    targetContainer: '#container-1',
    color_range: ['red', '#00FF00', 'blue']
})

If you noticed the second color in the array is in hex format which is to show that the format of the color passed can be either or both hex and color names, if you run this you will get something similar to this working example

You'll see that in this example the chart head colors are between the 3 provided colors, red, green and blue, there are no yellow, purple and other colors that are not within the 3 colors, and you will also notice that there are color variants of the 3 colors, like dark red, lighter blue, and darker green and others, that's the amazing work of d3 color interpolation.

Let's try just 2 colors, this time let's try yellow and purple

const instance1 = new TreeSpider({
    targetContainer: '#container-2',
    color_range: ['yellow', 'purple']
})

If you run this it would look like the example below

As you can see the colors are only yellows and purples, that is how it works, and you can pass in any number of colors.