Data Style

_.md

[ Launch: An inlet to Tributary ] 4540425 by roundrobin

config.json

{"description":"Data Style","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.48437499999999994,"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,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/GIIdVKL.png","ajax-caching":true}

inlet.js

var svg = d3.select("svg");
var x = 140;
var y = 160;
var font_size = 29;


  
var defs = svg.append('defs')

var filter = defs.append('filter')
	.attr('id','f1')

filter.append('feGaussianBlur')
	.attr('in','SourceGraphic')
	.attr('stdDeviation','5')

svg.append('image')
.attr('xlink:href','http://thumbnails.visually.netdna-cdn.com/ces-trends-2013_50f41c1663939.png')
.attr('width',602)
.attr('height',2354)
.attr('filter','url(#f1)')
 
   
var text = svg.append('text')
	.attr('x',x)
	.attr('y',y)
	.attr('font-size',font_size)
	.attr('font-family','SF Movie POster')
    .attr('fill','#FFFFFF')  
    .text('Name: Test test')
	.attr('transform','skewY(22)')
 
y += font_size;
  
var text = svg.append('text')
	.attr('font-family','SF Movie POster')
	.attr('x',x)
	.attr('y',y)
	.attr('font-size',font_size)
    .attr('fill','#FFFFFF')  
	.text('City: Berkeley')	
	.attr('transform','skewY(22)')

y += font_size;

var text = svg.append('text')
	.attr('font-family','SF Movie POster')
	.attr('x',x+300)
	.attr('y',y)
	.attr('font-size',font_size)
    .attr('fill','#FFFFFF')  
	.text('Occupation: Developer')	
	.attr('transform','skewY(22)')
	.transition()
	.duration(2000)
	.attr('x',x)
   

svg.append('svg:line')
.attr("stroke","#fff")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x-10)
.attr("x2",x-10)
.attr("y1",y-40)
.attr("y2",y+164);

svg.append('svg:line')
.attr("stroke","#fff")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x-10)
.attr("x2",x+196)
.attr("y1",y+10)
.attr("y2",y+10)
.attr('transform','skewY(22)')
       
 
 
svg.append('svg:line')
.attr("stroke","#fff")
.attr("stroke-width",10)
.attr("fill","none")
.attr("x1",x-12)
.attr("x2",x+196)
.attr("y1",y-100)
.attr("y2",y-100)
.attr('transform','skewY(22)')