andreas-groos
10/23/2017 - 3:55 PM

colorScale without axis....

colorScale without axis....

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style type="text/css" media="screen">
  div {
    width:60px;
    height: 60px;
    float: left;
    margin: 1px;
  }
  </style>
</head>
<body>
  <svg width="500"></svg>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://d3js.org/d3.v3.js"></script>

  <script type="text/javascript">

  var body = d3.select("body"),
    length = 100,
    color = d3.scale.linear().domain([1,length])
      .interpolate(d3.interpolateHcl)
      .range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
var svg = d3.select("svg");
var data = d3.range(50);

var rects = svg.selectAll(".rects")
	.data(data)
	.enter()
	.append("rect")
	.attr("y", 10)
	.attr("height", 20)
	.attr("x", (d,i)=>10 + i*6)
	.attr("width", 6)
	.attr("fill", d=>color(d))

$(document).ready(function() {
  

  for (var i = 0; i < length; i++) {
    body.append('div').attr('style', function (d) {
      return 'background-color: ' + color(i);
    });
  }
})    		

    
  </script>

</body>
</html>

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: fresh block