boxChart Prototype

_.md

[ Launch: boxChart Prototype ] 10015087 by PMeinshausen

config.json

{"description":"boxChart Prototype","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

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

var data1 = [
  {id: "weezy", value: 100},
  {id: "yeezy", value: 40},
  {id: "jeezy", value: 60}
  ];

var data2 = [
  {id: "weezy", value: 63},
  {id: "yeezy", value: 74},
  {id: "jeezy", value: 33}
  ];

var grid_data = [
  {id: "weezy", value: 100},
  {id: "yeezy", value: 100},
  {id: "jeezy", value: 100}
  ];

var bars = svg.selectAll("rect")
	.data(data1)
	.enter()
	.append("rect")
	.attr({
      width: 10,
      height: function(d,i){
        return d.value;
      },
      transform: function(d,i){
        var x = i * 40 + 100;
        var y = d.value + 100;
        return "translate(" + [x,y] + ")";
      }
    })
	.classed("bars", true)


var grid = svg.selectAll("box")
	.data(grid_data)
	.enter()
	.append("rect")
	.attr({
      width: 30,
      height: function(d,i){
        return d.value + 200; 
     },
      fill: "#fff",
      opacity: 0.4,
      stroke: "#000",
      transform: function(d,i){
        var x = i * 40 + 80;
        var y = 100;
        return "translate(" + [x+10, y] + ")";
      }
    })

var button = svg.append("rect")
	.attr({
      width: 100,
      height: 30,
      x: 426,
      y: 200,
      fill: "#e3e3e3",
      stroke: "#000"
	})
	.on("click", function(){
        svg.selectAll("rect.bars")
		.data(data2)
        .transition()
        .duration(1000)
        .attr({
          height: function(d,i){
            return d.value;
        },
        transform: function(d,i){
        var x = i * 40 + 100;
        var y = d.value + 100;
        return "translate(" + [x,y] + ")";
      }
        })
    })
    
  console.log("this");