| # d3v4 - Gradient Color Line Chart | |
| license: mit |
▶︎ What's this?: Line chart with a gradient to change the color of a line based on its value
▶︎ Reference: https://observablehq.com/@d3/gradient-encoding
[Gist] https://gist.github.com/Hirosaji/e34f1e2d45297193964e742c45fec027/
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| var margin = 10, | |
| width = 940 - margin, | |
| height = 480 - margin; | |
| var colorRange = ['red', 'gray', 'steelblue']; | |
| var color = d3.scaleLinear().range(colorRange).domain([1, 2, 3, 4, 5]); | |
| d3.csv("https://gist.githubusercontent.com/mbostock/eaaa1a380ba789930e5c0acb5a49deba/raw/ec254371f1559f6d5bd4594e1cd6cf6bbb0be1fb/temperature.csv", function (csvData) { | |
| var data = csvData.map(function(d, i){ | |
| return { "x": i, "y": parseFloat(d.temperature) }; | |
| }); | |
| var x = d3.scaleLinear().range([0, width]); | |
| var y = d3.scaleLinear().range([height, 0]); | |
| x.domain(d3.extent(data, function (d) { return d.x; })).nice; | |
| y.domain(d3.extent(data, function (d) { return d.y; })).nice; | |
| var line = d3.line() | |
| .x(function (d) { return x(d.x); }) | |
| .y(function (d) { return y(d.y); }) | |
| .curve(d3.curveStep); | |
| var svg = d3.select('#chart') | |
| .append('svg') | |
| .attr("width", width + (margin * 2)) | |
| .attr("height", height + (margin * 2)) | |
| .append("g") | |
| .attr("transform", "translate(" + (margin) + "," + (margin) + ")"); | |
| var linearGradient = svg.append("defs") | |
| .append("linearGradient") | |
| .attr("id", "linear-gradient") | |
| .attr("gradientTransform", "rotate(90)"); | |
| linearGradient.append("stop") | |
| .attr("offset", "0%") | |
| .attr("stop-color", color(1)); | |
| linearGradient.append("stop") | |
| .attr("offset", "50%") | |
| .attr("stop-color", color(2)); | |
| linearGradient.append("stop") | |
| .attr("offset", "100%") | |
| .attr("stop-color", color(3)); | |
| svg.append("path") | |
| .attr("d", line(data)) | |
| .attr("stroke-width", 2) | |
| .attr("stroke", "url(#linear-gradient)") | |
| .attr("fill", "none"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
