data lines

by jacobwsmith

CSS

body {
    font: 10px sans-serif;
}
.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.line.second {
    stroke: red;
}
.area {
    fill: none;
    opacity: 0.5;
}
.dot {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

JavaScript

var data = [
    [12345, 42345, 3234, 22345, 72345, 62345, 32345, 92345, 52345, 22345],
    [1234, 4234, 3234, 2234, 7234, 6234, 3234, 9234, 5234, 2234]
];

var margin = {top: 30, right: 30, bottom: 30, left: 60},
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


var x = d3.scale.linear().domain([0, data[0].length]).range([0, width]),
    y = d3.scale.linear().domain([0, d3.max(data[0])]).range([height, 0]);
    xAxis = d3.svg.axis().scale(x).ticks(10),
    yAxis = d3.svg.axis().scale(y).ticks(10).orient("left");
    

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);


// horizontal lines
svg.selectAll(".hline").data(d3.range(10)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 26 + 6;
})
    .attr("y2", function (d) {
    return d * 26 + 6;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return width;
})
    .style("stroke", "#eee")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//vertical lines
svg.selectAll(".vline").data(d3.range(21)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * (width / 10);
})
    .attr("x2", function (d) {
    return d * (width / 10);
})
    .attr("y1", function (d) {
    return 0;
})
    .attr("y2", function (d) {
    return height;
})
    .style("stroke", "#eee")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    






var line = d3.svg.line()
    .x(function (d, i) {
    return x(i);
})
    .y(function (d) {
    return y(d);
});

var area = d3.svg.area()
    .x(line.x())
    .y1(line.y())
    .y0(y(0));



var lines = svg.selectAll("g")
    .data(data);

var aLineContainer = lines.enter().append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

aLineContainer.append("path")
    .attr("class",...