JS Bin [Line Charts with SVG and D3add your bin description] // source http://jsbin.com/mekeki

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Line Charts with SVG and D3add your bin description]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

var h = 350;
var w = 500;

monthlySales = [
  {"month":10, "sales":100},
  {"month":20, "sales":130},
  {"month":30, "sales":250},
  {"month":40, "sales":300},
  {"month":50, "sales":265},
  {"month":60, "sales":225},
  {"month":70, "sales":180},
  {"month":80, "sales":120},
  {"month":90, "sales":140},
  {"month":100, "sales":133}
  
];

var lineFun = d3.svg.line()
.x(function(d) { return d.month*4;})
.y(function(d) { return h-d.sales;})
.interpolate("basis");

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

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

var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
.text(function(d)
      {return d.sales;
 })

.attr({
  x: function(d) { return d.month*4-20;},
  y: function(d) { return h-d.sales;},
  "font-weight": function(d,i) {
    if (i === 0 || i ==(monthlySales.length - 1)) {
      return "bold";
    } else {
      return "normal";
    }
  }
});

</script>

var h = 350;
var w = 500;

var lineFun = d3.svg.line()
.x(function(d) { return d.month*4;})
.y(function(d) { return h-d.sales;})
.interpolate("basis");

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

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

var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
.text(function(d)
      {return d.sales;
 })

</script></body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js