Skip to content

Instantly share code, notes, and snippets.

@wiederkehr

wiederkehr/Readme.md

Last active October 7, 2015 13:52
Show Gist options
  • Save wiederkehr/52c273a9ad4e893de493 to your computer and use it in GitHub Desktop.
Save wiederkehr/52c273a9ad4e893de493 to your computer and use it in GitHub Desktop.
Download ZIP
Calendar Color Scheme
Raw
Readme.md

Color schemes for our shared calendar built with D3.js.

Raw
cubehelix.min.js
!function(){function t(t){return function(e,i){e=d3.hsl(e),i=d3.hsl(i);var r=(e.h+120)*a,h=(i.h+120)*a-r,s=e.s,l=i.s-s,o=e.l,u=i.l-o;return isNaN(l)&&(l=0,s=isNaN(s)?i.s:s),isNaN(h)&&(h=0,r=isNaN(r)?i.h:r),function(a){var e=r+h*a,i=Math.pow(o+u*a,t),c=(s+l*a)*i*(1-i);return"#"+n(i+c*(-.14861*Math.cos(e)+1.78277*Math.sin(e)))+n(i+c*(-.29227*Math.cos(e)-.90649*Math.sin(e)))+n(i+c*1.97294*Math.cos(e))}}}function n(t){var n=(t=0>=t?0:t>=1?255:0|255*t).toString(16);return 16>t?"0"+n:n}var a=Math.PI/180;d3.scale.cubehelix=function(){return d3.scale.linear().range([d3.hsl(300,.5,0),d3.hsl(-240,.5,1)]).interpolate(d3.interpolateCubehelix)},d3.interpolateCubehelix=t(1),d3.interpolateCubehelix.gamma=t}();
Raw
index.html
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Calendar Color Scheme</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="cubehelix.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
(function() {
// Layout
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Customized
var range = [d3.hsl(200, 1, .75), d3.hsl(20, 1.6, .85), d3.hsl(-160, 1, .75)],
steps = 15,
row = height / 2,
column = width / steps;
// Generated
var colors = d3.scale.cubehelix().domain([0, width / 2, width]).range(range),
tones = generateTones(steps);
// Generate Tones
function generateTones(amount){
return d3.range(steps).map(function(i) {
return {
offset: ((100 / amount) * i) + "%",
color: colors(column * i)
}
})
}
// Setup SVG Canvas
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Setup Gradient
svg.append("linearGradient")
.attr("id", "color-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.selectAll("stop")
.data(tones)
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
// Draw Gradient
var gradient = svg.append("rect")
.attr("class", "gradient")
.attr("width", width)
.attr("height", row)
.attr("y", 0)
.attr("x", 0);
// Draw Palette Colors
var palette = svg.selectAll("rect.palette")
.data(tones)
.enter().append("rect")
.attr("class", "palette")
.attr("width", width / steps)
.attr("height", row)
.attr("y", row)
.attr("x", function(d, i) { return column * i } )
.style("fill", function(d, i) { return colors(column * i) });
// Draw Palette Labels
var labels = svg.selectAll("text")
.data(tones)
.enter().append("text")
.text(function(d, i) { return d.color } )
.attr("class", "label")
.attr("y", height - row / 2)
.attr("x", function(d, i) { return (column * i) + (column / 2) } );
})()
Raw
style.css
body {
font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
::selection {
color: #222;
background:#fff;
}
.gradient {
fill: url(#color-gradient);
stroke: #fff;
stroke-width: 1;
shape-rendering: crispEdges;
}
.palette {
stroke: #fff;
stroke-width: 1;
shape-rendering: crispEdges;
}
.label {
fill: #222;
font-size: 12px;
text-align: center;
text-anchor: middle;
text-transform: uppercase;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment