Orbitting Moons

experimenting with circles and pi

forked from headwinds's block: Orbitting Moons

<!DOCTYPE html>
<meta charset="utf-8">

div.container {
      display: block;
      position: absolute;
      top: 30px;
      left:0px;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
    }

svg {
      display: block;
      position: relative;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
    }

.circleText {
      fill: #666;
      font-family: SequentialistBB, Arial, sans-serif;
    }
        .centerText {
      fill: #666;
      font-family: SequentialistBB, Arial, sans-serif;
                font-family: Arial, sans-serif;
      font-size: 26px;
    }
    button {
      width: 100px;
      height: 34px;
      border-radius: 4px;
      border: none;
      background-color: #ddd;
      pointer-events: all;
      cursor: pointer;
    }
    .d3-tip {
   font-family: 'Raleway', sans-serif;
   font-size: .8em;
   line-height: 1;
   padding: 7px;
   background: black;
   color: lightgray;
   border-radius: 20px;
}
    
 </style>
  
<body align=center bgcolor=black>
  <div class=dropdown></div>

var svg = d3.select("body").append('svg')
.attr('width', 960)
.attr('height', 960);

// animation 
var eases = ["sine", "quad", "cubic", "bounce","back"];

var curEase = eases[2];
var curScale = 1;

// dummy data
var centerX = $(window).width() / 2;
var centerY = $(window).height() / 2;

var mainTitle = "ripley".toUpperCase().split(' ')

var titleA = "bishop".toUpperCase().split(' ');
var titleB = "vasquez".toUpperCase().split(' ');
var titleC = "gorman".toUpperCase().split(' ');
var titleD = "hicks".toUpperCase().split(' ');

var titles = [titleA,titleB,titleC,titleD];

var bubble = {title: "", frequency: 0, trend: 0, x: 0, y: 500, angle: 0};

var mainBubble = _.clone(bubble);
mainBubble.title = "";
mainBubble.frequency = 1200;
mainBubble.trend = 0;
mainBubble.x = 100;

var bubbleData = [mainBubble];

data.forEach(function(d,index){
  
  var subBubble = _.clone(bubble);
  subBubble.title = d.name;
    subBubble.value2 = d.value2;

subBubble.frequency = d.value*5;
  subBubble.trend = index + 1; 
  subBubble.x = 300 * (index + 1 ); 
  
  bubbleData.push(subBubble);
  
})
                  
////////////////////////////// UTILITIES

var getRadius = function( d,i ){
    if(i ==0){
    return d.radius = 200
  }
  return d.radius = 50;
  return d.radius = Math.floor( d.frequency / 4.75 );
}

var getColor = function( i ){
  if(i ==0){
    return "orange"
  }
  return color(i)
}

var getEase = function(){
  var index = Math.floor( Math.random() * eases.length);
  return eases[index];
}
                               
var getTextStyle = function (d, textColor) {
  var that = this;
  var magicNum = 1.7; 
  var textColor = (undefined !== textColor && null !== textColor) ? textColor : "#000";

//var bubbleRadius = (null !== selRadius ) ? ( selRadius + 20 ) : d.radius; 
  var longestStrNum = _.max( d.title, function(name){ return name.length; }).length;

// if its 5 or less letters... just use 5 so small words like CAT don't look oddly large
  var longestSizeNum = ( longestStrNum <= 5 ) ? 5 : longestStrNum;
  var fontSize = Math.round ( d.radius / ( longestSizeNum / magicNum ) );
  
  var styleStr = "font-family: Arial, sans-serif; font-weight:bold; font-size: " + fontSize + "px; fill: " + textColor;
  
  return styleStr; 
};

var getFontSize = function( textArray ) {
   var textSizeArray = [];
   for (var i = 0; i < textArray.length; i++) {
     textSizeArray.push( textArray[i].length );
   }

return Math.max.apply(Math, textSizeArray);

}
 
 var getDestinationVector = function( originVector, angle, distance) {
    var destinationVector = {x: 0, y: 0};

destinationVector.x = Math.round(Math.cos(angle * Math.PI / 180) * distance + originVector.x);
    destinationVector.y = Math.round(Math.sin(angle * Math.PI / 180) * distance + originVector.y);

return destinationVector;
}

var getDistance = function(d){
  
  var mainBubbleRadius = bubbleData[0].radius;
  var centerPoint = {x: centerX, y: centerY};
  
  var targetRadius = d.radius;
  
  var distance = mainBubbleRadius + targetRadius+20;
  
  return distance;
}

var getSubBubblePoint = function(d,index){
 
  var angles = [-45, -140, -235, -320, -330];
  var centerPoint = {x: centerX, y: centerY};
  
  var distance = getDistance(d);
  
  var angle = index*-28+100
  
  d.angle = angle; 
  
  var targetPoint = getDestinationVector(centerPoint, angle, distance);
 
  return targetPoint;
}

var getOrbitPoint = function(d, direction){
 
  if (direction === "negative") d.angle++;
  else d.angle--;
  
  if (d.angle > 360 || d.angle < -360) d.angle = 0; 
  
  var angle = d.angle;
  var centerPoint = {x: centerX, y: centerY};
  
  var distance = getDistance(d); 
  
  var targetPoint = getDestinationVector(centerPoint, angle, distance);
 
  return targetPoint;
}
 
var getTranslation = function(d,index){

// move 0 to the center;
   var bubbleGroupX;
   var bubbleGroupY;
   
   switch( d.trend) {
       
     case 0 :
       bubbleGroupX = centerX;
       bubbleGroupY = centerY;
       break;
    default :
       var subBubblePoint = getSubBubblePoint(d, index);
       bubbleGroupX = subBubblePoint.x;
       bubbleGroupY = subBubblePoint.y;
       break;   
       
   }
  
  	d.x = bubbleGroupX;
    d.y = bubbleGroupY;
  
   return "translate(" + bubbleGroupX + "," + bubbleGroupY + ") scale(1)";
   
 }

var getOrbitTranslation = function(d, index, direction) {
  
  	var vector = getOrbitPoint(d,direction);
  
  	return "translate(" + vector.x + "," + vector.y + ") scale(1)";
  
}

////////////////////////////// DRAW

var bubbles;
var orbitInterval;
	    
var draw = function( bubbles ){
  
  var onBubbleClickHandler = function(d,i){
    clearInterval(orbitInterval);
    
    orbit("positive");
  }
  
      var gradientRadial = svg.append("defs").selectAll("radialGradient")
	.data(bubbles)
	.enter().append("radialGradient")
	.attr("id", function(d,i){ return "gradient-" + i; })
	.attr("cx", "30%")
	.attr("cy", "30%")
	.attr("r", "65%");
  
//Append the color stops
gradientRadial.append("stop")
	.attr("offset", "0%")
	.attr("stop-color", function(d,i) { return d3.rgb(getColor(i)).brighter(1); });
gradientRadial.append("stop")
	.attr("offset", "50%")
	.attr("stop-color", function(d,i) { return getColor(i); });
gradientRadial.append("stop")
	.attr("offset",  "100%")
	.attr("stop-color", function(d,i) { return d3.rgb(getColor(i)).darker(1.5); });

bubbles = svg.selectAll("g myCircleText")
  .data(bubbles)
  .enter()
  .append("g")
  .attr("transform", function(d){return "translate("+d.x+","+d.y+")"});
  
  bubbles
  .each(function (d, i) {
      if (i === 0 ) {  
        d3.select(this)
          .on("click", onBubbleClickHandler)
          .attr("pointer-events", "all")
          .attr("cursor", "pointer");
       }
    });

bubbles
  .append("svg:circle")
      .attr("class", function(d,i){
    if(i==0){return ""}
    return "circle"} )

.attr("r", function(d,i){return getRadius(d,i)} )
    //.attr("stroke","black")
    //.attr("stroke-width","0")
  .style("fill", function(d,i) { return "url(#gradient-" + i + ")"; });
  
  bubbles
  .each(function (d, i) {
    var container = d3.select(this);

var dy0 = -(d.title.length - 1) / 2;
    var magicNum = 1.75;

container
        .append('svg:text')
        .attr('pointer-events', 'none')
        .attr("text-anchor", "middle")

.attr("dy", "0em")
        .attr("class", function(d,i){
              if(i==0){return "centerText"}
              return"circleText"
  })        .attr("style", function(d) { return getTextStyle(d, null); }) 
        .text(function(d) { 
                          if(i ==0){
                    return key
                  }
        return d.title; })
 
            container
        .append('svg:text')
        .attr('pointer-events', 'none')
        .attr("text-anchor", "middle")

.attr("dy", "1em")
        .attr("class", function(d,i){
              if(i==0){return "centerText"}
              return"circleText"
  })
        .attr("style", function(d) { return getTextStyle(d, null); }) 
        .text(function(d) { 
                  if(i ==0){
                    return total
                  }
              return formatAbbreviation(d.value2); })
      
      ;
  });
  
  bubbles
  .transition()
  	.duration(2000)
  	.attr("transform", function(d, index){ return getTranslation(d, index)} ); 
  
  
  var orbit = function(direction){
    
    bubbles
        .each(function (d, i) {
          if (i !== 0 ) {        
            d3.select(this)
              .attr("transform", function(d, index){ return getOrbitTranslation(d, index, direction)} );

//console.log("after: ", d)
          }

});

}
  
  var animateOrbit = function(){
    
    orbitInterval = setInterval( function(){
      orbit("negative"); 
    }, 50);
	}
  
   setTimeout( function(){
       animateOrbit();   
   }, 500);

}

draw(bubbleData);

}
    
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js