Simple multi-line chart2

_.md

[ Launch: Simple multi-line chart2 ] 866260735bc84014d323 by philderbeast
[ Launch: Simple multi-line chart2 ] 4692180 by vjpgo
[ Launch: Simple multi-line chart ] 4566902 by biovisualize
[ Launch: just another inlet to tributary ] 4560034 by biovisualize

config.json

{"description":"Simple multi-line chart2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"myData3.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.5128760529482547,"hidepanel":false,"fullscreen":false,"ajax-caching":true,"thumbnail":"http://i.imgur.com/bEs7nSJ.png"}

data.json

[{"Time":"\/Date(1390448700000+1300)\/","Value":17.400},
 {"Time":"\/Date(1390449600000+1300)\/","Value":17.400},
 {"Time":"\/Date(1390450500000+1300)\/","Value":17.400},
 {"Time":"\/Date(1390451400000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390452300000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390453200000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390454100000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390455000000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390455900000+1300)\/","Value":17.300},
 {"Time":"\/Date(1390456800000+1300)\/","Value":17.200},
 {"Time":"\/Date(1390457700000+1300)\/","Value":17.200},
 {"Time":"\/Date(1390458600000+1300)\/","Value":17.200},
 {"Time":"\/Date(1390459500000+1300)\/","Value":17.100},
 {"Time":"\/Date(1390460400000+1300)\/","Value":17.100},
 {"Time":"\/Date(1390461300000+1300)\/","Value":17.100},
 {"Time":"\/Date(1390462200000+1300)\/","Value":17.000},
 {"Time":"\/Date(1390463100000+1300)\/","Value":16.900},
 {"Time":"\/Date(1390464000000+1300)\/","Value":16.900},
 {"Time":"\/Date(1390464900000+1300)\/","Value":16.800},
 {"Time":"\/Date(1390465800000+1300)\/","Value":16.800},
 {"Time":"\/Date(1390466700000+1300)\/","Value":16.700},
 {"Time":"\/Date(1390467600000+1300)\/","Value":16.700},
 {"Time":"\/Date(1390468500000+1300)\/","Value":16.600},
 {"Time":"\/Date(1390469400000+1300)\/","Value":16.500},
 {"Time":"\/Date(1390470300000+1300)\/","Value":16.500},
 {"Time":"\/Date(1390471200000+1300)\/","Value":16.400},
 {"Time":"\/Date(1390472100000+1300)\/","Value":16.300},
 {"Time":"\/Date(1390473000000+1300)\/","Value":16.200},
 {"Time":"\/Date(1390473900000+1300)\/","Value":16.100},
 {"Time":"\/Date(1390474800000+1300)\/","Value":16.000},
 {"Time":"\/Date(1390475700000+1300)\/","Value":16.000}]

inlet.js

var data = tributary.data;
data.forEach(function(d) {
  d.time = new Date(d.time);
  d.value = +d.value
});
              
// Find the extent
var dateExtent = d3.extent(data.map(function(d, i){return d.time;}));
var trendExtent = d3.extent(data.map(function(d, i){return d.value;}));

var w = 960;
var h = 400;
var pad = 73;

var x = d3.time.scale().domain(dateExtent).range([0,w]);
var y = d3.scale.linear().domain(trendExtent).range([h,0]);

var svg =  d3.select("svg").attr("height", h + pad).attr("width", w + pad);
var vis = svg.append("g").attr("transform", "translate(40,20)");

var lineGenerator = d3.svg.line()
    .x(function(d) { console.log(1, d);return x(d.date); })
    .y(function(d) { return y(d.open); })
    .interpolate("basis");

var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSubdivide(8).tickSize(-h, -h, -h).tickFormat(d3.time.format("%m/%d/%Y"));

var yAxis = d3.svg.axis().scale(y).orient("left").ticks(6).tickSubdivide(5).tickSize(-w, -w, -w);


var axisX = vis.append("g").classed("labels x_labels", true)
    .attr("class", "x axis")
    .attr("transform", "translate(0,"+h+")")
    .call(xAxis);

vis.append("g").classed("labels y_labels", true)
    .attr("class", "y axis")
    .call(yAxis);


vis.append("path")
	.data([data])
	.attr("d", lineGenerator)
    .attr("class", "line");

style.css

path.line {
  fill: none;
  stroke: purple;
  stroke-width: 1.5;
  
}
  
path.area {
  fill: #E2B2B2;
}
  
   
.x.axis line {
   stroke: green;
   stroke-width: 1.5px;
}
  
.x.axis .minor {
   stroke-opacity: .5;
   stroke: red;
   stroke-width: 0.5px;
}
 
.x.axis path {
   fill: none;
   stroke: #000000;
   stroke-width: 1.0px;
}
   
.y.axis path {
   fill: none;
   stroke: #000000;
   stroke-width: 1.0px;
}

.y.axis line {
   fill: none;
   stroke: #17BED5;
   stroke-width: 0.81949;
}

.y.axis .minor{
   stroke: #52D12A;
   stroke-width: 0.5px;
   stroke-opacity: 0.5;
}