Built with blockbuilder.org
Inspired by Color hue
license: mit |
Built with blockbuilder.org
Inspired by Color hue
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-color.v1.min.js"></script> | |
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<title>Color luminance and saturation</title> | |
<style> | |
body { | |
margin: 0; | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
} | |
rect:first-child { | |
stroke-width: 0.5; | |
stroke: black; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="grey"></div> | |
<div id="orange"></div> | |
<script> | |
const grey = d3.scaleSequential() | |
.domain([0, 4]) | |
.interpolator(d3.interpolateGreys); | |
const orange = d3.scaleSequential() | |
.domain([0, 4]) | |
.interpolator(d3.interpolateOranges); | |
const svg_greyRect = d3.select("#grey").append("svg") | |
.attr("width", 960) | |
.attr("height", 90) | |
const svg_orangeRect = d3.select("#orange").append("svg") | |
.attr("x", 30) | |
.attr("y", 80) | |
.attr("width", 960) | |
.attr("height", 90) | |
svg_greyRect.selectAll("rect") | |
.data(d3.range(4)) | |
.enter() | |
.append("rect") | |
.attr("x", d3.scaleLinear().domain([0, 4]).range([20, 260])) | |
.attr("y", 20) | |
.attr("width", 40) | |
.attr("height", 40) | |
.attr("fill", function(d, i) { return grey(i); }); | |
svg_orangeRect.selectAll("rect") | |
.data(d3.range(4)) | |
.enter() | |
.append("rect") | |
.attr("x", d3.scaleLinear().domain([0, 4]).range([20, 260])) | |
.attr("y", 20) | |
.attr("width", 40) | |
.attr("height", 40) | |
.attr("fill", function(d, i) { return orange(i); }); | |
</script> | |
</body> |