Skip to content

Instantly share code, notes, and snippets.



Last active May 21, 2018
What would you like to do?
Resizable color palette

This creates a dynamic-sized color scheme, linearly interpolated between the two given colors

<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css" media="screen">
div.block {
height: 60px;
float: left;
margin: 1px;
<script src=""></script>
<script src=""></script>
<input type="number" id="numBins" value="12" min="0"> <br/>
<div id='frame'>
<script type="text/javascript">
var frame, blocks, binner, numBins;
frame ="frame"));
binner = document.getElementById('numBins');
var update = function() {
numBins = Number(binner.value);
color = d3.scale.linear().domain([1,numBins])
.range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
blocks = document.getElementsByClassName('block');
if (blocks.length > numBins) {
for (var i = blocks.length; i > numBins; i--) {
} else if (blocks.length < numBins) {
for (var i=blocks.length; i < numBins; i++) {
frame.append('div').attr('class', 'block');
blocks = document.getElementsByClassName('block');
for (var i = Math.max(blocks.length, numBins)-1; i >= 0; i--) {[i]).attr('style', function(d) {
return 'background-color: ' + color(i);
binner.onchange = update;
binner.onclick = update;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment