some colors

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

forked from enjalot's block: some colors

<!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>

https://d3js.org/d3.v4.min.js