Commits

Yohann Gabory  committed aa0a81a

D3 refactoring

  • Participants
  • Parent commits 0b39ba3
  • Branches v0.3

Comments (0)

Files changed (5)

 
   - DJANGO=1.4
 
-
 install:
   - pip install -q Django==$DJANGO --use-mirrors
   - pip install pep8 --use-mirrors

File mustachebox/static/js/d3_line_chart.js

-    width = width - margin.left - margin.right,
-    height = height - margin.top - margin.bottom;
+width = width - margin.left - margin.right,
+height = height - margin.top - margin.bottom;
 
-    var x = d3.time.scale()
-        .range([0, width]);
+var x = d3.time.scale()
+    .range([0, width]);
 
-    var y = d3.scale.linear()
-        .range([height, 0]);
+var y = d3.scale.linear()
+    .range([height, 0]);
 
-    var xAxis = d3.svg.axis()
-        .scale(x)
-        .orient("bottom");
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
 
-    var yAxis = d3.svg.axis()
-        .scale(y)
-        .orient("left");
+var yAxis = d3.svg.axis()
+    .scale(y)
+    .orient("left");
 
-    var line = d3.svg.line()
-        .x(function(d) { return x(d.date); })
-        .y(function(d) { return y(d.value); });
+var line = d3.svg.line()
+    .x(function(d) { return x(d.date); })
+    .y(function(d) { return y(d.value); });
 
-    var svg = d3.select("body").append("svg")
-        .attr("width", width + margin.left + margin.right)
-        .attr("height", height + margin.top + margin.bottom)
-        .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
+var svg = d3.select("body").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 function create_graph(data){
 
     x.domain(d3.extent(data, function(d) { return d.date; }));
     y.domain(d3.extent(data, function(d) { return d.value; }));
 
-
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis);
 
     svg.append("g")
-      .attr("class", "x axis")
-      .attr("transform", "translate(0," + height + ")")
-      .call(xAxis);
-
-    svg.append("g")
-      .attr("class", "y axis")
-      .call(yAxis)
+        .attr("class", "y axis")
+        .call(yAxis)
 
     svg.append("path")
-      .datum(data)
-      .attr("class", "line")
-      .attr("d", line);
+        .datum(data)
+        .attr("class", "line")
+        .attr("d", line);
 }
-
-    create_graph(data)
-    console.log(data[0].date)
+create_graph(data)

File mustachebox/static/js/d3_multiline_chart.js

       value: +d.value };
 });
 
-
 var x = d3.time.scale()
         .range([0, width]);
 
 
 data = d3.nest().key(function(d) { return d.serie; }).entries(data);
 
-
-
-
-
 var line = d3.svg.line()
     .interpolate("basis")
     .x(function(d) {return x(d.date); })
         return d3.max(c.values, function(v) { return v.value; }); })
   ]);
 
-
-
-
 var svg = d3.select("body").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
       .attr("class", "line")
       .attr("d", function(d){return line(d.values)})
       .style("stroke", function(d) {return color(d.key); });
-

File mustachebox/templates/mustachebox/line_chart.html

 <html>
   <head>
 
-<style>
-
-body {
-  font: 10px sans-serif;
-}
-
-.axis path,
-.axis line {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
-.x.axis path {
-  display: none;
-}
-
-.line {
-  fill: none;
-  stroke: steelblue;
-  stroke-width: 1.5px;
-}
-
-</style>
-
+  <link rel="stylesheet"
+          href="{{STATIC_URL}}css/d3_lines.css"
+          type="text/css"
+          media="screen" />
     {% include "mustachebox/includes/jsheader.html" %}
     <script type="text/javascript">
       var data = {% autoescape off %}{{object.data}}{% endautoescape %}
       var height = 500;
       var margin = {top: 20, right: 20, bottom: 30, left: 50};
     </script>
-
   </head>
   <body>
 <script type="text/javascript" src="{{STATIC_URL}}js/d3_line_chart.js"></script>

File mustachebox/templates/mustachebox/multiline_chart.html

 <html>
   <head>
-
-<style>
-
-body {
-  font: 10px sans-serif;
-}
-
-.axis path,
-.axis line {
-  fill: none;
-  stroke: #000;
-  shape-rendering: crispEdges;
-}
-
-.x.axis path {
-  display: none;
-}
-
-.line {
-  fill: none;
-  stroke: steelblue;
-  stroke-width: 1.5px;
-}
-
-</style>
+    <link rel="stylesheet"
+          href="{{STATIC_URL}}css/d3_lines.css"
+          type="text/css"
+          media="screen" />
 
     {% include "mustachebox/includes/jsheader.html" %}
+
     <script type="text/javascript">
       var data = {% autoescape off %}{{object.data}}{% endautoescape %}
       var width = 960;