Skip to content

Instantly share code, notes, and snippets.

@bdon
Last active August 29, 2015 14:01
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 bdon/e6405ebabd4f3013c342 to your computer and use it in GitHub Desktop.
Save bdon/e6405ebabd4f3013c342 to your computer and use it in GitHub Desktop.
Moon Phases
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
background-color: black;
}
text {
font-family: sans-serif;
font-size: 10px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960, height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var content = svg.append("g").attr("transform","translate(80,30)");
var monthScale = d3.scale.linear().domain([1,12]).range([0,450]);
var dowScale = d3.scale.linear().domain([1,7]).range([0,120]);
var weekScale = d3.scale.linear().domain([-1,3]).range([0,560]);
//default is white path, white circle, black circle. Invert will invert colors - if it is mostly lit
var phases = [{"name":"New Moon" ,"arcStart":0 ,"arcEnd":2*Math.PI,"scaleX":0 ,"invert":false},
{"name":"Waxing Crescent","arcStart":Math.PI,"arcEnd":2*Math.PI,"scaleX":0.7,"invert":false},
{"name":"First Quarter" ,"arcStart":Math.PI,"arcEnd":2*Math.PI,"scaleX":0 ,"invert":false},
{"name":"Waxing Gibbous" ,"arcStart":0 ,"arcEnd": Math.PI,"scaleX":0.7,"invert":true},
{"name":"Full Moon" ,"arcStart":0,"arcEnd": 0,"scaleX":0 ,"invert":false},
{"name":"Waning Gibbous" ,"arcStart":Math.PI,"arcEnd":2*Math.PI,"scaleX":0.7,"invert":true},
{"name":"Third Quarter" ,"arcStart":0,"arcEnd":Math.PI,"scaleX":0 ,"invert":false},
{"name":"Waning Crescent","arcStart":0,"arcEnd":Math.PI,"scaleX":0.7,"invert":false}];
function moonPhase(y,m,d) {
if (m < 3) {
y--;
m += 12;
}
m = m + 1;
var c = 365.25*y;
var e = 30.6*m;
var jd = c+e+d-694039.09;
jd = jd / 29.53;
var b = Math.floor(jd);
jd -= b;
b = jd*8 + 0.5;
b = b & 7;
return b;
}
var daysOfYear = [];
var year = 2014;
for (var d = new Date(year, 0, 1); d < new Date(year+1,0,1); d.setDate(d.getDate() + 1)) {
daysOfYear.push({"month":d.getMonth()+1, "day":d.getDate(), "dow":d.getDay()+1,"year":year,"phase":moonPhase(year,d.getMonth()+1,d.getDate())});
}
var dayGs = content.selectAll(".day").data(daysOfYear).enter().append("g")
.attr("class", "day")
.attr("transform", function(d) {
tX = weekScale(Math.floor((d.day-d.dow)/7))+dowScale(d.dow);
tY = monthScale(d.month);
return "translate(" + tX + "," + tY + ")";
});
var arc = d3.svg.arc().outerRadius(8);
dayGs.append("circle").attr({"r":8}).style("fill",function(d) { return phases[d.phase].invert ? "black" : "white"; });
dayGs.append("circle").attr({"r":8}).style("fill",function(d) { return phases[d.phase].invert ? "white" : "black"; })
.attr("transform",function(d) {
var xScale = phases[d.phase].scaleX;
return "scale(" + xScale + ",1)";
});
dayGs.append("path").attr("d", function(d) {
var phase = phases[d.phase];
return arc.innerRadius(0).startAngle(phase.arcStart).endAngle(phase.arcEnd)();
}).style("fill",function(d) { return phases[d.phase].invert ? "white" : "black"; });
dayGs.append("text")
.text(function(d) { return d.day })
.attr("x", function(d) { return d.day < 10 ? -3 : -6 })
.attr("y",-11)
.style("fill","#ccc");
//dayGs.append("text").text(function(d) { return phases[d.phase].name }).attr({"x":-6,"y":3});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment