Customized chart using d3 in react native

Question

My requirement id to draw a chart as just shown below in react native.

In my research I found d3 is the best suitable tool to create graphs.

Dataset was added like below and its working perfectly with react native.

Any idea how can I make the data set colored as shown below (when it comes to different regions the color changed).

Answer 1

I followed the approach mentioned in the block linked by Mark.

1. Define a colorscale
2. Define a array of value over which you want to shade the line/area
3. Convert those values into percentage based on height and apply a linear gradient using those percentages
4. Use the same scale for path and area

Here is a link to an example I created.

Answer 2

You start by changing the stroke style for the line

.line {
  fill: none;
  stroke: url(#temperature-gradient); // change here
  stroke-width: 1.5px;
}

Then add the temperature-gradient svg:

svg.append("linearGradient")
  .attr("id", "temperature-gradient")
  .attr("gradientUnits", "userSpaceOnUse")
  .attr("x1", 0).attr("y1", y(0)) // 0 as the min index
  .attr("x2", 0).attr("y2", y(500)) // 500 as the max index
.selectAll("stop")
  .data([
    {offset: "0%", color: "red"}, // red for low index
    {offset: "30%", color: "gray"},  // index 150 for grey color
    {offset: "100%", color: "stealblue"}   // to steal blue for index above 150
  ])
.enter().append("stop")
  .attr("offset", function(d) { return d.offset; })
  .attr("stop-color", function(d) { return d.color; });