{"version":"1.0","type":"rich","title":"14 - Colour gradient for an area fill","description":"This example shows a line chart with an area fill whose color transitions from red to black to green as the y-value increases, providing a visual gradient tied to the data’s magnitude. The area is rendered as an SVG path using `d3.svg.area`, while the gradient is defined as a linearGradient element with multiple stop points. The code loads date and closing-value data from a CSV file, scales the axes with `d3.time.scale` and `d3.linear.scale`, and draws the axes via `d3.svg.axis`. The gradient’s color stops are explicitly set for specific vertical positions, creating the segmented color effect.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-e576c489ff146dde985d36d5c4c8ef46?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}