Marks Comparision

<!DOCTYPE html>
<html>
<head>
	<title>Welcome to D3 tutorial </title>
	<style type="text/css">

body, html {
    font-family:"Arial", sans-serif;
    font-size:0.95em;
    text-align:center;
	}

#mark-chart {
		 background-color:#F5F2EB;
     border: 1px solid #CCC;
	}

.axis path,
	.axis line {
		fill: none;
		stroke : #ccc;
		shape-rendering: crispEdges;
	}
	</style>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>
<h1><center>Archanna's Marks Comparision :D</center></h1>

var N = markList.length;

for(var i = 0; i < N; i++) {
	if(markList[i].marks < 0 || markList[i].marks > 100) {
		console.error("Invalid Mark Attribute for " + markList[i].subject + " " + markList[i].marks);
		return;
	}
}
console.log(markList);

var W = 850, H = 550;

var margin = {
	top:10,
	right:10,
	bottom:100, 
	left:60
};

var width = W - margin.left - margin.right;
var height = H - margin.top - margin.bottom;

var yScale = d3.scale.linear().domain([0, 100]).range([height, 0]);
var xScale = d3.scale.ordinal().domain(markList.map(function(d) {
	return d.subject;
})).rangeBands([0, width]);

var generalColorScale = d3.scale.category20();

var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient('bottom');

var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient('left');

var markChart = d3.select('body')
							.append('svg')
							.attr('width', W)
							.attr('height', H)
							.attr('id', 'mark-chart')
							.append('g')
							.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

//Axis Template done
var xAxisGroup = markChart.append('g')
	.classed('x axis', true)
	.attr('transform', 'translate(' + 0 + ',' + height + ')')
	.call(xAxis);

xAxisGroup.selectAll('text')
	.attr('transform', 'rotate(-45)')
	.style('text-anchor', 'end');

var yAxisGroup = markChart.append('g')
	.classed('y axis', true)
	.attr('transform', 'translate(' + 0 + ',' + 0 + ')')
	.call(yAxis);

xAxisGroup.append('text')
.text('Subject')
.attr('x', '0')
.attr('y', '0')
.attr('transform', 'translate(' + width/2 + ',' + 80 + ')');

yAxisGroup.append('text')
.text('Marks (Max 100)')
.attr('x', '0')
.attr('y', '0')
.attr('transform', 'translate(' + -50 + ',' + height/2 + ') rotate(90)');

//End of Axis Template done

markChart.selectAll('mark-bar')
	.data(markList)
	.enter()
	.append('rect')
	.attr('x', function(d) {return xScale(d.subject);})
	.attr('y', function(d) {return yScale(d.marks);})
	.attr('width', 0.99 * xScale.rangeBand())
	.attr('height', function(d) {return height - yScale(d.marks)})
	.style('fill', function(d) {return generalColorScale(d.marks)})
	// .style('fill', function(d) {
	// 	if(40 > d.marks) {
	// 		return 'red';
	// 	}
	// 	if(70 > d.marks) {
	// 		return 'yellow';
	// 	}
	// 	return 'green'
	// });

}();

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js

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