jrjames83/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 = 500;
var w = 900;

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}

];

function kpiColor(d) {
  if (d>250) {
    return "#33CC66";
  } else {
    return "#666666";
  }
}

function showMinMax(ds, col, val, type) {
  var max = d3.max(ds, function(d) {return d[col];});
  var min = d3.min(ds, function(d) {return d[col];});

  if (type=="minmax" && (val==max || val==min)) {
      return val;

   } else if (type=="all") {
     return val;
  }
}


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

var dots = svg.selectAll("circle").data(monthlySales).enter()
.append("circle")
.attr({
  cx: function(d) {return d.month*3;},
  cy: function(d) {return h-d.sales;},
  r: 5,
  "fill": function(d) {
    return kpiColor(d.sales);
  }
});


var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
  .text(function (d) {
    return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
  })
.attr({
  x: function(d) {return (d.month*3)-25;},
  y: function(d) {return h-d.sales;},
  "font-size": "12px",
  "text-anchor": "start",
  "fill": "#666666"
});
</script>


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

var h = 500;
var w = 900;

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}

];

function kpiColor(d) {
  if (d>250) {
    return "#33CC66";
  } else {
    return "#666666";
  }
}

function showMinMax(ds, col, val, type) {
  var max = d3.max(ds, function(d) {return d[col];});
  var min = d3.min(ds, function(d) {return d[col];});

  if (type=="minmax" && (val==max || val==min)) {
      return val;

   } else if (type=="all") {
     return val;
  }
}


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

var dots = svg.selectAll("circle").data(monthlySales).enter()
.append("circle")
.attr({
  cx: function(d) {return d.month*3;},
  cy: function(d) {return h-d.sales;},
  r: 5,
  "fill": function(d) {
    return kpiColor(d.sales);
  }
});


var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
  .text(function (d) {
    return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
  })
.attr({
  x: function(d) {return (d.month*3)-25;},
  y: function(d) {return h-d.sales;},
  "font-size": "12px",
  "text-anchor": "start",
  "fill": "#666666"
});


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

## jsbin.xiqawa.js
// Line Chart

var h = 500;
var w = 900;

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}

];

function kpiColor(d) {
  if (d>250) {
    return "#33CC66";
  } else {
    return "#666666";
  }
}

function showMinMax(ds, col, val, type) {
  var max = d3.max(ds, function(d) {return d[col];});
  var min = d3.min(ds, function(d) {return d[col];});

  if (type=="minmax" && (val==max || val==min)) {
      return val;

   } else if (type=="all") {
     return val;
  }
}


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

var dots = svg.selectAll("circle").data(monthlySales).enter()
.append("circle")
.attr({
  cx: function(d) {return d.month*3;},
  cy: function(d) {return h-d.sales;},
  r: 5,
  "fill": function(d) {
    return kpiColor(d.sales);
  }
});


var labels = svg.selectAll("text")
  .data(monthlySales)
  .enter()
  .append("text")
  .text(function (d) {
    return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
  })
.attr({
  x: function(d) {return (d.month*3)-25;},
  y: function(d) {return h-d.sales;},
  "font-size": "12px",
  "text-anchor": "start",
  "fill": "#666666"
});
	<!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 = 500;
	var w = 900;

	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}

	];

	function kpiColor(d) {
	if (d>250) {
	return "#33CC66";
	} else {
	return "#666666";
	}
	}

	function showMinMax(ds, col, val, type) {
	var max = d3.max(ds, function(d) {return d[col];});
	var min = d3.min(ds, function(d) {return d[col];});

	if (type=="minmax" && (val==max \|\| val==min)) {
	return val;

	} else if (type=="all") {
	return val;
	}
	}


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

	var dots = svg.selectAll("circle").data(monthlySales).enter()
	.append("circle")
	.attr({
	cx: function(d) {return d.month*3;},
	cy: function(d) {return h-d.sales;},
	r: 5,
	"fill": function(d) {
	return kpiColor(d.sales);
	}
	});


	var labels = svg.selectAll("text")
	.data(monthlySales)
	.enter()
	.append("text")
	.text(function (d) {
	return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
	})
	.attr({
	x: function(d) {return (d.month*3)-25;},
	y: function(d) {return h-d.sales;},
	"font-size": "12px",
	"text-anchor": "start",
	"fill": "#666666"
	});
	</script>



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

	var h = 500;
	var w = 900;

	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}

	];

	function kpiColor(d) {
	if (d>250) {
	return "#33CC66";
	} else {
	return "#666666";
	}
	}

	function showMinMax(ds, col, val, type) {
	var max = d3.max(ds, function(d) {return d[col];});
	var min = d3.min(ds, function(d) {return d[col];});

	if (type=="minmax" && (val==max \|\| val==min)) {
	return val;

	} else if (type=="all") {
	return val;
	}
	}


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

	var dots = svg.selectAll("circle").data(monthlySales).enter()
	.append("circle")
	.attr({
	cx: function(d) {return d.month*3;},
	cy: function(d) {return h-d.sales;},
	r: 5,
	"fill": function(d) {
	return kpiColor(d.sales);
	}
	});


	var labels = svg.selectAll("text")
	.data(monthlySales)
	.enter()
	.append("text")
	.text(function (d) {
	return showMinMax(monthlySales, 'sales', d.sales, 'all'); // change 4th arg
	})
	.attr({
	x: function(d) {return (d.month*3)-25;},
	y: function(d) {return h-d.sales;},
	"font-size": "12px",
	"text-anchor": "start",
	"fill": "#666666"
	});










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