Mini tool for mucking about with a shaded relief palette through code. Textarea is a report; not an input.
Built with blockbuilder.org
forked from fogonwater's block: chroma d3 tests
license: mit |
Mini tool for mucking about with a shaded relief palette through code. Textarea is a report; not an input.
Built with blockbuilder.org
forked from fogonwater's block: chroma d3 tests
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script> | |
<style> | |
body { margin:10px;} | |
.swatch { | |
color: #444; | |
float: left; | |
font-family: sans-serif; | |
font-size: 0.8em; | |
margin: 1px; | |
padding: 4px; | |
width: 75px; | |
height: 70px; | |
} | |
textarea {margin-bottom: 6px;} | |
</style> | |
</head> | |
<body> | |
<textarea id="out" rows="2" cols="90"></textarea> | |
<div id="viz"></div> | |
<script> | |
const num_cols = 7, | |
data = d3.range(0,num_cols), | |
color = chroma | |
.scale([ | |
chroma('#b893a9').saturate(2).brighten(1.5), | |
chroma('#a86a89').saturate(1.5).brighten(), | |
chroma('#6584b7').saturate(1).brighten(.5), | |
chroma('#66578b').saturate(1.2).brighten(), | |
chroma('#534483').saturate(1).brighten(.5), | |
chroma('#7f8082'), | |
chroma('#66686a') | |
]) | |
//.mode('lch') | |
.colors(num_cols) | |
d3.select("#viz").selectAll("div") | |
.data(data) | |
.enter().append("div") | |
.style("background", function(d) {return color[d]}) | |
.text(function(d){ return color[d]; }) | |
.attr("class", "swatch") | |
const report = data.map(function(d, i){ | |
return color[d] | |
}) | |
d3.select("#out") | |
.text(JSON.stringify(report)); | |
</script> | |
</body> |