Making a quick example of colors for a blog post. using Nadieh’s excellent heatmap colors as seen on http://visualcinnamon.com
The tiles are from @syntagmatic’s parallel coordinates color palette.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
// color scale from visualcinnamon.com
var cinnamon = ["#2c7bb6","#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"];
var cscale = d3.scaleLinear()
.domain(d3.range(cinnamon.length).map(function(i) { return i/(cinnamon.length-1)}))
.range(cinnamon)
.interpolate(d3.interpolateHcl);
var interpolator = d3.scaleSequential(cscale)
var n = 900
var cdata = d3.range(n)
svg.selectAll("rect.cinnamon").data(cdata)
.enter().append("rect").classed("cdata", true)
.attr("x", function(d,i) { return 30 + i})
.attr("y", 50)
.attr("width", 1)
.attr("height", 140)
.attr("fill", function(d,i) { return interpolator(d/n) })
var syntagmatic = ["hsl(28,100%,52%)", "hsl(214,55%,79%)", "hsl(185,56%,73%)", "hsl(30,100%,73%)", "hsl(359,69%,49%)", "hsl(110,57%,70%)", "hsl(120,56%,40%)", "hsl(1,100%,79%)", "hsl(271,39%,57%)", "hsl(274,30%,76%)", "hsl(10,30%,42%)", "hsl(10,28%,67%)", "hsl(318,65%,67%)", "hsl(334,80%,84%)", "hsl(37,50%,75%)", "hsl(339,60%,75%)", "hsl(56,58%,73%)", "hsl(339,60%,49%)", "hsl(325,50%,39%)", "hsl(20,49%,49%)", "hsl(60,86%,61%)", "hsl(185,80%,45%)", "hsl(189,57%,75%)", "hsl(41,75%,61%)", /*"hsl(204,70%,41%)"*/]
var w = 76
var r = 12;
svg.selectAll("rect.syntagmatic").data(syntagmatic)
.enter().append("rect").classed("syntagmatic", true)
.attr("x", function(d,i) { return 30 + (i % r) * w})
.attr("y", function(d,i) { return 243 + Math.floor(i/r) * w})
.attr("width", w - 10)
.attr("height", w - 10)
.attr("fill", function(d,i) { return d })
</script>
</body>