JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.js"></script>
<div id=graph>
    
</div>

CSS

DIV.LineChart{width:280px;height:280px;padding:12px;overflow:none}
.axis path,.axis line{fill:none;stroke:#000;shape-rendering:crispEdges}
.x.axis path{display:none}
.line{fill:none;stroke:#4682b4;stroke-width:1.5px}
path{stroke:#000;stroke-width:1;fill:none}
IMG.delete{float:right;}
IMG.delete IMG.handle{float:left;margin:0 0 4px 0}

CoffeeScript

u = _
selector = "DIV#graph"
model = x: 0, y: 0, width: 250, height: 250
margin = top: 40, right: 80, bottom: 80, left: 40


w = width = model.width 
h = height = model.height
       
        
data = [{"key":"D78","date":"2013-09-23T17:26:21.258Z","value":1.25},{"key":"D78","date":"2013-09-23T17:28:21.258Z","value":2.25},{"key":"R71","date":"2013-09-23T17:26:21.258Z","value":2.45},{"key":"R71","date":"2013-09-23T17:28:21.258Z","value":2.85},{"key":"X44","date":"2013-09-23T17:26:21.258Z","value":3.87},{"key":"X44","date":"2013-09-23T17:28:21.258Z","value":3.87}] 

svg = d3.select(selector).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).append("g")

x = d3.time.scale().range([ 0, width ])
y = d3.scale.linear().range([ height, 0 ])
format = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ")

valueLine = d3.svg.line().interpolate("basis")
        .x((d) ->
          console.log format.parse(d.date)
          x(format.parse(d.date))
        )
        .y((d) ->
          console.log d.value
          y d.value
        )
        
      svg.append("path").attr("class", "line").attr "d", valueLine(u.where(data, key: "X44"))