Skip to content

Instantly share code, notes, and snippets.

@sverhoeven

sverhoeven/index.html

Last active December 28, 2015 04:59
Show Gist options
  • Save sverhoeven/7446829 to your computer and use it in GitHub Desktop.
Save sverhoeven/7446829 to your computer and use it in GitHub Desktop.
Download ZIP
color legend
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var w = 50;
var h = 200;
var svg = d3.select("body").append('svg')
.attr('width', w)
.attr('height', h)
;
var gradient = svg.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%")
.attr("y1", "100%")
.attr("x2", "0%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", 'rgb(0,55,0)')
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", 'rgb(0,255,0)')
.attr("stop-opacity", 1);
svg.append("rect")
.attr("width", w)
.attr("height", h)
.style("fill", "url(#gradient)");
var g = svg.append('g');
g.append("text")
.attr('y', 185)
.attr('x', 15)
.style('fill', 'white')
.text('Low');
g.append("text")
.attr('y', 15)
.attr('x', 15)
.text('High');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment