Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active February 26, 2024 20:07
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HarryStevens/6eb89487fc99ad016723b901cbd57fde to your computer and use it in GitHub Desktop.
Save HarryStevens/6eb89487fc99ad016723b901cbd57fde to your computer and use it in GitHub Desktop.
Download ZIP
Gradient Legend
Raw
.block
license: gpl-3.0
height: 32
border: no
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data = [{"color":"#000004","value":0},{"color":"#02020c","value":5},{"color":"#050417","value":10},{"color":"#0a0722","value":15},{"color":"#10092d","value":20},{"color":"#160b39","value":25},{"color":"#1e0c45","value":30},{"color":"#260c51","value":35},{"color":"#2f0a5b","value":40},{"color":"#380962","value":45},{"color":"#400a67","value":50},{"color":"#490b6a","value":55},{"color":"#510e6c","value":60},{"color":"#59106e","value":65},{"color":"#61136e","value":70},{"color":"#69166e","value":75},{"color":"#71196e","value":80},{"color":"#781c6d","value":85},{"color":"#801f6c","value":90},{"color":"#88226a","value":95},{"color":"#902568","value":100},{"color":"#982766","value":105},{"color":"#a02a63","value":110},{"color":"#a82e5f","value":115},{"color":"#b0315b","value":120},{"color":"#b73557","value":125},{"color":"#bf3952","value":130},{"color":"#c63d4d","value":135},{"color":"#cc4248","value":140},{"color":"#d34743","value":145},{"color":"#d94d3d","value":150},{"color":"#df5337","value":155},{"color":"#e45a31","value":160},{"color":"#e9612b","value":165},{"color":"#ed6925","value":170},{"color":"#f1711f","value":175},{"color":"#f47918","value":180},{"color":"#f78212","value":185},{"color":"#f98b0b","value":190},{"color":"#fa9407","value":195},{"color":"#fb9d07","value":200},{"color":"#fca60c","value":205},{"color":"#fcb014","value":210},{"color":"#fbba1f","value":215},{"color":"#fac42a","value":220},{"color":"#f8cd37","value":225},{"color":"#f6d746","value":230},{"color":"#f4e156","value":235},{"color":"#f2ea69","value":240},{"color":"#f2f27d","value":245},{"color":"#f5f992","value":250}];
var extent = d3.extent(data, d => d.value);
var padding = 9;
var width = 320;
var innerWidth = width - (padding * 2);
var barHeight = 8;
var height = 28;
var xScale = d3.scaleLinear()
.range([0, innerWidth])
.domain(extent);
var xTicks = data.filter(f => f.value % 50 === 0).map(d => d.value);
var xAxis = d3.axisBottom(xScale)
.tickSize(barHeight * 2)
.tickValues(xTicks);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var g = svg.append("g").attr("transform", "translate(" + padding + ", 0)");
var defs = svg.append("defs");
var linearGradient = defs.append("linearGradient").attr("id", "myGradient");
linearGradient.selectAll("stop")
.data(data)
.enter().append("stop")
.attr("offset", d => ((d.value - extent[0]) / (extent[1] - extent[0]) * 100) + "%")
.attr("stop-color", d => d.color);
g.append("rect")
.attr("width", innerWidth)
.attr("height", barHeight)
.style("fill", "url(#myGradient)");
g.append("g")
.call(xAxis)
.select(".domain").remove();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment