finished lesson 6 section 3. started section 4

pauldix · Aug 30, 2012 · f2d62c2 · f2d62c2
1 parent 22a4729
commit f2d62c2
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 88 deletions.
diff --git a/lesson6/histogram-chart.js b/lesson6/histogram-chart.js
diff --git a/lesson6/section3.html b/lesson6/section3.html
@@ -19,7 +19,6 @@
 
 <body>
   <script>
-  console.log('hi')
     d3.json("tag_counts_last_30_days.json", function(allTags) {
       var topTags = allTags.slice(0, 20);
 
@@ -38,8 +37,8 @@
         .enter()
         .append("li")
           .attr("class", "bar")
-          .style("width", function(d) {console.log(d[0]); return scale(d[0])})
-          .text(function(d) {return d[1]})
+          .style("width", function(d) { return scale(d[0]); })
+          .text(function(d) { return d[1]; });
     });
   </script>
 </body>

diff --git a/lesson6/section4.html b/lesson6/section4.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://d3js.org/d3.v2.js"></script>
+</head>
+
+<body>
+  <script>
+    d3.json("tag_counts_last_30_days.json", function(allTags) {
+      var topTags = allTags.slice(1, 3);
+      var midTags = allTags.slice(100, 3);
+      var tags = topTags.concat(midTags);
+
+      var width   = 600,
+          height  = 300,
+          padding = 20;
+
+      var colorScale = d3.scale.category10(); // do this after the first item
+
+      var vis = d3.select("body")
+        .append('svg')
+          .attr('width', width)
+          .attr('height', height);
+
+      d3.json("tags/" + tags[0][1], function(tagData) {
+
+        var timeExtent = d3.extent(tagData.d.map(function))
+        var xScale = d3.time.scale().domain(chartSettings.xExtent).range([chartSettings.padding, chartSettings.width - chartSettings.padding]);
+        // add visual rules for timeline
+        vis.append("g")
+              .attr("class", "rule").selectAll("line")
+              .data(chartSettings.xScale.ticks(10))
+              .enter()
+              .append("line")
+              .attr("x1", chartSettings.xScale)
+              .attr("x2", chartSettings.xScale)
+              .attr("y1", chartSettings.padding)
+              .attr("y2", chartSettings.height - chartSettings.padding);
+
+        // place axis tick labels
+        var xAxis = d3.svg.axis()
+              .scale(chartSettings.xScale)
+              .orient("bottom")
+              .ticks(8);
+
+        var timeAxis = vis.append("g")
+              .attr("class", "x axis")
+              .attr("transform", "translate(0," + (chartSettings.height - chartSettings.padding) + ")")
+              .call(xAxis);
+
+        var yAxis = d3.svg.axis()
+              .scale(chartSettings.yScale)
+              .orient("left")
+              .ticks(5)
+
+        vis.append("g")
+              .attr("class", "y axis")
+              .attr("transform", "translate(" + (chartSettings.padding) + ",0)")
+              .call(yAxis);
+      })
+    });
+  </script>
+</body>
+</html>
+<!DOCTYPE html>
+<html>
diff --git a/lesson6/steps.txt b/lesson6/steps.txt
@@ -74,8 +74,13 @@ d3.select("body").append("ol").selectAll("li").data(tagCounts.slice(0, 20)).ente
 
 
 ******************************************************************************************************************
-Step 3: Create a Histogram
+Step 3: Create a bar chart
 
+cover section3.html
+
+# you have more code, but you have full control.
 
 ******************************************************************************************************************
-Step 4: Create a time series
+Step 4: Create a time series
+
+cover section4.html (left off on line 28)