0

Here a link with fantastic description of sparklines implementation using d3.js

I'm doing something similar but I need to define a normal range for each sparkline, like here on mockup :

enter image description here

This grey bar is hard coded now. The meaning of this bar is to represent "green" range of data. For example from 0 to 1. Everything that is less or more then this range should be not in that bar.

I have such domain in my js file:

    y.domain(
    d3.extent(data, function (d) {
    return d.y;
})

and this is how i`m drawing my greybar:

    var baseline = graph.append("rect")
    .attr("x", 0)
    .attr("y", y(2))
    .attr("width", 100)
    .attr("height", y(3))
    .attr("class", "rect_");

But when I'll give for this block of code my normal range [0,1] 

     var baseline = graph.append("rect")
    .attr("x", 0)
    .attr("y", y(0))
    .attr("width", 100)
    .attr("height", y(1))
    .attr("class", "rect_");

I'm getting this :

enter image description here

I'm afraid it`s complete incorrect way , need someone help, thanx!

Edd
  • 665
  • 1
  • 5
  • 13
  • How is it not working? Is the rect not appearing at the position where y is 0? – Lars Kotthoff Mar 26 '14 at 13:30
  • you can see if the input data is [2,3] - the result is much better :) but real [0.1] data is awful – Edd Mar 26 '14 at 13:39
  • I'm not sure if I understand. It looks to me like it's putting the `rect` exactly where you're asking it to put it. – Lars Kotthoff Mar 26 '14 at 13:47
  • yep , but there is need to put this rect like on first mockup , but using real normal range – Edd Mar 26 '14 at 13:59
  • So is your question about how to determine the "normal range"? – Lars Kotthoff Mar 26 '14 at 14:03
  • basically yes, if I have two diagrams , one have NR [0,3] , other [0,1] – Edd Mar 26 '14 at 14:05
  • Well if you know the normal range then the `y` position would be the midpoint between the extremes and the `height` half the range. – Lars Kotthoff Mar 26 '14 at 14:19
  • yes, but i should not be coupled with midpoint, normal range can be changed later, so i just need to convert my normal range to coordinates. If i have values for line like : 0.1, 0.3, 0.5 , 1 , -2 - only 0.1, 0.3, 0.5 should be in normal range bar , and others - outer – Edd Mar 26 '14 at 14:34
  • I don't understand what you mean. Would the normal range in your example not be [0.1, 0.5]? – Lars Kotthoff Mar 26 '14 at 14:38
  • 0.1 0.5 0.3 - data that is in normal range normal range is all numbers from 0 to 0.99 – Edd Mar 26 '14 at 14:49
  • I still don't know what you mean. – Lars Kotthoff Mar 26 '14 at 14:51
  • You have sparkline of human temperature, and you have measurements of your temperature for a month. Normal range for human temperature is from 35.8(c) to 36.8(c). Suppose for a week you have temperature from 37 to 38 , this is not normal, so it must be shown out of normal range, like in first picture i've attached. maybe now its clearer :) – Edd Mar 26 '14 at 15:03
  • I don't see the problem with determining the position and dimensions of the rectangle. In this case, y = 36.3 and height = 1. – Lars Kotthoff Mar 26 '14 at 15:39
  • how it will be in java script code? thanx – Edd Mar 26 '14 at 15:58
  • `var y = (max - min)/2, height = max - min;` – Lars Kotthoff Mar 26 '14 at 16:05
  • for range [0, 1] bar is drawing well, but [0,3] - bar doesnt draw – Edd Mar 26 '14 at 16:42
  • It would help if you could provide a complete working example that demonstrates the problem. – Lars Kotthoff Mar 26 '14 at 16:49

0 Answers0