just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"endpoint":"tributary","public":true}

inlet.js

var svg = d3.select("svg"),
data2 = [{n:11,txt:"text"},{n:22,txt:"text two"},{n:33,txt:"text three"},
         {n:44,txt:"text"},{n:55,txt:"text five"},{n:66,txt:"text six"},
         {n:77,txt:"text"},{n:88,txt:"text eight"}
],
groups = svg.selectAll().data(data2).enter().append("g")
	.attr("transform", function(d,i) {
	var a = (i+9)*(i*3.5) +33,b = (i+1)*(i*9) +55;
	return "translate(" + [ a, b ] + ")";
}),
circles = groups.append("circle").attr({cx:0,cy:0,
	r:(function(d) {return d.n}),fill:'orange',opacity:.5
}),
label = groups.append("text").attr({"alignment-baseline": "middle",
	"text-anchor": "middle","font-size":function(d){return d.n/2}
}),
tspans = label.append("tspan")
    .text(function(d,i){return d.txt}
);

inlet.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1129" height="640"><g transform="translate(33,55)"><circle cx="0" cy="0" r="11" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="5.5"><tspan>text</tspan></text></g><g transform="translate(68,73)"><circle cx="0" cy="0" r="22" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="11"><tspan>text two</tspan></text></g><g transform="translate(110,109)"><circle cx="0" cy="0" r="33" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="16.5"><tspan>text three</tspan></text></g><g transform="translate(159,163)"><circle cx="0" cy="0" r="44" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="22"><tspan>text</tspan></text></g><g transform="translate(215,235)"><circle cx="0" cy="0" r="55" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="27.5"><tspan>text five</tspan></text></g><g transform="translate(278,325)"><circle cx="0" cy="0" r="66" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="33"><tspan>text six</tspan></text></g><g transform="translate(348,433)"><circle cx="0" cy="0" r="77" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="38.5"><tspan>text</tspan></text></g><g transform="translate(425,559)"><circle cx="0" cy="0" r="88" fill="orange" opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" font-size="44"><tspan>text eight</tspan></text></g></svg>