Tributary inlet

_.md

[ Launch: Tributary inlet ] 5351259 by scalabl3

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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var width = 600;
var height = 600;

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

svg.append("rect")
.attr({ "x": 0, "y": 0, "width": width, "height": height, "fill": "#666"});

var data = [
  { age: 20, height: 100 },
  { age: 12, height: 90 },
  { age: 16, height: 120 }];

var x = d3.scale.linear()
  .domain([0,20])
  .range([70,150]);

var y = d3.scale.linear()
  .domain([0,20])
  .range([70,150]);

svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr({ "r": function (d) { return d.age }, 
       "cx": function(d) { return x(d.age); }, 
       "cy": function(d) { return y(d.height); }});