Restructure calendar example.

d3 · Jan 31, 2011 · 44e67e2 · 44e67e2
1 parent 1de75bc
commit 44e67e2
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 277 deletions.
diff --git a/examples/calendar/calendar.css b/examples/calendar/calendar.css
@@ -0,0 +1,16 @@
+#chart {
+  font: 10px sans-serif;
+}
+
+.day {
+  fill: none;
+  stroke: #ccc;
+  shape-rendering: crispEdges;
+}
+
+.month {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2px;
+  shape-rendering: crispEdges;
+}
diff --git a/examples/calendar/calendar.js b/examples/calendar/calendar.js
@@ -0,0 +1,50 @@
+var calendar = {
+
+  format: d3.time.format("%Y-%m-%d"),
+
+  dates: function(year) {
+    var dates = [],
+        date = new Date(year, 0, 1),
+        week = 0,
+        day;
+    do {
+      dates.push({
+        day: day = date.getDay(),
+        week: week,
+        month: date.getMonth(),
+        Date: calendar.format(date)
+      });
+      date.setDate(date.getDate() + 1);
+      if (day == 6) week++;
+    } while (date.getFullYear() == year);
+    return dates;
+  },
+
+  months: function(year) {
+    var months = [],
+        date = new Date(year, 0, 1),
+        month,
+        firstDay,
+        firstWeek,
+        day,
+        week = 0;
+    do {
+      firstDay = date.getDay();
+      firstWeek = week;
+      month = date.getMonth();
+      do {
+        day = date.getDay();
+        if (day == 6) week++;
+        date.setDate(date.getDate() + 1);
+      } while (date.getMonth() == month);
+      months.push({
+        firstDay: firstDay,
+        firstWeek: firstWeek,
+        lastDay: day,
+        lastWeek: day == 6 ? week - 1 : week
+      });
+    } while (date.getFullYear() == year);
+    return months;
+  }
+
+};
diff --git a/examples/calendar/dji.html b/examples/calendar/dji.html
@@ -3,146 +3,13 @@
     <title>DJI</title>
     <script type="text/javascript" src="../../d3.js"></script>
     <script type="text/javascript" src="../../d3.csv.js"></script>
-    <style type="text/css">
-
-@import url("../../lib/colorbrewer/colorbrewer.css");
-
-body {
-  font: 10px sans-serif;
-}
-
-.day {
-  fill: none;
-  stroke: #ccc;
-  shape-rendering: crispEdges;
-}
-
-.month {
-  fill: none;
-  stroke: #000;
-  stroke-width: 2px;
-  shape-rendering: crispEdges;
-}
-
-    </style>
+    <script type="text/javascript" src="../../d3.time.js"></script>
+    <script type="text/javascript" src="calendar.js"></script>
+    <link type="text/css" rel="stylesheet" href="../../lib/colorbrewer/colorbrewer.css"/>
+    <link type="text/css" rel="stylesheet" href="calendar.css"/>
   </head>
   <body>
-    <script type="text/javascript">
-
-d3.csv("dji.csv", function(csv) {
-  var data = d3.nest()
-      .key(function(d) { return d.Date; })
-      .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
-      .map(csv);
-
-  var color = d3.scale.quantize()
-      .domain([-.05, .05])
-      .range(d3.range(9));
-
-  var w = 960,
-      pw = 14,
-      z = ~~((w - pw * 2) / 53),
-      ph = z >> 1,
-      h = z * 7 + ph * 2;
-
-  var vis = d3.select("body")
-    .selectAll("svg")
-      .data(d3.range(1990, 2011))
-    .enter("svg:svg")
-      .attr("width", w)
-      .attr("height", h)
-      .attr("class", "RdGy")
-    .append("svg:g")
-      .attr("transform", "translate(" + pw + "," + ph + ")");
-
-  vis.append("svg:text")
-      .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
-      .text(function(d) { return d; });
-
-  vis.selectAll("rect.day")
-      .data(dates)
-    .enter("svg:rect")
-      .attr("x", function(d) { return d.week * z; })
-      .attr("y", function(d) { return d.day * z; })
-      .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
-      .attr("width", z)
-      .attr("height", z)
-    .append("svg:title")
-      .text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
-
-  vis.selectAll("path.month")
-      .data(months)
-    .enter("svg:path")
-      .attr("class", "month")
-      .attr("d", function(d) {
-        return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
-            + "H" + d.firstWeek * z
-            + "V" + 7 * z
-            + "H" + d.lastWeek * z
-            + "V" + (d.lastDay + 1) * z
-            + "H" + (d.lastWeek + 1) * z
-            + "V" + 0
-            + "H" + (d.firstWeek + 1) * z
-            + "Z";
-      });
-});
-
-
-function pad(n) {
-  return n < 10 ? "0" + n : n;
-}
-
-function format(d) {
-  var month = d.getMonth() + 1,
-      date = d.getDate();
-  return d.getFullYear() + "-" + pad(month) + "-" + pad(date);
-}
-
-function dates(year) {
-  var dates = [],
-      date = new Date(year, 0, 1),
-      week = 0,
-      day;
-  do {
-    dates.push({
-      day: day = date.getDay(),
-      week: week,
-      month: date.getMonth(),
-      Date: format(date)
-    });
-    date.setDate(date.getDate() + 1);
-    if (day == 6) week++;
-  } while (date.getFullYear() == year);
-  return dates;
-}
-
-function months(year) {
-  var months = [],
-      date = new Date(year, 0, 1),
-      month,
-      firstDay,
-      firstWeek,
-      day,
-      week = 0;
-  do {
-    firstDay = date.getDay();
-    firstWeek = week;
-    month = date.getMonth();
-    do {
-      day = date.getDay();
-      if (day == 6) week++;
-      date.setDate(date.getDate() + 1);
-    } while (date.getMonth() == month);
-    months.push({
-      firstDay: firstDay,
-      firstWeek: firstWeek,
-      lastDay: day,
-      lastWeek: day == 6 ? week - 1 : week
-    });
-  } while (date.getFullYear() == year);
-  return months;
-}
-
-    </script>
+    <div id="chart"></div>
+    <script type="text/javascript" src="dji.js"></script>
   </body>
 </html>
diff --git a/examples/calendar/dji.js b/examples/calendar/dji.js
@@ -0,0 +1,57 @@
+d3.csv("dji.csv", function(csv) {
+  var data = d3.nest()
+      .key(function(d) { return d.Date; })
+      .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
+      .map(csv);
+
+  var color = d3.scale.quantize()
+      .domain([-.05, .05])
+      .range(d3.range(9));
+
+  var w = 710,
+      pw = 14,
+      z = ~~((w - pw * 2) / 53),
+      ph = z >> 1,
+      h = z * 7 + ph * 2;
+
+  var vis = d3.select("#chart")
+    .selectAll("svg")
+      .data(d3.range(1990, 2011))
+    .enter("svg:svg")
+      .attr("width", w)
+      .attr("height", h)
+      .attr("class", "RdGy")
+    .append("svg:g")
+      .attr("transform", "translate(" + pw + "," + ph + ")");
+
+  vis.append("svg:text")
+      .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
+      .text(function(d) { return d; });
+
+  vis.selectAll("rect.day")
+      .data(calendar.dates)
+    .enter("svg:rect")
+      .attr("x", function(d) { return d.week * z; })
+      .attr("y", function(d) { return d.day * z; })
+      .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; })
+      .attr("width", z)
+      .attr("height", z)
+    .append("svg:title")
+      .text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; });
+
+  vis.selectAll("path.month")
+      .data(calendar.months)
+    .enter("svg:path")
+      .attr("class", "month")
+      .attr("d", function(d) {
+        return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z
+            + "H" + d.firstWeek * z
+            + "V" + 7 * z
+            + "H" + d.lastWeek * z
+            + "V" + (d.lastDay + 1) * z
+            + "H" + (d.lastWeek + 1) * z
+            + "V" + 0
+            + "H" + (d.firstWeek + 1) * z
+            + "Z";
+      });
+});