Skip to content

Instantly share code, notes, and snippets.

@EfratVil

EfratVil/index.html

Last active July 16, 2022 11:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EfratVil/c022f78e258d869f5ebae54d7fc20aed to your computer and use it in GitHub Desktop.
Save EfratVil/c022f78e258d869f5ebae54d7fc20aed to your computer and use it in GitHub Desktop.
Download ZIP
Linear Gradient Along Line Path
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<body>
<script>
var margin = 0,
width = 600 - margin,
height = 200 - margin;
var colorRange = ['#d7191c', '#fdae61', '#ffffbf', '#a6d96a', '#1a9641'] //['#ffffcc', '#a1dab4', '#41b6c4', '#2c7fb8', '#253494']
var color = d3.scaleLinear().range(colorRange).domain([1, 2, 3, 4, 5]);
var data = [ { "x": 10, "y": 20}, { "x": 20, "y": 60},
{ "x": 30, "y": 50}, { "x": 40, "y": 130},
{ "x": 50, "y": 30 }, { "x": 60, "y": 170 },
{ "x": 70, "y": 24 }, { "x": 80, "y": 130 },
{ "x": 90, "y": 70 }, { "x": 100, "y": 180 }];
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.curveCardinal);
var svg = d3.select('body')
.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", "25%")
.attr("stop-color", color(2));
linearGradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", color(3));
linearGradient.append("stop")
.attr("offset", "75%")
.attr("stop-color", color(4));
linearGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", color(5));
svg.append("path")
.attr("d", line(data))
.attr("stroke-width", 6)
.attr("stroke", "url(#linear-gradient)")
.attr("fill", "none");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment