Continuous gradient key

An example of a continuous gradient key that can be adopted whenever there is a need for a gradient coloring scheme.

<html>
	<head>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@1.29.5/d3.js"></script>
<script src="https://d3js.org/d3.v2.js"></script>
		<style type="text/css">
			.axis text {
				font: 10px sans-serif;
			}

.axis line, .axis path {
				fill: none;
				stroke: #000;
				shape-rendering: crispEdges;
			}
svg{ padding-left: 50px;
}
		</style>

</head>
	<body>
		<script type="text/javascript">
			var w = 140, h = 400;

var key = d3.select("body").append("svg").attr("width", w).attr("height", h);

var legend = key.append("defs").append("svg:linearGradient").attr("id", "gradient").attr("x1", "100%").attr("y1", "0%").attr("x2", "100%").attr("y2", "100%").attr("spreadMethod", "pad");

legend.append("stop").attr("offset", "0%").attr("stop-color", "#B30000").attr("stop-opacity", 1);

legend.append("stop").attr("offset", "100%").attr("stop-color", "#FEE8c8").attr("stop-opacity", 1);

key.append("rect").attr("width", w - 100).attr("height", h - 100).style("fill", "url(#gradient)").attr("transform", "translate(0,10)");

var y = d3.scale.linear().range([300, 0]).domain([1, 100]);

var yAxis = d3.svg.axis().scale(y).orient("right");

key.append("g").attr("class", "y axis").attr("transform", "translate(41,10)").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 30).attr("dy", ".71em").style("text-anchor", "end").text("axis title");

</script>

Modified http://mbostock.github.com/d3/d3.js?1.27.1 to a secure url

Modified http://d3js.org/d3.v2.js to a secure url

https://mbostock.github.com/d3/d3.js?1.27.1

https://d3js.org/d3.v2.js