Domain to color mapping

[toaler]

I've defined the following colors:

var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#00BBBB", "#00CCCC", "#00DDDD", "#00EEEE", "#00FFFF", "#00BB5E", "#00CC66", "#00DD6F", "#00EE77", "#00FF84", "#BBBB00", "#CCCC00", "#DDDD00", "#EEEE00", "#FFFF00J", "#BB5E00", "#CC6600m", "#DD6F00", "#EE7700", "#FF8000", "#BB0000", "#CC0000", "#DD0000", "#EE0000", "#FF0000"];

My domain ranges from 0-100 and has a arbitrary number of data points.

I load the data like:

d3.select("body") .data(hosts.map(app_server_data_collector)) .enter().insert("div", ".bottom") .attr("class", "horizon") .call(context.horizon().colors(colors));

I want the colors in the last 25 entries of the index to be uniformly used for the numbers between 0-100. For example 0-4 would get #00BBBB, 96-100 to #FF0000, etc.

However every value greater than 10 is being assigned the max color value #FF0000.

What am I doing wrong?

[mbostock]

Did you tell Cubism that your domain ranges from 0-100 by setting horizon.scale?

[toaler]

Yah I have tried that as well:

var scale = d3.scale.linear().domain([0, 100]).range([0,100]);

d3.select("body").selectAll(".horizon") .data(hosts.map(app_server_data_collector)) .enter().insert("div", ".bottom") .attr("class", "horizon") .call(context.horizon().scale(scale).colors(colors));

[toaler]

I should have mentioned that the example above didn't work.

[toaler]

Versions of d3/cubism/etc are:

[toaler]

http://d3js.org/d3.v2.js?2.9.1 http://square.github.com/cubism/cubism.v1.js?1.0.0 http://code.jquery.com/jquery-1.8.2.min.js

[mbostock]

Er, sorry, I meant horizon.extent.

[toaler]

Cheers Mike.

I know I'm probably using cubism.js in a way it wasn't initially designed (i.e. static mode).

I'm trying to get the X axis label to start on Oct 9, 2012 and span 24 hour period to Oct, 10, 2012. My step size is 1 minute so 1440 data points.

I'm using:

var context = cubism.context() .serverDelay(new Date(2012, 10, 9) - Date.now()) .step(60e3) .size(1440) .stop();

Clearly how I'm setting serverDelay is wrong.

What do I need to get the x-axis lable to start on the 9th and span for 24 hours?

[mbostock]

One obvious mistake is that months are zero-based in JavaScript (yes, srsly); so October 9, 2012 is new Date(2012, 9, 9). Also I would look at my Cubism talk slides because they have an example using static data.

[toaler]

Made the suggested change and it started the timeline at the first second of the day. However on the far right it shows "Mon 29" which I think is Oct 29th. That would make the day to the right (the one that the graph starts on) Oct 28.

I'm not sure whats going on here.

var context = cubism.context() .serverDelay(new Date(2012, 9, 9) - Date.now()) .step(60e3) .size(1440) .stop();

[toaler]

Mike any idea on why my timeline start date is wrong (see last post)?

Also is there anyway to change the size of the data point?

[maslick]

@mbostock reading this thread, I may have a somewhat similar use case. Lets say I have a variable that represents person's heart rate. How can I plot three zones with 3 different colors:

1. 60 < hr < 80 => green
2. 81 < hr < 110 => yellow
3. 111 < hr < 200 => red

Is it possible to achieve? Thanks.

[maslick]

I am trying to do this but I get everything painted black:

var color_scale = d3.scale.linear().domain([0, 60, 80, 110, 200]).range(['blue', 'green', 'yellow', 'red']);
d3.select("#mygraph")
  .data(data)
  .enter()
  .attr('class', 'horizon')
  .call(context.horizon()
      .colors(color_scale)
      .extent([0, 200])
  );