Skip to content

Instantly share code, notes, and snippets.

@EfratVil
Last active November 27, 2016 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EfratVil/903d82a7cde553fb6739fe55af6103e2 to your computer and use it in GitHub Desktop.
Save EfratVil/903d82a7cde553fb6739fe55af6103e2 to your computer and use it in GitHub Desktop.
Colors Interpolation
<!DOCTYPE html>
<meta charset="utf-8">
<style>
h3 {
margin-left: 40px;
margin-bottom: 2px;
font-family: 'Maven Pro', sans-serif;
font-size: 18px;
font-weight: bold;
}
</style>
<body>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
width = 800 - margin.left - margin.right,
height = 50 - margin.top - margin.bottom;
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var circles_data = function (count, y, radius) {
var data = [];
for (var j = 0; j < count; j++) {
data.push({"id": j, "x": j * 2 * radius, "y": y });
}
return data;
}
var create_circles = function (color_func) {
var svg = d3.select("body").append("svg")
.attr("data-margin-right", margin.right)
.attr("data-margin-left", margin.left)
.attr("data-margin-top", margin.top)
.attr("data-margin-bottom", margin.bottom)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
data = circles_data(20, 140, 15);
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("r", 15)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.style("fill", function (d) { return color_func(d.id); });
}
var data = [];
// ----------------------------------------------------
var color1 = d3.scaleLinear()
.domain([1, 20])
.range(['#d73027', '#1a9850'])
.interpolate(d3.interpolateHcl); //interpolateHsl interpolateHcl interpolateRgb
d3.select("body").append("h3").html("From red to green - 2 colors interpolation")
create_circles(color1);
// ----------------------------------------------------
var color2 = d3.scaleLinear()
.domain([1, 10, 20])
.range(['#d73027', '#fee08b', '#1a9850'])
.interpolate(d3.interpolateHcl); //interpolateHsl interpolateHcl interpolateRgb
d3.select("body").append("h3").html("From red to green - 3 colors interpolation")
create_circles(color2);
// ----------------------------------------------------
var step = d3.scaleLinear()
.domain([1, 8])
.range([1, 20]);
var color3= d3.scaleLinear()
.domain([1, step(2), step(3), step(4), step(5), step(6), step(7), 20])
.range(['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850'])
.interpolate(d3.interpolateHcl); //interpolateHsl interpolateHcl interpolateRgb
d3.select("body").append("h3").html("From red to green - 8 colors interpolation")
create_circles(color3);
// ----------------------------------------------------
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment