/index.html

## index.html
<!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>

<script id="jsbin-javascript">
// Line Chart

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>


<script id="jsbin-source-javascript" type="text/javascript">// Line Chart

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></body>
</html>

## jsbin.mekeki.js
// Line Chart

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";
    }
  }
});
	<!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>

	<script id="jsbin-javascript">
	// Line Chart

	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>



	<script id="jsbin-source-javascript" type="text/javascript">// Line Chart

	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></body>
	</html>