Model View Contoller

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"description":"Model View Contoller","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.5459734167318215,"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}

inlet.js

var width = tributary.sw;
var height = tributary.sh;

console.log('width',width)

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

var defs = svg.append('pattern')
	
var fontSize = 37;
var moveFontY = 17;

var rx = 134;
var ry = 98;

var x = width/2;
var y = 124;

svg.append("ellipse")
  .attr('id','elip')
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("rx", rx)
  .attr("ry", ry)
  .style("fill", "#161A69")
.attr('transform','translate('+x+','+y+')')
  

svg.append('svg:text')
.text('Controller')
.attr("fill", "#FFFFFF")
.attr("x", x)
.attr("y", y+moveFontY)
.attr("font-size", fontSize)
.attr("font-family", "Arial")
.attr("text-anchor", "middle");


var x = width/4.5;
var y1 = 380;

svg.append("ellipse")
  .attr('id','elip')
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("rx", rx)
  .attr("ry", ry)
  .style("fill", "#691616")
.attr('transform','translate('+x+','+y1+')')

svg.append('svg:text')
.text('Model')
.attr("fill", "#FFFFFF")
.attr("x", x)
.attr("y", y1+moveFontY)
.attr("font-size", fontSize)
.attr("font-family", "Arial")
.attr("text-anchor", "middle");


var x = width/1.3;
var y1 = 380;

svg.append("ellipse")
  .attr('id','elip')
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("rx", rx)
  .attr("ry", ry)
  .style("fill", "#535353")
.attr('transform','translate('+x+','+y1+')')

  

svg.append('svg:text')
.text('View')
.attr("fill", "#FFFFFF")
.attr("x", x)
.attr("y", y1+moveFontY)
.attr("font-size", fontSize)
.attr("font-family", "Arial")
.attr("text-anchor", "middle");

//Linien


//Quer linie 1
svg.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",3)
.attr("fill","none")
.attr("x1",width/8)
.attr("x2",(width/2)-10)
.attr("y1",y/0.6)
.attr("y2",height/2);

//Quer linie 2
svg.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",3)
.attr('stroke-dasharray',"5, 5" )
.attr("fill","none")
.attr("x1",width/8)
.attr("x2",(width/2)-10)
.attr("y1",(y/0.6)-10)
.attr("y2",(height/2)-10);


//vertikale linie
svg.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",3)
.attr("fill","none")
.attr("x1",(width/2)-10)
.attr("x2",(width/2)-10)
.attr("y1",height/2)
.attr("y2",(height/2) + 200);


var xTo = 1.1;

//Quer linie 1
svg.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",3)
.attr("fill","none")
.attr("x1",width/2)
.attr("x2",(width/xTo))
.attr("y1",height/2)
.attr("y2",y/0.6);

svg.append('svg:line')
.attr("stroke","black")
.attr('stroke-dasharray',"5, 5" )
.attr("stroke-width",3)
.attr("fill","none")
.attr("x1",width/2)
.attr("x2",(width/xTo))
.attr("y1",(height/2)-10)
.attr("y2",(y/0.6)-10);


svg.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",3)
.attr("fill","none")
.attr("x1",(width/2))
.attr("x2",(width/2))
.attr("y1",height/2)
.attr("y2",(height/2) + 200);



//Arrows
svg.append('svg:line')
.attr("stroke","#7DB381")
.attr("stroke-width",5)
.attr("fill","none")
.attr("x1",(width/2)-87)
.attr("x2",(width/2)-144)
.attr("y1",y*1.26)
.attr("y2",y*2.14323);

svg.append('svg:line')
.attr("stroke","#7DB381")
.attr("stroke-width",5)
.attr("fill","none")
.attr("x1",(width/2)+110)
.attr("x2",(width/2)+173)
.attr("y1",y*1.26)
.attr("y2",y*2.14323);