enhance info test

_.md

[ Launch: enhance info test ] cc4700b1fb7c30177fa4 by ninjaPixel
[ Launch: Tributary inlet ] 6955303 by enjalot
[ Launch: Tributary inlet ] 6955078 by enjalot
[ Launch: Tributary inlet ] 6954884 by enjalot

config.json

{"description":"enhance info test","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,"thumbnail":"http://i.imgur.com/Xj3Ujt2.png","ajax-caching":true}

inlet.js

// http://tributary.io/inlet/cc4700b1fb7c30177fa4
var svgContainer = d3.select("svg");

var jsonCircles = [{
    'x_axis': 22,
    'y_axis': 22,
    'radius': 20
}],
    fillColor = '#9b9b9b',
    opacity = 0.7,
    strokeColor = '#333';

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

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: fillColor,
                        opacity: opacity,
                        stroke: strokeColor 
                    });

var text1 = svgContainer.selectAll('text1')
    .data([0])
    .enter()
    .append('text').classed('text1', true);

text1.attr('x', 48)
    .attr('y', 29)
    .text('Annualised Performance over previous 36 months');


var x = 22, y = 136;

svgContainer.append('line')
.attr({x1:x,
       y1:50,
       x2: x,
       y2: y})
.style({stroke: fillColor,
        'stroke-width':3
       });

svgContainer.append('line')
.attr({x1:x-10,
       y1:y,
       x2: x+10,
       y2: y})
.style({stroke: fillColor,
        'stroke-width':1
       });
  
 var text2 = svgContainer.selectAll('text2')
    .data([0])
    .enter()
    .append('text').classed('text2', true);

text2.attr('x', 48)
    .attr('y', 98)
    .text('Max. drawdown over previous 36 months'); 


arr = ['first line', 'second line'];
var text3 = svgContainer.selectAll('text3')
    .data(arr)
    .enter()
    .append('text').classed('text3', true);

text3.attr('x', 48)
    .attr('y', 290)       
    .each(function (d,i) {
            d3.select(this).append("tspan")
                .text(d)
                .attr("dy", i ? "1.2em" : 0)
                .attr("x", 0)
                //.attr("text-anchor", "middle")
                .attr("class", "tspan" + i);
});