bar1.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title> The Banal Bars</title>
		<script type="text/javascript" src="d3.js"></script>
		<style type="text/css">
		p{
			padding: 10px}
		</style>
	</head>
	<body>
	<p>
		
		The ubiquitos bars charts, that's it! Still, here, fully handmade (SVG and data based).
	<br>
		And as promised, the colors are no longer <em>kunstwollen</em> based but linked to the data:
	<br>
		precisely, the first two of RGB are fix and the number of B (blue) is determined by the data.
	<br>
		In this way, the blue shadow varies regarding to the data (number).
	<br>
		The things are simple, while there is a simple list of data: to one position corresponds one value.
	<br>
		Next step: introducing two (or more) values.
	</p>
		<script type="text/javascript">

            var w = 500;
            var h = 400;
            var barPadding = 1;
            
            var dataset = [7, 4, 10, 41, 15, 12, 20, 25, 30, 47, 60, 90, 5];
            
    
            
    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;
    })
            .style("fill", function(d){
            return "rgb(10, 10, "   Math.round(d*5)  ")";
    })
            
    svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d){
        return d;
    })
            .attr("x", function(d,i){
                return i*(w/dataset.length)  15 ;
    })
            .attr("y", function(d){
            return h - d*4   15;
        
    })
            .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", "white");
            
            
		</script>
	</body>
</html>