ragunathjawahar/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
"use strict";

var viewport = {
  width: 200,
  height: 200
};

var padding = 2;
var topPadding = 20;
var dataset = [2, 4, 6, 8, 10];
var maxValue = Math.max.apply(Math, dataset);

function calculateBarHeight(d) {
  return d / maxValue * viewport.height - topPadding; // TODO what if the data is small and doesn't show up?
}

function calculateBarWidth() {
  return viewport.width / dataset.length - padding;
}

function pickColor(d) {
  if (d < 5) return "red";else return "green";
}

var svg = d3.select("body").append("svg").attr("width", viewport.width).attr("height", viewport.height);

svg.selectAll("rect").data(dataset).enter().append("rect").attr({
  x: function x(d, i) {
    return i * viewport.width / dataset.length;
  },
  y: function y(d) {
    return viewport.height - calculateBarHeight(d);
  },
  width: calculateBarWidth(),
  height: calculateBarHeight
}).style("fill", pickColor);

svg.selectAll("text").data(dataset).enter().append("text").text(function (d) {
  return d;
}).attr({
  x: function x(d, i) {
    return i * viewport.width / dataset.length + calculateBarWidth() / 2;
  },
  y: function y(d) {
    return viewport.height - calculateBarHeight(d) - 6;
  },

  "font-family": "sans-serif",
  "font-size": 12,
  "text-anchor": "middle",
  "fill": "black"
});
</script>


<script id="jsbin-source-javascript" type="text/javascript">const viewport = {
  width: 200,
  height: 200
}

const padding = 2;
const topPadding = 20;
const dataset = [2, 4, 6, 8, 10];
const maxValue = Math.max(...dataset)

function calculateBarHeight(d) {
  return d / maxValue * viewport.height - topPadding; // TODO what if the data is small and doesn't show up?
}

function calculateBarWidth() {
  return viewport.width / dataset.length - padding;
}

function pickColor(d) {
  if (d < 5) return "red"; else return "green";
}

const svg = d3
  .select("body")
  .append("svg")
    .attr("width", viewport.width)
    .attr("height", viewport.height)

svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
    .attr({
       x: function(d, i) { return i * viewport.width / dataset.length; },
       y: function(d) { return viewport.height - calculateBarHeight(d); },
       width: calculateBarWidth(),
       height: calculateBarHeight
    })
    .style("fill", pickColor);

svg
  .selectAll("text")
  .data(dataset)
  .enter()
  .append("text")
    .text(function(d) { return d; })
    .attr({
      x: function(d, i) { return (i * viewport.width / dataset.length) + (calculateBarWidth() / 2); },
      y: function(d) { return viewport.height - calculateBarHeight(d) - 6; },

      "font-family": "sans-serif",
      "font-size": 12,
      "text-anchor": "middle",
      "fill": "black"
    });
</script></body>
</html>

## jsbin.bayajep.js
"use strict";

var viewport = {
  width: 200,
  height: 200
};

var padding = 2;
var topPadding = 20;
var dataset = [2, 4, 6, 8, 10];
var maxValue = Math.max.apply(Math, dataset);

function calculateBarHeight(d) {
  return d / maxValue * viewport.height - topPadding; // TODO what if the data is small and doesn't show up?
}

function calculateBarWidth() {
  return viewport.width / dataset.length - padding;
}

function pickColor(d) {
  if (d < 5) return "red";else return "green";
}

var svg = d3.select("body").append("svg").attr("width", viewport.width).attr("height", viewport.height);

svg.selectAll("rect").data(dataset).enter().append("rect").attr({
  x: function x(d, i) {
    return i * viewport.width / dataset.length;
  },
  y: function y(d) {
    return viewport.height - calculateBarHeight(d);
  },
  width: calculateBarWidth(),
  height: calculateBarHeight
}).style("fill", pickColor);

svg.selectAll("text").data(dataset).enter().append("text").text(function (d) {
  return d;
}).attr({
  x: function x(d, i) {
    return i * viewport.width / dataset.length + calculateBarWidth() / 2;
  },
  y: function y(d) {
    return viewport.height - calculateBarHeight(d) - 6;
  },

  "font-family": "sans-serif",
  "font-size": 12,
  "text-anchor": "middle",
  "fill": "black"
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<title>JS Bin</title>
	</head>
	<body>

	<script id="jsbin-javascript">
	"use strict";

	var viewport = {
	width: 200,
	height: 200
	};

	var padding = 2;
	var topPadding = 20;
	var dataset = [2, 4, 6, 8, 10];
	var maxValue = Math.max.apply(Math, dataset);

	function calculateBarHeight(d) {
	return d / maxValue * viewport.height - topPadding; // TODO what if the data is small and doesn't show up?
	}

	function calculateBarWidth() {
	return viewport.width / dataset.length - padding;
	}

	function pickColor(d) {
	if (d < 5) return "red";else return "green";
	}

	var svg = d3.select("body").append("svg").attr("width", viewport.width).attr("height", viewport.height);

	svg.selectAll("rect").data(dataset).enter().append("rect").attr({
	x: function x(d, i) {
	return i * viewport.width / dataset.length;
	},
	y: function y(d) {
	return viewport.height - calculateBarHeight(d);
	},
	width: calculateBarWidth(),
	height: calculateBarHeight
	}).style("fill", pickColor);

	svg.selectAll("text").data(dataset).enter().append("text").text(function (d) {
	return d;
	}).attr({
	x: function x(d, i) {
	return i * viewport.width / dataset.length + calculateBarWidth() / 2;
	},
	y: function y(d) {
	return viewport.height - calculateBarHeight(d) - 6;
	},

	"font-family": "sans-serif",
	"font-size": 12,
	"text-anchor": "middle",
	"fill": "black"
	});
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const viewport = {
	width: 200,
	height: 200
	}

	const padding = 2;
	const topPadding = 20;
	const dataset = [2, 4, 6, 8, 10];
	const maxValue = Math.max(...dataset)

	function calculateBarHeight(d) {
	return d / maxValue * viewport.height - topPadding; // TODO what if the data is small and doesn't show up?
	}

	function calculateBarWidth() {
	return viewport.width / dataset.length - padding;
	}

	function pickColor(d) {
	if (d < 5) return "red"; else return "green";
	}

	const svg = d3
	.select("body")
	.append("svg")
	.attr("width", viewport.width)
	.attr("height", viewport.height)

	svg
	.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
	x: function(d, i) { return i * viewport.width / dataset.length; },
	y: function(d) { return viewport.height - calculateBarHeight(d); },
	width: calculateBarWidth(),
	height: calculateBarHeight
	})
	.style("fill", pickColor);

	svg
	.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) { return d; })
	.attr({
	x: function(d, i) { return (i * viewport.width / dataset.length) + (calculateBarWidth() / 2); },
	y: function(d) { return viewport.height - calculateBarHeight(d) - 6; },

	"font-family": "sans-serif",
	"font-size": 12,
	"text-anchor": "middle",
	"fill": "black"
	});
	</script></body>
	</html>