stacked-barchart

_.md

[ Launch: stacked-barchart ] 6145480 by jandot

config.json

{"description":"stacked-barchart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/L9SOW9I.png"}

inlet.js

var svg = d3.select("svg");

var data1 = [9,195,327,71,3253];

var h = 680;

var stackHeight = 100;

var numberOfGridLines = [0,1,2,3];

var grid = svg.selectAll("line")
	.data(numberOfGridLines)
	.enter()
	.append("line")
	.attr({
      x1: 50,
      y1: function(d) { return h - stackHeight*d },
      x2: 500,
      y2: function(d) { return h - stackHeight*d },
      stroke: "#9B9B9B",
      strokeWeight: 1
	})

/*var unitBars = svg.selectAll("rect.units")
	.data(data1)
	.enter()
	.append("rect")
	.attr({
      x: function(d,i) {
        if ( d > 10 ) {
			return 80 + 60*i + 10
        } else {
          return 80 + 60*i
        }},
      y: function(d) { 
        if ( d > 10 ) {
          return h - stackHeight
        } else {
          return h - stackHeight + d
        }
      },
      width: function(d) {
        if ( d > 10 ) {
          return 2;
		} else {
          return 20;
        }
      },
      height: function(d) {
        if ( d > 10 ) {
          return stackHeight;
		} else {
          return d*10
        }
      },
      fill: "#424242",
      opacity: 0.5
    })
	.classed("units", true)
*/

var bars = function(d,s) {
    var log = Math.log(s)/Math.log(10)
    console.log("bla")
    console.log(log)
    console.log("blo")
	var b = svg.selectAll("rect".concat(s))
		.data(d)
		.enter()
		.append("rect")
		.attr({
	      x: function(d,i) {
	        if ( d > 10*s ) {
				return 80 + 60*i + 10
	        } else {
	          return 80 + 60*i
	        }},
	      y: function(d) { 
	        if ( d > 10*s ) {
	          return h - (log+1)*stackHeight
	        } else if ( d > s) {
	          return h - log*stackHeight - d // or d/s???
            } else {
              return h - log*stackHeight - 2;
            }
	      },
	      width: function(d) {
	        if ( d > 10*s ) {
	          return 2;
			} else {
	          return 20;
	        }
	      },
	      height: function(d) {
	        if ( d > 10*s ) {
	          return stackHeight;
			} else if (d > s) {
	          return d
            } else {
              return 2
            }
	      },
	      fill: "#424242",
	      opacity: 0.5
	    })
		.classed(toString(s), true)
    
    return b;
}

console.log("bla");
console.log(Math.log(1)/Math.log(10));

bars(data1,1);
bars(data1,10);
//bars(data1,100);
//bars(data1,1000);

var tensBars = svg.selectAll("rect.tens")
	.data(data1)
	.enter()
	.append("rect")
	.attr({
      x: function(d,i) {
        if ( d > 100 ) {
			return 80 + 60*i + 10
        } else {
          return 80 + 60*i
        }},
      y: function(d) {
        if ( d > 100 ) {
          return h - (Math.log(s)/Math.log(10))*stackHeight;
        } else if ( d > 10 ) {
		  return h - ((Math.log(s)/Math.log(10))-1)*stackHeight - (d/10)
        } else {
          return h - ((Math.log(s)/Math.log(10))-1)*stackHeight - 2;
        }
      },
      width: function(d) {
        if ( d > 100 ) {
          return 2;
        } else {
          return 20;
        }
      },
      height: function(d) {
        if ( d > 100 ) {
          return stackHeight;
        } else if ( d > 10 ) {
          return d;
        } else {
          return 2
        }
      },
      fill: "#424242",
      opacity: 0.5
    })
	.classed("tens", true)

var hundredsBars = svg.selectAll("rect.hundreds")
	.data(data1)
	.enter()
	.append("rect")
	.attr({
      x: function(d,i) {
        if ( d > 1000 ) {
			return 80 + 60*i + 10
        } else {
          return 80 + 60*i
        }},
      y: function(d) {
        if ( d > 1000 ) {
          return h - 3*stackHeight;
        } else if ( d > 100 ) {
		  return h - 2*stackHeight - d/10;
        } else {
          return h - 2*stackHeight - 2;
        }
      },
      width: function(d) {
        if ( d > 1000 ) {
          return 2;
        } else {
          return 20;
        }
      },
      height: function(d) {
        if ( d > 1000 ) {
          return stackHeight;
        } else if ( d > 100 ) {
          return d/10;
        } else {
          return 2
        }
      },
      fill: "#424242",
      opacity: 0.5
    })
	.classed("hundreds", true)

var thousandsBars = svg.selectAll("rect.thousands")
	.data(data1)
	.enter()
	.append("rect")
	.attr({
      x: function(d,i) {
        if ( d > 10000 ) {
			return 80 + 60*i + 10
        } else {
          return 80 + 60*i
        }},
      y: function(d) {
        if ( d > 10000 ) {
          return h - 4*stackHeight;
        } else if ( d > 1000 ) {
		  return h - 3*stackHeight - d/100
        } else {
          return h - 3*stackHeight - 2;
        }
      },
      width: function(d) {
        if ( d > 10000 ) {
          return 2;
        } else {
          return 20;
        }
      },
      height: function(d) {
        if ( d > 10000 ) {
          return stackHeight;
        } else if ( d > 1000 ) {
          return d/100
        } else {
          return 2
        }
      },
      fill: "#424242",
      opacity: 0.5
    })
	.classed("thousands", true)

var labels = svg.selectAll("text")
	.data(data1)
	.enter()
	.append("text")
    .text(function(d) { return d } )
	.attr({
      x: function(d,i) { return 80 + 60*i },
      y: h + 20,
      stroke: null,
      fill: "#5C5B5B"
	})
svg.append("text")
	.text("0")
	.attr({
	  x: 507,
	  y: 691,
      fill: "#747474"
	})
svg.append("text")
	.text("10")
	.attr({
	  x: 507,
	  y: 588,
      fill: "#747474"
	})
svg.append("text")
	.text("100")
	.attr({
	  x: 507,
	  y: 493,
      fill: "#747474"
	})
svg.append("text")
	.text("1000")
	.attr({
	  x: 507,
	  y: 380,
      fill: "#747474"
	})