VI4 - Magnitude as Position on a Common Scale

James Eanes - VI4 - Magnitude as Position on a Common Scale

This chart is the same one we used in VI2, but without the text included in the bars. This is an example of showing magnitude as position on a common scale.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>VI4 - Magnitude as Position on a Common Scale</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
	    var w = 500;
            var h = 100;
            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 svg = d3.select("body")
            	.append("svg")
            	.attr("width", w)
            	.attr("height", h);
	    svg.selectAll("rect")
   		.data(dataset)
   		.enter()
   		.append("rect")
   		.attr("x", function(d, i) {
    			return i * (w / dataset.length);
		 })
   		.attr("y", function(d)  {
   			return h - (d * 4);
   		})
   		.attr("width", w / dataset.length - barPadding)
   		.attr("height", function(d) {
   			return d * 4;
   		})
   		.attr("fill", function(d) {
   			return "rgb(0,0," + (d * 10) + ")";
   		});
        </script>
	<div id="firstChart">
	</div>
    </body>
  </html>

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