View changes in colour when applying d3.js darker or brighter functions (specify the colour and step of increment).
Last active
November 25, 2019 19:57
-
-
Save perrie/a567f84d4e8ed7ce5ce9 to your computer and use it in GitHub Desktop.
Applying d3.js darker / lighter to colour.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Brighter / Darker</title> | |
<style type="text/css"> | |
.rect { | |
width:120px; | |
height:80px; | |
float:left; | |
} | |
.brighter { | |
border:1px solid black; | |
color:black; | |
} | |
.darker { | |
border:1px solid white; | |
color:white; | |
} | |
</style> | |
</head> | |
<body onload="update_colours()"> | |
<!-- <script src="http://d3js.org/d3.v2.min.js?2.9.1"></script> --> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<table> | |
<tr> | |
<td> | |
Colour: | |
</td> | |
<td> | |
<input type="text" name="colour" id="colour_choice" value="#22bb33"/> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Step: | |
</td> | |
<td> | |
<input type="text" name="step" id="step_choice" value="1"/> | |
</td> | |
</tr> | |
<tr> | |
<td> | |
Max steps to show: | |
</td> | |
<td> | |
<input type="text" name="step" id="max_choice" value="100"/> | |
</td> | |
</tr> | |
<tr> | |
<td></td> | |
<td> | |
<input type="submit" value="Submit" onclick="update_colours()" /> | |
</td> | |
</tr> | |
</table> | |
<h1>brigher</h1> | |
<div id="display_bright"></div> | |
<h1 style="clear:both"/>darker</h1> | |
<div id="display_dark"></div> | |
<script> | |
function update_colours() { | |
/* Generate colours */ | |
var colour_choice = document.getElementById("colour_choice").value; | |
var step = document.getElementById("step_choice").value; | |
var max = document.getElementById("max_choice").value; | |
console.log("Test", colour_choice, step); | |
var array_bright = [colour_choice]; | |
var array_dark = [colour_choice]; | |
/* BRIGHTEN */ | |
var new_colour = d3.hsl(array_bright[array_bright.length-1]).brighter(step);; | |
while (array_bright.length < max && new_colour != array_bright[array_bright.length-1]) { | |
array_bright.push(new_colour.toString()); | |
new_colour = d3.hsl(array_bright[array_bright.length-1]).brighter(step); | |
} | |
/* DARKEN */ | |
new_colour = d3.hsl(array_dark[array_dark.length-1]).darker(step);; | |
while (array_dark.length < max && new_colour != array_dark[array_dark.length-1]) { | |
array_dark.push(new_colour.toString()); | |
new_colour = d3.hsl(array_dark[array_dark.length-1]).darker(step); | |
} | |
/* REMOVE THE OLDER COLOURS AND DISPLAY NEW */ | |
d3.select("#display_bright").selectAll("div").remove(); | |
d3.select("#display_dark").selectAll("div").remove(); | |
d3.select("#display_bright").selectAll("div") | |
.data(array_bright) | |
.enter().append("div") | |
.attr("class","rect brighter") | |
.style("background-color", function (d) { return d; }) | |
.text(function (d) { return d; }); | |
d3.select("#display_dark").selectAll("div") | |
.data(array_dark) | |
.enter().append("div") | |
.attr("class","rect darker") | |
.attr("title", function (d) { return d; }) | |
.style("background-color", function (d) { return d; }) | |
.text(function (d) { return d; }); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment