Permalink
Browse files

finished lesson 6 section 3. started section 4

  • Loading branch information...
1 parent 22a4729 commit f2d62c2bf9c5e8ea3ce29b70475e6d6b67b7db7f @pauldix committed Aug 30, 2012
Showing with 76 additions and 88 deletions.
  1. +0 −83 lesson6/histogram-chart.js
  2. +2 −3 lesson6/section3.html
  3. +67 −0 lesson6/section4.html
  4. +7 −2 lesson6/steps.txt
View
@@ -1,83 +0,0 @@
-function histogramChart() {
- var margin = {top: 0, right: 0, bottom: 20, left: 0},
- width = 960,
- height = 500;
-
- var histogram = d3.layout.histogram(),
- x = d3.scale.ordinal(),
- y = d3.scale.linear(),
- xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(6, 0);
-
- function chart(selection) {
- selection.each(function(data) {
-
- // Compute the histogram.
- data = histogram(data);
-
- // Update the x-scale.
- x .domain(data.map(function(d) { return d.x; }))
- .rangeRoundBands([0, width - margin.left - margin.right], .1);
-
- // Update the y-scale.
- y .domain([0, d3.max(data, function(d) { return d.y; })])
- .range([height - margin.top - margin.bottom, 0]);
-
- // Select the svg element, if it exists.
- var svg = d3.select(this).selectAll("svg").data([data]);
-
- // Otherwise, create the skeletal chart.
- var gEnter = svg.enter().append("svg").append("g");
- gEnter.append("g").attr("class", "bars");
- gEnter.append("g").attr("class", "x axis");
-
- // Update the outer dimensions.
- svg .attr("width", width)
- .attr("height", height);
-
- // Update the inner dimensions.
- var g = svg.select("g")
- .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
- // Update the bars.
- var bar = svg.select(".bars").selectAll(".bar").data(data);
- bar.enter().append("rect");
- bar.exit().remove();
- bar .attr("width", x.rangeBand())
- .attr("x", function(d) { return x(d.x); })
- .attr("y", function(d) { return y(d.y); })
- .attr("height", function(d) { return y.range()[0] - y(d.y); })
- .order();
-
- // Update the x-axis.
- g.select(".x.axis")
- .attr("transform", "translate(0," + y.range()[0] + ")")
- .call(xAxis);
- });
- }
-
- chart.margin = function(_) {
- if (!arguments.length) return margin;
- margin = _;
- return chart;
- };
-
- chart.width = function(_) {
- if (!arguments.length) return width;
- width = _;
- return chart;
- };
-
- chart.height = function(_) {
- if (!arguments.length) return height;
- height = _;
- return chart;
- };
-
- // Expose the histogram's value, range and bins method.
- d3.rebind(chart, histogram, "value", "range", "bins");
-
- // Expose the x-axis' tickFormat method.
- d3.rebind(chart, xAxis, "tickFormat");
-
- return chart;
-}
View
@@ -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>
View
@@ -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>
View
@@ -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)

0 comments on commit f2d62c2

Please sign in to comment.