renderChart: (data, viewport, options, lastChart) ->
         ### Starting with http://bost.ocks.org/mike/chart/
         
+
+        # margin convention http://bl.ocks.org/3019563
         margin = {top: 20, right: 20, bottom: 20, left: 20}
-        width  = 760
-        height = 320
+        width  = 760 - margin.left - margin.right
+        height = 320 - margin.top - margin.bottom
+
         xScale = d3.time.scale()
         yScale = d3.scale.linear()
         
         # Update the x-scale with the extents of the dates.
         xScale
             .domain d3.extent dates
-            .range [ 0, width - margin.left - margin.right ]
+            .range [ 0, width ]
         
         # Update the y-scale with the extents of the data.
         yScale
             .domain d3.extent allValues
-            .range [ height - margin.top - margin.bottom, 0 ]
+            .range [ height, 0 ]
         
         
         # Hack. Remove svg if it exists. If @model changes, the graph will be redrawn
                 .attr "class", "frame"
         
         # Update chart dimensions.
-        svg .attr "width", width
-            .attr "height", height
+        svg .attr "width", width + margin.left + margin.right
+            .attr "height", height + margin.top + margin.bottom
         
         frame = svg.select "g.frame"
             .attr "transform", "translate(#{margin.left},#{margin.top})"
-            .attr "width", width - margin.left - margin.right
-            .attr "height", height - margin.top - margin.bottom
+            .attr "width", width
+            .attr "height", height