joachimkrasmussen.github.io/line.js at master · joachimkrasmussen/joachimkrasmussen.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var lineData = [ { "x": 5,   "y": 20},  { "x": 10,  "y": 15},
                 { "x": 17.5,  "y": 20}, { "x": 25,  "y": 13},
                  { "x": 35,  "y": 15},  { "x": 45, "y": 9.5}];

 //Accessor function
 var lineFunction = d3.svg.line()
                          .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("monotone");

//The SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 45)
                                    .attr("height", 25);

//The line SVG Path
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");