Another Inlet

config.json

{"description":"Another Inlet","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}},"tab":"edit","display_percent":0.7,"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 backW = 800,
    backH = 600,
    backX = 100,
    backY = 20;

var titleRectX = backX+130,
    titleRectY = backY+15;

var vis = d3.select("svg").append("g");


//pageBack.select("g")
//  .style("background-color","orange");

var background = vis.append("g:rect")
    .attr("width", backW)
    .attr("height", backH)
    .attr("x", backX)
    .attr("y", backY)
    .style("fill", "#C0C0C0");

var title = vis.append("g:rect")
    .attr("width", 500)
    .attr("height", 30)
    .attr("x", titleRectX)
    .attr("y", titleRectY)
    .style("fill", "white");

var titleText = vis.append("g:text")
    .text("Server current status")
    .attr("x", titleRectX+130)
    .attr("y", titleRectY+25)
    .style("font-family", "Oleo Script Swash Caps")
    .style("font-size", 32);

var startted = vis.append("g:circle")
    .attr("r", 120)
    .attr("cx", 240)
    .attr("cy", 200)
    .style("fill", "#E4CA95")
    .style("opacity", 0.7);

var startedText = vis.append("g:text")
    .text("isStarted = %isStarted%")
    .style("font-size", 15)
    .style("font-weight", "bold")
    .attr("x", 155)
    .attr("y", 200);

var numOfCurrentRequests = vis.append("g:circle")
    .attr("r", 120)
    .attr("cx", 740)
    .attr("cy", 200)
    .style("fill", "#95AFE4")
    .style("opacity", 0.7);

var numOfCurrentRequestsText = vis.append("g:text")
    .text("numOfCurrentRequests = %numOfCurrentRequests%")
    .style("font-size", 15)
    .style("font-weight", "bold")
    .attr("x", 630)
    .attr("y", 205);

var startDate = vis.append("g:circle")
    .attr("r", 120)
    .attr("cx", 240)
    .attr("cy", 480)
    .style("fill", "#95AFE4")
    .style("opacity", 0.7);

var startDateText = vis.append("g:text")
    .text("startDate = %startDate%")
    .style("font-size", 15)
    .style("font-weight", "bold")
    .attr("x", 155)
    .attr("y", 485);

var success = vis.append("g:circle")
    .attr("r", 120)
    .attr("cx", 740)
    .attr("cy", 480)
    .style("fill", "#E4CA95")
    .style("opacity", 0.7);

var successText = vis.append("g:text")
    .text("% of successfull requests = %precentageOfSuccesfulRequests%")
    .style("font-size", 15)
    .style("font-weight", "bold")
    .attr("x", 630)
    .attr("y", 485);

var resource = vis.append("g:circle")
    .attr("r", 120)
    .attr("cx", 490)
    .attr("cy", 350)
    .style("fill", "#CC4D33")
    .style("opacity", 0.7);

var resourceText = vis.append("g:text")
    .text("resourceMap = %resourceMap%")
    .style("font-size", 15)
    .style("font-weight", "bold")
    .attr("x", 375)
    .attr("y", 355);