example

by Igor Cuckovic

CSS

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

			.y1 {
				fill: white;
				stroke: orange;
				stroke-width: 1.5px;
			}

			.y2 {
				fill: white;
				stroke: red;
				stroke-width: 1.5px;
			}

			.y3 {
				fill: white;
				stroke: steelblue;
				stroke-width: 1.5px;
			}

			.line {
			  fill: none;
			  stroke-width: 1.5px;
			}

			div.tooltip {
	            position: absolute;
	            text-align: center;
	            width: 50px;
	            height: 10px;
	            padding: 5px;
	            font: 10px sans-serif;
	            background: whiteSmoke;
	            border: solid 1px #aaa;
	            pointer-events: none;
	            box-shadow: 2px 2px 1px #888;
            }

            .legend {
	            padding: 5px;
	            font: 10px sans-serif;
	            background: yellow;
	            box-shadow: 2px 2px 1px #888;
            }

            .title {
            	font: 13px sans-serif;
            }

JavaScript

//Width and height
    var w = 500;
    var h = 300;
    var padding = 50;
      
    var now = d3.time.hour.utc(new Date);
    var dataset = [
        [ 
            {x: d3.time.hour.utc.offset(now, -5), y: 0}, 
            {x: d3.time.hour.utc.offset(now, -4), y: 0}, 
            {x: d3.time.hour.utc.offset(now, -3), y: 2}, 
            {x: d3.time.hour.utc.offset(now, -2), y: 0}, 
            {x: d3.time.hour.utc.offset(now, -1), y: 0}, 
            {x: now, y: 0}
        ],
        [
            {x: d3.time.hour.utc.offset(now, -5), y: 3}, 
            {x: d3.time.hour.utc.offset(now, -4), y: 1}, 
            {x: d3.time.hour.utc.offset(now, -3), y: 3}, 
            {x: d3.time.hour.utc.offset(now, -2), y: 1}, 
            {x: d3.time.hour.utc.offset(now, -1), y: 5}, 
            {x: now, y: 1}
        ],
        [
            {x: d3.time.hour.utc.offset(now, -5), y: 2}, 
            {x: d3.time.hour.utc.offset(now, -4), y: 4}, 
            {x: d3.time.hour.utc.offset(now, -3), y: 1}, 
            {x: d3.time.hour.utc.offset(now, -2), y: 2}, 
            {x: d3.time.hour.utc.offset(now, -1), y: 3}, 
            {x: now, y: 1}
        ]
    ];

    var color_hash = {  0 : ["apple", "green"],
					    1 : ["mango", "orange"],
					    2 : ["cherry", "red"]
					  }                      
    
    // Define axis ranges & scales        
    var yExtents = d3.extent(d3.merge(dataset), function (d) { return d.y; });
    var xExtents = d3.extent(d3.merge(dataset), function (d) { return d.x; });
         
	var xScale = d3.time.scale()
	       .domain([xExtents[0], xExtents[1]])
	       .range([padding, w - padding * 2]);

	var yScale = d3.scale.linear()
	       .domain([0, yExtents[1]])
	       .range([h - padding, padding]);


	// Create SVG element
	var svg = d3.select("body")
	    .append("svg")
	    .attr("width", w)
	    .attr("height", h);


	// Define lines

	var pathContainers =...