barchart with css

amato · Mar 17, 2015 · a174f9d · a174f9d
1 parent ba0f0c1
commit a174f9d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 21 deletions.
diff --git a/barchart-javascript/main.css b/barchart-javascript/main.css
@@ -0,0 +1,14 @@
+.axis text {
+  font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.x.axis path {
+  display: none;
+}
diff --git a/barchart-javascript/main.js b/barchart-javascript/main.js
@@ -1,35 +1,66 @@
 //# require=d3
 
-var width = 400;
-var height = 300;
+var margin = { top: 20, right: 30, bottom: 30, left: 40 };
+var width = root.clientWidth - margin.left - margin.right;
+var height = root.clientHeight - margin.top - margin.bottom;
 
-var svg = d3.select(root)
-  .append('svg')
-  .attr('width', width)
-  .attr('height', height);
+var x = d3.scale.ordinal()
+  .rangeRoundBands([0, width], .1)
+
+var y = d3.scale.linear()
+  .rangeRound([height, 0])
+
+var color = d3.scale.category10();
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient('bottom');
+
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient('left')
+
+var chart = d3.select(root).append('svg')
+    .attr('width', root.clientWidth)
+    .attr('height', root.clientHeight)
+  .append('g')
+    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
 function update(data) {
-  var list = data.transpose().toList(['name', 'value']);
+  var list = data.transpose().toList(['name', 'age']);
+
+  var key = 'age';
 
-  var x = d3.scale.ordinal()
-    .rangeRoundBands([0, width], .2)
-    .domain(list.map(function (d) { return d.name; }));
-  var y = d3.scale.linear()
-    .rangeRound([height, 0])
-    .domain([0, d3.max(list.values())]);
-  var color = d3.scale.category10()
-    .domain(list.map(function (d) { return d.name; }))
+  x.domain(list.map(function (d) { return d.name; }));
+  y.domain([0, d3.max(list.values())]);
+  color.domain(list.map(function (d) { return d.name; }))
 
   var setup = function (selection) {
     selection
-      .attr('width', x.rangeBand())
-      .attr('height', function (d) { return height - y(d.value); })
-      .attr('x', function (d) { return x(d.name); })
-      .attr('y', function (d) { return y(d.value); })
-      .style('fill', function (d) { return color(d.name); });
+        .attr('class', 'bar')
+        .attr('x', function (d) { return x(d.name); })
+        .attr('y', function (d) { return y(d[key]); })
+        .attr('height', function (d) { return height - y(d[key]); })
+        .attr('width', x.rangeBand())
+        .style('fill', function (d) { return color(d.name); });
   }
 
-  rect = svg.selectAll('rect').data(list);
+  chart.append('g')
+      .attr('class', 'x axis')
+      .attr('transform', 'translate(0,' + height + ')')
+      .call(xAxis);
+
+  chart.append('g')
+      .attr('class', 'y axis')
+      .call(yAxis)
+    .append('text')
+      .attr('transform', 'rotate(-90)')
+      .attr('y', 6)
+      .attr('dy', '.71em')
+      .style('text-anchor', 'end')
+      .text(key);
+
+  rect = chart.selectAll('.bar').data(list);
 
   rect.transition().duration(500).call(setup);