D3-LineChart

d3-LineChart.js

var w = 350;
var h = 200;

var monthlySales = [
  { 'month': 10, 'sales': 12 },
  { 'month': 20, 'sales': 8 },
  { 'month': 30, 'sales': 85 },
  { 'month': 40, 'sales': 10 },
  { 'month': 50, 'sales': 23 },
  { 'month': 60, 'sales': 85 },
  { 'month': 70, 'sales': 34 },
  { 'month': 80, 'sales': 24 },
  { 'month': 90, 'sales': 43 },
  { 'month': 100,'sales': 21 }
];

var lineFun = d3.svg.line()
  .x(function(d) { return d.month*3; })
  .y(function(d) { return d.sales; })
  .interpolate("linear");

var svgContainer = d3.select("body").append("svg").attr({
      width : w,
      height: h
    });

var viz = svgContainer.append("path")
.attr({
  "d": lineFun(monthlySales),
  "stroke": "purple",
  "stroke-width": 2,
  "fill": "none"
});

//add labels
var labels = svgContainer.selectAll("text")
.data(monthlySales)
.enter()
.append("text")
.text(function(d) {return d.sales; })
.attr({
  x : function(d) {return d.month*3;},
  y : function(d) {return d.sales;},
  "font-size": "12px",
  "font-family": 'sans-serif',
  "fill": "#666666",
  "text-anshor": "start",
  "dy": ".35em",
  "font-weight": function(d, i){
    if (i === 0 || i==(monthlySales.length-1)) {
      return "bold";
    } else {
      return "normal";
    }
  }
});