Simple multi-line chart

_.md

[ Launch: just another inlet to tributary ] 4560034 by biovisualize

config.json

{"description":"Simple multi-line chart","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}},"tab":"edit","display_percent":0.5128760529482547,"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,"hidepanel":false}

inlet.js

var data = [
  [{'date': "2013-01-13", 'trendingValue': 5.98}, {'date': "2013-06-13", 'trendingValue': 3}],
  [{'date': "2013-01-13", 'trendingValue': 10.98}, {'date': "2013-06-13", 'trendingValue': 12}]
];

// Convert the date strings to Date objects
data = data.map(function(d, i){
  return d.map(function(d2, i2){
  	d2.date = new Date(d2.date);
    return d2;
  });
});

// Find the extent
var dateExtent = d3.extent(d3.merge(data).map(function(d, i){return d.date;}));
var trendExtent = d3.extent(d3.merge(data).map(function(d, i){return d.trendingValue;}));

var w = 760;
var h = 400;
var pad = 50;

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 lineGenarator = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.trendingValue); })
    .interpolate("basis");

var lines = vis.selectAll("g")
	.data([data])
	.enter().append("g")
	.selectAll("path")
	.data(function(d, i){return d;})
	.enter().append("path")
	.attr("d", lineGenarator)
	.style("stroke", "black");

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

var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).tickSubdivide(1).tickSize(10, 5, 0);

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

vis.append("g").classed("labels y_labels", true)
    .call(yAxis);

style.css

.domain, .tick{
  fill: none; 
  stroke: black;
}