Color setting to IsolineGraph

Dec 3, 2010 at 6:22 AM


Is it possible to designate a color to IsolineGraph depend on data value?


    0 to 100  : RED , 101 to 200:GREEN, 201 to 300:BLUE , 301 to 400:YELLOW


Dec 3, 2010 at 2:53 PM

Let's move this discussion to

To change colors of isoline chart, use should change its palette. And in your case you should implement custom palette.

If your data are values exactly from 0 to 400, then your task will be easier: palette will look like this (pseudocode):

Color GetColor(doublle ratio) {

if(ratio < 0.25) return Colors.Red;

if(ratio < 0.5) return Colors.Green;



If you data lays not exactly from 0 to 400, you should use linear interpolation. Please try to implement this palette yourselft, probably creating a fork of D3Future project, and your solution will probably merged with D3's trunk.


Dec 3, 2010 at 4:02 PM
Edited Dec 3, 2010 at 4:03 PM

I will probably change the Ipalette interface so that all necessary data come directly into palette. PaletteContext will include global dataSource's min and max values, current value in coordinates of dataSource and currentValue interpolated in the segment [0..1].

Dec 6, 2010 at 12:26 AM

Hi Mikhail. Thanks again.

What I want to do is to classify data to several kinds.
Each kind have a color to display itself.
My data is 16bits unsigned.
I think I'm going to creat new Pallete.

Mar 22, 2011 at 10:12 AM

I have a similar query , but on the LineGraph..... please tell me how to set multiple color for a graph line? For example, At present my graph color is blue and in my y axis , I am displaying values. So In my graph curve, the graph above a certain limit (say 100) should be in red. Once the graph comes down below 100, then it should retain its old color( Blue). Is any feature exists in the D3 to support this?

Mar 22, 2011 at 1:39 PM

The easiest thing would be to have multiple line graphs.

Mar 23, 2011 at 8:34 AM
Edited Mar 23, 2011 at 8:35 AM

Well, the issue is that user would be able to modify the upper limit dynamically. Fox example, if I am highlighting the curve above 100 in red in my graph now, user should be able to change to above 200. So the solution you have given would end up in re drawing entire graph(s).

Mar 23, 2011 at 12:53 PM
Edited Mar 23, 2011 at 12:54 PM

Depending on your situation, that might be acceptable.

It sounds like you may need to do something like this: have two canvases in the grid area, each with the same line graph, but different colors. Then, set the heights of each such that for one only the bottom portion is visible, and for the other the top portion. To the user (hopefully) it looks like one line graph with different colors. Maybe you could use a grid to hold the canvases, then you could put in a splitter.

I don't know if this idea will work. Just trying to be helpful.