I'm currently working on creating a D3 graph that features a shaded area in the middle. The top part of the shaded region aligns with the line graph.
For reference, the data structure I'm using is as follows:
line = [
{x: 0, y:1},
{x: 1, y:2},
{x: 2, y:4},
{x: 3, y:6},
{x: 4, y:3},
{x: 5, y:1}]
The graph uses a 'cardinal' interpolation function:
g = d3.svg.line()
.interpolate('cardinal')
To shade the area under the graph, I'm creating a d3.svg.area() and providing it with the corresponding data for the shaded area, such as (to shade between x=2 and x=4):
area = [
{x: 2, y:4},
{x: 3, y:6},
{x: 4, y:3}]
a = d3.svg.area()
.interpolate('cardinal')
My challenge lies in shading the area under the graph between 1.5 and 3.5, for which I'm unsure of the values after the 'cardinal' interpolation. I am trying to figure out how to either a) apply a cardinal interpolation over the data and then extract the values for 1.5 and 3.5 or b) retrieve the line data from d3 to construct the data for the area graph.
Regarding option a), I've explored d3.interpolate, but it seems distinct from d3.line.interpolate() and doesn't allow the passing of an interpolation method.
As for option b), I'm struggling to find a way to extract the data from the line post-interpolation, as no documentation within D3 covers this.