akrusz/d3bar5.html

## d3bar5.html
<html>
	<head>
		<title>D3 Demo: Making a bar chart with value labels!</title>
		<script type="text/javascript" src="d3.js"></script>
		<style type="text/css">
			/* No style rules here yet */
		</style>
	</head>
	<body>
		<script type="text/javascript">

			//Width and height
			var w = 800;
			var h = 500;
			var bottomMargin = 22;
			var barPadding = 1;

			var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
							11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
			var stdDevs = [ 1, 2, 3, 3, 4, 3, 6, 2, 1.5, 2,
							5, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5];

			var maxDisplayValue = -1000000;
			var minDisplayValue = 1000000;
			for(var index = 0; index < dataset.length; index++){
				// At 3.33 standard deviations away from the mean, the probability
				// density is less than 1/256 of that at the peak. We can round it
				// down to zero as there are 256 shades of web-safe gray.
				if(dataset[index] + 3.33*stdDevs[index] > maxDisplayValue){
					maxDisplayValue = dataset[index] + 3.33*stdDevs[index];
				}
				if(dataset[index] - 3.33*stdDevs[index] < minDisplayValue){
					minDisplayValue = dataset[index] - 3.33*stdDevs[index];
				}
			}

			var verticalDataExtent = maxDisplayValue - minDisplayValue;

			var maxValue = Math.max.apply(Math, dataset);

			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			var gradient = svg.append("svg:defs")
			  .append("svg:linearGradient")
				.attr("id", "gradient")
				.attr("x1", "0%")
				.attr("y1", "0%")
				.attr("x2", "0%")
				.attr("y2", "100%")
				.attr("spreadMethod", "pad");
			gradient.append("svg:stop")
				.attr("offset", "0%")
				.attr("stop-opacity", 0)
				.attr("stop-color", "#049");
			gradient.append("svg:stop")
				.attr("offset", "25%")
				.attr("stop-opacity", .25)
				.attr("stop-color", "#049");
			gradient.append("svg:stop")
				.attr("offset", "50%")
				.attr("stop-opacity", 1)
				.attr("stop-color", "#049");
			gradient.append("svg:stop")
				.attr("offset", "75%")
				.attr("stop-opacity", .25)
				.attr("stop-color", "#049");
			gradient.append("svg:stop")
				.attr("offset", "100%")
				.attr("stop-opacity", 0)
				.attr("stop-color", "#049");

//			for(var i = 0; i < 101; i++){
//				gradient.append("svg:stop")
//				.attr("offset", i + "%")
//				.attr("stop-color", "#049")
//				.attr("stop-opacity", circletop(i * .02 - 1));
//			}


			svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length);
			   })
			   .attr("y", function(d, i) {
					return (h - bottomMargin)*(maxValue - d)/maxValue;
				})
			   .attr("width", w / dataset.length - barPadding)
			   .attr("height", function(d, i) {
					return h - bottomMargin - (h - bottomMargin)*(maxValue - d)/maxValue;
				})
				.style("fill", "url(#gradient)");


			svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d, i) {
			   		return i + 1990;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
			   })
			   .attr("y", function(d) {
			   		return h - 10;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "black");


		</script>
	</body>
</html>
	<html>
	<head>
	<title>D3 Demo: Making a bar chart with value labels!</title>
	<script type="text/javascript" src="d3.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	</style>
	</head>
	<body>
	<script type="text/javascript">

	//Width and height
	var w = 800;
	var h = 500;
	var bottomMargin = 22;
	var barPadding = 1;

	var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
	11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
	var stdDevs = [ 1, 2, 3, 3, 4, 3, 6, 2, 1.5, 2,
	5, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5];

	var maxDisplayValue = -1000000;
	var minDisplayValue = 1000000;
	for(var index = 0; index < dataset.length; index++){
	// At 3.33 standard deviations away from the mean, the probability
	// density is less than 1/256 of that at the peak. We can round it
	// down to zero as there are 256 shades of web-safe gray.
	if(dataset[index] + 3.33*stdDevs[index] > maxDisplayValue){
	maxDisplayValue = dataset[index] + 3.33*stdDevs[index];
	}
	if(dataset[index] - 3.33*stdDevs[index] < minDisplayValue){
	minDisplayValue = dataset[index] - 3.33*stdDevs[index];
	}
	}

	var verticalDataExtent = maxDisplayValue - minDisplayValue;

	var maxValue = Math.max.apply(Math, dataset);

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var gradient = svg.append("svg:defs")
	.append("svg:linearGradient")
	.attr("id", "gradient")
	.attr("x1", "0%")
	.attr("y1", "0%")
	.attr("x2", "0%")
	.attr("y2", "100%")
	.attr("spreadMethod", "pad");
	gradient.append("svg:stop")
	.attr("offset", "0%")
	.attr("stop-opacity", 0)
	.attr("stop-color", "#049");
	gradient.append("svg:stop")
	.attr("offset", "25%")
	.attr("stop-opacity", .25)
	.attr("stop-color", "#049");
	gradient.append("svg:stop")
	.attr("offset", "50%")
	.attr("stop-opacity", 1)
	.attr("stop-color", "#049");
	gradient.append("svg:stop")
	.attr("offset", "75%")
	.attr("stop-opacity", .25)
	.attr("stop-color", "#049");
	gradient.append("svg:stop")
	.attr("offset", "100%")
	.attr("stop-opacity", 0)
	.attr("stop-color", "#049");

	// for(var i = 0; i < 101; i++){
	// gradient.append("svg:stop")
	// .attr("offset", i + "%")
	// .attr("stop-color", "#049")
	// .attr("stop-opacity", circletop(i * .02 - 1));
	// }


	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return i * (w / dataset.length);
	})
	.attr("y", function(d, i) {
	return (h - bottomMargin)*(maxValue - d)/maxValue;
	})
	.attr("width", w / dataset.length - barPadding)
	.attr("height", function(d, i) {
	return h - bottomMargin - (h - bottomMargin)*(maxValue - d)/maxValue;
	})
	.style("fill", "url(#gradient)");


	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d, i) {
	return i + 1990;
	})
	.attr("text-anchor", "middle")
	.attr("x", function(d, i) {
	return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
	})
	.attr("y", function(d) {
	return h - 10;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "black");



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