Geek asks and answers

D3.js line and area graph - you want to add an additional line defined by two points and representing a threshold / minimum value (for easy viewing)

I have a working visualization d3.js, which shows the rate of data return as a composite graph of the line and area (http://anf.ucsd.edu/tools/data_return_rates/).

The x axis is the time, the y axis is the percentage of data return. You can click the various buttons at the top of the visualization to switch between data sets (only parsed JSON files).

In addition to the raw data graph, I want to add a simple line that defines the minimum required data return rate (85%). This is just a visual aid to help users determine if the return rate exceeds this minimum / threshold value. I compute the x-values ​​(time) for this “minimum” (only two points) using the d3.min () and d3.max () methods in the dataset. The y values ​​are integers (85):

var min_data_return = [ 
      {   
      "readable_time": d3.min(data, function(d) { return d.readable_time; }),
      "value": 85
      },  
      {   
      "readable_time": d3.max(data, function(d) { return d.readable_time; }),
      "value": 85
      }   
  ]

(I am doing some other conversions to make sure all the graphs are in order)

Now, before I want this line of minima to add to the visualization, I just did the following to create the area and graph of the line that worked:

svg.select("path.area").data([data]);
svg.select("path.line").data([data]);

There is another build code in the script:

svg.select("path.area").attr("d", area);
svg.select("path.line").attr("d", line);

d3.js, , , , , , :

svg.select("path.line").data([data]);

:

svg.select("path.line").data([data, min_data_return]);

. . , -, min_data_return.

, ?

: https://gist.github.com/2662793

Gist 133 - 140 ( OPTION). , . script Gist .

!

+3
1

, , , :

svg.append("svg:path")
    .attr("class", "minline")
    .attr("clip-path", "url(#clip)");   
...
svg.select("path.minline").data([min_data_return]);
...
svg.select("path.minline").attr("d", line);

JSfiddle : http://jsfiddle.net/qAHC2/6/

+5

More articles:


All Articles