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