Skip to content

Instantly share code, notes, and snippets.

@perrie

perrie/index.html

Last active November 25, 2019 19:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save perrie/a567f84d4e8ed7ce5ce9 to your computer and use it in GitHub Desktop.
Save perrie/a567f84d4e8ed7ce5ce9 to your computer and use it in GitHub Desktop.
Download ZIP
Applying d3.js darker / lighter to colour.
Raw
readme.md
Raw
index.html
<!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