Tributary inlet

_.md

[ Launch: Tributary inlet ] 11540463 by danharr

config.json

{"description":"Tributary inlet","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/aWqdcEN.png"}

inlet.js

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

svg.attr("width",800).attr("height",600);

var mydata = [100,88,22];

var group = svg.append("g");

var color = d3.scale.linear().domain([0, 100])
    .range(["#4902d9" ,"#ff3f05"]);


var box1 = group.selectAll(".rect")
.data(mydata)
.enter()
.append("rect")
.attr("width",82)
.attr("height",82)
.attr("x",function(d,i) {return 10+ i*90;})
.attr("y",24)
.style("fill",function(d) {return color(d);})
.style("stroke","#2d0000")
.style("opacity",0.4);


group.selectAll(".labels")
.attr("class","labels")
.data(mydata)
.enter()
.append("text")
.style("font-size",35)
.attr("x",function(d,i) {return 15+ i*91;})
.attr("y",77)
.text(function(d) {return d;});