Tributary inlet

_.md

[ Launch: Tributary inlet ] 5384861 by jpmarindiaz
[ Launch: Tributary inlet ] 5384756 by jpmarindiaz

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 jsonCircles = [
  { 
   "x_axis": 30,
   "y_axis": 30,
   "radius": 20,
   "color" : "green"
  }, {
   "x_axis": 70,
   "y_axis": 70,
   "radius": 20,
   "color" : "purple"
  }, {
   "x_axis": 177,
   "y_axis": 37,
   "radius": 36,
   "color" : "#2CCE93"
}];

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

//.attr("width", 300)
//.attr("height", 400);

var circles = svgContainer.selectAll("circle")
                          .data(jsonCircles)
                          .enter()
                          .append("circle");

var circleAttributes = circles
                       .attr("cx", function (d) { return d.x_axis; })
                       .attr("cy", function (d) { return d.y_axis; })
                       .attr("r", function (d) { return d.radius; })
                       .style("fill", function(d) { return d.color; });


svgContainer.append("image")
.attr({
  height : 113,
  width : 102,
  "xlink:href":"http://2.gravatar.com/avatar/42b984754d50c3bd41eb2e895e48d944",
  x : 148,
  y : 86
})