UX: test2

_.md

[ Launch: UX: test2 ] 10015450 by roundrobin
[ Launch: UX: animation line explosion (simplyfied) ] 9987225 by roundrobin
[ Launch: UX: animation line explosion ] 9970647 by roundrobin
[ Launch: ux: animation button ] 9968620 by roundrobin
[ Launch: sin waves ] 9967808 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"UX: test2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/6LCZycv.png","ajax-caching":true}

inlet.js

d3.select("svg").style("background","#232F40")

g.append('text')
.text("Click anywhere on the canvas")
.attr({
  fill: "#ffffff",
  x : 14,
  y: 33,
  "font-size": 18,
  "font-family": "Arial",
  "text-anchor": "start"
});

  
var easing = "circle-out";
var duration = 350;
var mainX = 200;
var mainY = 200;
var strokeWidth = 1;
var nrOfElements = 20;


d3.select("svg").on("click", function(){
  console.log(d3.event)
  lineExp(d3.event.offsetX,d3.event.offsetY);
	
});

 
function lineExp(mainX,mainY){
 
  
  var n = nrOfElements;
  var colors = d3.scale.ordinal()
    .domain([0,n])
    .range(["#1abc9c","#3498db","#9b59b6", "#f1c40f","#e67e22","#e74c3c","#2c3e50","#c0392b"]);

  var outer =  80;
  var inner = 20;
  var idStart = Math.floor(Math.random()*1000);
  var inner2 = outer+50;
  
  var group = g.append("g")
  .attr({"class": "main-group"})
  .selectAll("line");
  
  var t = group.data(d3.range(n))
  .enter()
  .append("g")
  .attr({
    transform: "translate("+[mainX,mainY]+")",
    "class" : function(d,i){
      return "g-"+i;
    }
  });
    
  var cos = function(i,n, val){return val*Math.cos(2 * Math.PI * i / n);};  
  t.append('line')
  .attr({
    stroke:function(d,i){
      return colors(i)
    },
    "stroke-width":strokeWidth,
    fill: "none",
    "stroke-linecap": "round",
    x1: 0,
    x2: function(d,i){
      return cos(i,n,outer);
    },
    y1: 0,
    y2: function(d,i){
      return  outer * Math.sin(2 * Math.PI * i / n);
    },
    "class" : function(d,i){
      return "line-"+i;
    },
    "transform" : function(d,i){
      var x = inner * Math.cos(2 * Math.PI * i / n);
      var y = inner * Math.sin(2 * Math.PI * i / n);
      return "translate("+x+","+y+")";
    },
    "opacity": 1
  });

}