[Pkg-javascript-commits] [d3-tip.js] 53/277: improve bar example

Thu Dec 8 06:57:16 UTC 2016

This is an automated email from the git hooks/post-receive script.

bhuvan-guest pushed a commit to branch master
in repository d3-tip.js.

commit 77102f5f4763644beb806ce3c370907192f27bc3
Author: Justin Palmer <justin at github.com>
Date:   Fri Apr 5 10:06:09 2013 -0700

    improve bar example
---
 examples/bars.html | 110 +++++++++++++++++++++++++++++------------------------
 1 file changed, 61 insertions(+), 49 deletions(-)

diff --git a/examples/bars.html b/examples/bars.html
index 75d41d0..fb02c4e 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -7,6 +7,12 @@
   <script type="text/javascript" src="../components/d3/d3.js"></script>
   <script type="text/javascript" src="../src/d3.tip.js"></script>
   <style type="text/css">
+  body {
+    padding: 40px;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 12px;
+  }
+
   .d3-tip {
     fill: #c00;
     font-weight: bold;
@@ -19,69 +25,75 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 
-  .rule {
+  .domain {
+    display: none;
+  }
+
+  .axis line {
     stroke-width: 1px;
-    stroke: #c00;
+    stroke: #eee;
     shape-rendering: crispedges;
   }
+
+  .axis text {
+    fill: #888;
+  }
+
+  rect {
+    fill: #339cff;
+    fill-opacity: 0.7;
+  }
+
+  rect:hover {
+    fill-opacity: 1;
+  }
   </style>
 </head>
 <body>
-  <script type="text/javascript">
-    var w = 500,
-        h = 500,
-        linex, liney,
-        data = [500, 100],
-        x  = d3.scale.ordinal().domain(d3.range(data.length)).rangeRoundBands([0, w], 0.1),
-        y  = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]),
-        tip = d3.svg.tip()
-          .orient('left')
-          .padding(5)
-          .text(function(d) { return d; })
-          .attr('class', 'd3-tip')
+  <div id="graph">
 
+  </div>
+  <script type="text/javascript">
+    var w = 800,
+        h = 300,
+        padt = 20, padr = 20, padb = 60, padl = 30,
+        x  = d3.scale.ordinal().rangeRoundBands([0, w - padl - padr], 0.1),
+        y  = d3.scale.linear().range([h, 0]),
+        yAxis = d3.svg.axis().scale(y).orient('left').tickSize(-w + padl + padr),
+        xAxis = d3.svg.axis().scale(x).orient('bottom')
 
-    vis = d3.select(document.body)
+    vis = d3.select('#graph')
       .append('svg')
-      .attr('width', 500)
-      .attr('height', 500)
+    .append('g')
+      .attr('transform', 'translate(' + padl + ',' + padt + ')')
 
-    vis.selectAll('rect')
-      .data(data)
-    .enter().append('rect')
-      .attr('width', function() { return x.rangeBand() })
-      .attr('height', function(d) { return h - y(d) })
-      .attr('y', function(d) { return y(d) })
-      .attr('x', function(d, i) { return x(i) })
-      .on('mouseover', tip)
-      .on('click', function() {
-        var rect = this.getBoundingClientRect(),
-            bbox = this.getBBox(),
-            x = bbox.x + (bbox.width / 2),
-            y = bbox.y;
+    d3.json('data.json', function (data) {
+      var max = d3.max(data, function(d) { return d.total })
+      x.domain(d3.range(data.length))
+      y.domain([0, max])
 
-        linex.transition()
-          .attr('x1', x)
-          .attr('x2', x)
+      vis.append("g")
+        .attr("class", "y axis")
+        .call(yAxis)
 
-        liney.transition()
-          .attr('y1', y)
-          .attr('y2',y)
-      })
+      vis.append("g")
+        .attr("class", "x axis")
+        .attr('transform', 'translate(0,' + h + ')')
+        .call(xAxis)
+        .selectAll('.x.axis g')
+          .style('display', function (d, i) { return i % 3 != 0  ? 'none' : 'block' })
 
-    linex = vis.append('line')
-      .attr("x1", 0)
-      .attr("y1", 0)
-      .attr("x2", 0)
-      .attr("y2", h)
-      .attr('class', 'rule')
+      var bars = vis.selectAll('g.bar')
+        .data(data)
+      .enter().append('g')
+        .attr('class', 'bar')
+        .attr('transform', function (d, i) { return "translate(" + x(i) + ", 0)" })
 
-    liney = vis.append('line')
-      .attr("x1", 0)
-      .attr("y1", 0)
-      .attr("x2", w)
-      .attr("y2", 0)
-      .attr('class', 'rule')
+      bars.append('rect')
+        .attr('width', function() { return x.rangeBand() })
+        .attr('height', function(d) { return h - y(d.total) })
+        .attr('y', function(d) { return y(d.total) })
+    })
   </script>
 </body>
 </html>
\ No newline at end of file

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/d3-tip.js.git

