Last active
November 29, 2015 22:30
-
-
Save thole/72e7033ebbd4a0de5c59 to your computer and use it in GitHub Desktop.
calendar - daily
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> | |
| <meta charset="utf-8"> | |
| <html> | |
| <head> | |
| <title>Calendar</title> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script> | |
| <style> | |
| body { | |
| background-color:#edeff1 | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| moment.lang("de"); | |
| var scale = d3.scale.linear() | |
| .domain([0, 100]) | |
| .range([0, Math.PI*2]); | |
| var startYear = new Date().getFullYear(); | |
| var endYear = startYear + 1; | |
| var runner = new Date(startYear, 0, 1); | |
| var calendar = new Array(); | |
| while(runner.getFullYear() < endYear){ | |
| calendar.push({'date':new Date(runner),'value':[100*Math.random(),100*Math.random(),100*Math.random()]}); | |
| runner.setDate(runner.getDate()+1); | |
| } | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", 1000) | |
| .attr("height", 1400); | |
| svg.selectAll("rectWeekDay") | |
| .data(calendar) | |
| .enter() | |
| .append("rect") | |
| .attr("width",12) | |
| .attr("height",6) | |
| .attr("rx",3) | |
| .attr("ry",3) | |
| .style("fill",function(d,i){if(moment(d.date).day() == 0){return "black";} | |
| if(moment(d.date).day() == 6){return "black";} | |
| else{return "#edeff1";} | |
| }) | |
| .attr("x", function (d,i) { return 64 + 29 * moment(d.date).date()}) | |
| .attr("y", function (d,i) { return 17.75 + 110 * d.date.getMonth() }) | |
| .text(function(d){return moment(d.date).format('ddd')}); | |
| svg.selectAll("textWeekDay") | |
| .data(calendar) | |
| .enter() | |
| .append("text") | |
| .style("font-size","4pt") | |
| .style("text-anchor","middle") | |
| .style("font-family","sans-serif") | |
| .style("fill",function(d,i){if(moment(d.date).day() == 0){return "#edeff1";} | |
| if(moment(d.date).day() == 6){return "#edeff1";} | |
| else{return "black";} | |
| }) | |
| .attr("x", function (d,i) { return 70 + 29 * moment(d.date).date()}) | |
| .attr("y", function (d,i) { return 22.5 + 110 * d.date.getMonth() }) | |
| .text(function(d){return moment(d.date).format('ddd')}); | |
| svg.selectAll("textDayMonth") | |
| .data(calendar) | |
| .enter() | |
| .append("text") | |
| .style("font-weight","bold") | |
| .style("text-anchor","middle") | |
| .style("fill","black") | |
| .style("font-family","sans-serif") | |
| .attr("x", function (d,i) { return 70 + 29 * moment(d.date).date()}) | |
| .attr("y", function (d,i) { return 15 + 110 * d.date.getMonth() }) | |
| .text(function(d){return moment(d.date).format('DD')}); | |
| svg.selectAll("textMonth") | |
| .data(calendar) | |
| .enter() | |
| .append("text") | |
| .style("text-anchor","end") | |
| .style("fill","black") | |
| .style("font-family","sans-serif") | |
| .attr("x", function (d,i) { return 80;}) | |
| .attr("y", function (d,i) { return 25 + 110 * d.date.getMonth() }) | |
| .text(function(d){return moment(d.date).format('MMMM')}); | |
| svg.selectAll("circleA") | |
| .data(calendar) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d,i) {return 70 + 29 * moment(d.date).dates()}) | |
| .attr("cy", function (d,i) { return 40 + 110 * d.date.getMonth() }) | |
| .attr("r", function (d) { return 11 }) | |
| .style("fill","#848484"); | |
| svg.selectAll("circleB") | |
| .data(calendar) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d,i) {return 70 + 29 * moment(d.date).dates()}) | |
| .attr("cy", function (d,i) { return 65 + 110 * d.date.getMonth() }) | |
| .attr("r", function (d) { return 11 }) | |
| .style("fill","#848484"); | |
| svg.selectAll("circleC") | |
| .data(calendar) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d,i) {return 70 + 29 * moment(d.date).dates()}) | |
| .attr("cy", function (d,i) { return 90 + 110 * d.date.getMonth() }) | |
| .attr("r", function (d) { return 11 }) | |
| .style("fill","#848484"); | |
| arcGroups = svg.selectAll("circleOverlayA") | |
| .data(calendar) | |
| .enter() | |
| .append("g") | |
| .attr("transform",function (d,i) {return "translate(" + (70 + 29 * moment(d.date).dates()) + "," + (40 + 110 * d.date.getMonth()) + ")"}) | |
| .append("path") | |
| .attr("d",function(d){ | |
| return d3.svg.arc().innerRadius(0).outerRadius(11).startAngle(0).endAngle(scale(d.value[0]))(d); | |
| }) | |
| .style("fill","#fd9b27"); | |
| arcGroups = svg.selectAll("circleOverlayB") | |
| .data(calendar) | |
| .enter() | |
| .append("g") | |
| .attr("transform",function (d,i) {return "translate(" + (70 + 29 * moment(d.date).dates()) + "," + (65 + 110 * d.date.getMonth()) + ")"}) | |
| .append("path") | |
| .attr("d",function(d){ | |
| return d3.svg.arc().innerRadius(0).outerRadius(11).startAngle(0).endAngle(scale(d.value[1]))(d); | |
| }) | |
| .style("fill","#fd9b27"); | |
| arcGroups = svg.selectAll("circleOverlayD") | |
| .data(calendar) | |
| .enter() | |
| .append("g") | |
| .attr("transform",function (d,i) {return "translate(" + (70 + 29 * moment(d.date).dates()) + "," + (90 + 110 * d.date.getMonth()) + ")"}) | |
| .append("path") | |
| .attr("d",function(d){ | |
| return d3.svg.arc().innerRadius(0).outerRadius(11).startAngle(0).endAngle(scale(d.value[2]))(d); | |
| }) | |
| .style("fill","#fd9b27"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment