toolkit/javascript/d3/examples/axis/axis-ggplot2.html
changeset 47 c0b4a8b5a012
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/axis/axis-ggplot2.html	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="../../d3.js"></script>
+    <style type="text/css">
+
+body {
+  font: 10px sans-serif;
+}
+
+rect {
+  fill: #ddd;
+}
+
+.grid line {
+  stroke: #fff;
+}
+
+.grid line.minor {
+  stroke-width: .5px;
+}
+
+.grid text {
+  display: none;
+}
+
+.axis line {
+  stroke: #000;
+}
+
+path {
+  display: none;
+}
+
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+var m = [10, 10, 20, 10],
+    w = 960 - m[1] - m[3],
+    h = 80 - m[0] - m[2],
+    x = d3.scale.linear().domain([.05, .95]).range([0, w]),
+    y = d3.scale.linear().range([0, h]);
+
+var svg = d3.select("body").append("svg:svg")
+    .attr("width", w + m[1] + m[3])
+    .attr("height", h + m[0] + m[2])
+  .append("svg:g")
+    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+svg.append("svg:rect")
+    .attr("width", w)
+    .attr("height", h);
+
+svg.append("svg:g")
+    .attr("class", "x grid")
+    .attr("transform", "translate(0," + h + ")")
+    .call(d3.svg.axis().scale(x).tickSubdivide(1).tickSize(-h));
+
+svg.append("svg:g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0," + h + ")")
+    .call(d3.svg.axis().scale(x));
+
+    </script>
+  </body>
+</html>