Skip to content

Instantly share code, notes, and snippets.

@TaraZhu

TaraZhu/.block

Last active October 18, 2017 20:16
Show Gist options
  • Save TaraZhu/4588aa08ee0694737b5ee0a9e1ff1c64 to your computer and use it in GitHub Desktop.
Save TaraZhu/4588aa08ee0694737b5ee0a9e1ff1c64 to your computer and use it in GitHub Desktop.
Download ZIP
Resize-color
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!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>
var grey = d3.scaleSequential()
.domain([0, 4])
.interpolator(d3.interpolateGreys);
var orange = d3.scaleSequential()
.domain([0, 4])
.interpolator(d3.interpolateOranges);
var svg_greyRect = d3.select("#grey").append("svg"),
svg_orangeRect = d3.select("#orange").append("svg");
function redraw(svg_squares) {
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth,
height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight,
side = Math.min(width / 6, height / 2) / 2;
console.log(height);
console.log(side);
var svg_greySquare = svg_greyRect.selectAll("rect").data(d3.range(4)),
svg_orangeSquare = svg_orangeRect.selectAll("rect").data(d3.range(4));
svg_greyRect
.attr("width", width)
.attr("height", side * 2.3);
svg_orangeRect
.attr("width", width)
.attr("height", side * 2.3);
var svg_greySquare = svg_greyRect.selectAll("rect").data(d3.range(4)),
svg_orangeSquare = svg_orangeRect.selectAll("rect").data(d3.range(4));
svg_greySquare
.enter()
.append("rect")
.merge(svg_greySquare)
.attr("x", d3.scaleLinear().domain([0, 4]).range([20, side * 6.5]))
.attr("y", side / 2)
.attr("width", side)
.attr("height", side)
.attr("fill", function (d, i) {
return grey(i);
});
svg_orangeSquare
.enter()
.append("rect")
.merge(svg_orangeSquare)
.attr("x", d3.scaleLinear().domain([0, 4]).range([20, side * 6.5]))
.attr("y", side / 2)
.attr("width", side)
.attr("height", side)
.attr("fill", function (d, i) {
return orange(i);
});
svg_greyRect.exit().remove();
svg_orangeRect.exit().remove();
}
redraw();
window.addEventListener("resize", redraw);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment