a usable ui

src/modules/graph.coffee

@@ -81,7 +81,7 @@ module.exports =
         # Get available space.    
         { height, width } = document.querySelector('#graph').getBoundingClientRect()
 
-        margin = { top: 20, right: 30, bottom: 40, left: 50 }
+        margin = { top: 10, right: 30, bottom: 40, left: 50 }
         width -= margin.left + margin.right
         height -= margin.top + margin.bottom
 
@@ -104,13 +104,6 @@ module.exports =
         .tickSize(-width)
         .ticks(5)
         .tickPadding(10)
-
-        # Area generator.
-        area = d3.svg.area()
-        .interpolate("precise")
-        .x( (d) -> x(d.date) )
-        .y0(height)
-        .y1( (d) -> y(d.points) )
         
         # Line generator.
         line = d3.svg.line()
@@ -129,18 +122,6 @@ module.exports =
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
 
-        # Add the clip path.
-        svg.append("clipPath")
-        .attr("id", "clip")
-        .append("rect")
-        .attr("width", width)
-        .attr("height", height)
-
-        # Add the area path.
-        svg.append("path")
-        .attr("class", "area")
-        .attr("d", area(ideal))
-
         # Add the x-axis.
         svg.append("g")
         .attr("class", "x axis")
@@ -152,34 +133,27 @@ module.exports =
         .attr("class", "y axis")
         .call(yAxis)
 
+        # Add a line showing where we are now.
+        svg.append("svg:line")
+        .attr("class", "today")
+        .attr("x1", x(new Date()))
+        .attr("y1", 0)
+        .attr("x2", x(new Date()))
+        .attr("y2", height)
+
         # Add the ideal line path.
         svg.append("path")
         .attr("class", "ideal line")
-        .attr("d", line(ideal))
+        .attr("d", line.interpolate("basis")(ideal))
-
-        # Add an actual line drop shadow.
-        svg.append("path")
-        .attr("class", "actual line shadow")
-        .attr("d", line.y( (d) -> y(d.points) + 4 )(actual))
 
         # Add the actual line path.
         svg.append("path")
         .attr("class", "actual line")
-        .attr("d", line.y( (d) -> y(d.points) )(actual))
+        .attr("d", line.interpolate("linear").y( (d) -> y(d.points) )(actual))
 
         # Collect the tooltip here.
         tooltip = null
 
-        # Add circle shadows.
-        svg.selectAll('circle.shadow')
-        .data(actual[1...])
-        .enter()
-        .append('svg:circle')
-        .attr("cx", ({ date }) -> x date )
-        .attr("cy", ({ points }) -> y(points) + 4 )
-        .attr("r",  ({ radius }) -> 5 )
-        .attr('class', 'shadow')
-
         # Show when we closed an issue.
         svg.selectAll("a.issue")
         .data(actual[1...]) # skip the starting point
@@ -207,12 +181,4 @@ module.exports =
             tooltip?.hide(200)
         )
 
-        # Add a line showing where we are now.
-        svg.append("svg:line")
-        .attr("class", "today")
-        .attr("x1", x(new Date()))
-        .attr("y1", 0)
-        .attr("x2", x(new Date()))
-        .attr("y2", height)
-
         cb null

src/styles/app.styl

@@ -44,14 +44,12 @@ h2
 
     h1
         margin: 0
-        padding: 10px 30px
+        padding: 20px
-        color: #FFF
+        color: #64584c
-        background: #55BC75
         font-size: 20px
         text-transform: uppercase
 
 #graph
-    background: #55BC75
     height: 200px
     position: relative
 
@@ -68,46 +66,36 @@ h2
                 clip-path: url(#clip)
 
                 &.actual
-                    stroke-width: 4px
+                    stroke-width: 3px
-                    stroke: #FFF
+                    stroke: #64584c
-
-                    &.shadow
-                        stroke-width: 5px
-                        stroke: rgba(#000, 0.25)
 
                 &.ideal
-                    stroke: #3D9E68
+                    stroke: #CACACA
-                    stroke-dasharray: 5,5
+                    stroke-width: 3px
-
-            &.area
-                clip-path: url(#clip)
-                fill: #4DAF7C
 
         line
             &.today
-                stroke: rgba(#FFF, 0.75)
+                stroke: #CACACA
                 stroke-width: 1px
                 shape-rendering: crispEdges
+                stroke-dasharray: 5,5
 
         circle
-            fill: #FFF
+            fill: #64584c
             stroke: transparent
             stroke-width: 15px
             cursor: pointer
 
-            &.shadow
-                fill: rgba(#000, 0.25)
-
         .axis
             shape-rendering: crispEdges
             
             line
-                stroke: #3D9E68
+                stroke: rgba(#CACACA, 0.25)
                 shape-rendering: crispEdges
 
             text
                 font-weight: bold
-                fill: #FFF
+                fill: #CACACA
 
             path
                 display: none