d3.js line chart (x:time, y:value)

d3js_time_line_chart.js

function render(){
d3.json("/results", function draw(data){
/*
data = {
    "key1":[
        {"date":date_description, "score":score},
        {"date":date_description, "score":score},
        ...
        ],
    "key2":[
        {"date":date_description, "score":score},
        {"date":date_description, "score":score},
        ...
        ],
    ...
    } 
*/

// for calc axis
var data_all = Array();
for ( var k in data ){
    data_all = data_all.concat(data[k]);
}

// definitions
var width = 700;
var height = 300;
var margin = 50;

// utility functions
var parseDate = d3.time.format("%Y/%m/%d %H:%M").parse;

// graph definitions
var color_scale = d3.scale.category10();
var x_extent = d3.extent(data_all, function(d){return parseDate(d.date)});
var y_extent = d3.extent(data_all, function(d){return parseInt(d.score)});
var x_scale = d3.time.scale().range([margin, width - margin]).domain(x_extent);
var y_scale = d3.scale.linear().range([height - margin, margin]).domain([0,y_extent[1]]);
d3.select("svg").remove();
var svg = d3.select("#mychart").append("svg")
    .attr({"width": width,"height": height})

// graph functions
var line_generator = d3.svg.line()
    .x(function(d){return x_scale(parseDate(d.date))})
    .y(function(d){return y_scale(parseInt(d.score))});

// axis definitions
var x_axis = d3.svg.axis().scale(x_scale).orient("bottom")
    .tickFormat(d3.time.format("%H:%M"));
var y_axis = d3.svg.axis().scale(y_scale).orient("left")
    .innerTickSize(-width);
svg.append("g").attr("class", "x axis")
    .attr("transform", "translate(0," + (height - margin) + ")")
    .call(x_axis);
svg.append("g").attr("class", "y axis")
    .attr("transform", "translate(" + margin + ",0)")
    .call(y_axis);

// render
for ( var k in data ){
    svg.append("path").attr("d", line_generator(data[k]))
        .attr("stroke", function(d){return color_scale(k);})
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .attr("class", k);
    svg.selectAll("circle." + k)
        .data(data[k]).enter().append("circle")
        .attr("class", k)
        .attr("fill", function(d){return color_scale(k);})
            .append("title")
            .text(function(d){return d.date + " [" + k + "] " + d.score;});
}
d3.selectAll("circle")
    .attr("cx", function(d){return x_scale(parseDate(d.date))})
    .attr("cy", function(d){return y_scale(parseInt(d.score))});
d3.selectAll("circle")
    .attr("r",5);
});
setTimeout(render, 5000);
}
render();
/*
<style>
path.domain {
    fill:none;
    stroke: gray;
    stroke-width:2px;
}
.tick line {
    stroke: gray;
    opacity: 0.5;
}
</style>
*/