Line chart / graph with incorrect threshold field

The graph shown in your sample is actually much simpler than the linked example; you don't need to create a clipping path for this, and you don't need to draw the line twice with two different colors.

To paint a colored background, use the path region generator created with d3.svg.area()

. Set an accessor y0

to retrieve your minimum value for each dataset point and an accessor y1

to retrieve the maximum value.

Then draw the top vertex of the line like a normal line graph using a path generator d3.svg.line()

.

A working example adapted from the scripts in the comments: http://jsfiddle.net/h45CD/12/
(Note: I commented out half of the dataset since the "year" values ​​were repeated, not sure what this was supposed to represent.)

Key code:

// Define the value line path generator
var line = d3.svg.line()                        
    .x( function(d) { return x(d.year); } ) 
    .y( function(d) { return y(d.temp); } );

// Define the area path generator
var area = d3.svg.area()
    .x(  function(d) {  return x(d.year); } )
    .y0( function(d) { return y(d.min); } )
    .y1( function(d) { return y(d.max); } );

/* ... */

// Add the background area showing the historic range
svg.append("path")
   .datum(data)
   .attr("class", "historicRange")
   .attr("d", area);

// Add the value line 
svg.append("path") 
    .datum(data)
    .attr("class", "dataline")
    .attr("d", line);

      

        
        
        
      

    

Edit based on comments

If you want a line that changes color based on historical values, as opposed to a line drawn over the top of the background range, the most straightforward solution is probably to create an element <pattern>

made up of different colored areas and use that to iron the line of values ...

You need to familiarize yourself with the various parameters of the template element. This MDN tutorial has a good introduction, or you can dive into the full W3 features .

In this situation, we want the pattern to be sized and positioned relative to the coordinate system used to draw the line, regardless of the size or shape of the line itself. This means that we will install both patternUnits

and patternContentUnits

how userSpaceOnUse

. height

and the width

template will be the height and width of the plot area.

Within the picture, we will draw an area that represents the range of the maximum min, but we also need to draw separate areas with different colors for values ​​above the maximum and values ​​below the min. We can use the same area generator for each, but each time we need to change the accessor functions y0 / y1.

Key code:

// Add the pattern showing the historic range
var pattern =  defs.append("pattern")
    .datum(data) //add the data to the <pattern> element
                //so it will be inherited by each <path> we append
    .attr({
        "patternUnits":"userSpaceOnUse",
        "patternContentUnits":"userSpaceOnUse",
        "width": width,
        "height": height
    })
    .attr("id", "strokePattern");

pattern.append("path")
   .attr("class", "historicRange between")
   .attr("d", area);

pattern.append("path")
   .attr("class", "historicRange above")
   .attr("d", area.y1( 0 )
                  .y0( function(d){return y(d.max);} )
        );

pattern.append("path")
   .attr("class", "historicRange below")
   .attr("d", area.y1( function(d){return y(d.min);}  )
                  .y0( height )
        );

// Add the value line 
plot.append("path")             
    .datum(data)            
    .attr("class", "dataline")  
    .attr("d", line)
    .style("stroke", "url(#strokePattern)");        

      

        
        
        
      

    

Working example: http://jsfiddle.net/h45CD/14/