planetar

_.md

[ Launch Inlet ]
Gist #4091561 [ Launch Inlet ]
Gist #4083531 [ Launch Inlet ]
Gist #4083523 [ Launch Inlet ]
Gist #4082181 [ Launch Inlet ]
Gist #4082130 [ Launch Inlet ]
Gist #4080585 [ Launch Inlet ]
Gist #3714311
See Previous Inlet [ Gist ]

config.json

{"description":"planetar","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.744355108571304,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":288,"height":280,"hide":true},"editor_json0":{"vim":false,"emacs":false,"width":740,"height":194,"hide":true}}

inlet.js

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

var planets = tributary.planets;
/*planets.forEach(function(p) {
  p.distance = parseInt(p.distance, 10);
  p.diameter = parseInt(p.diameter, 10);
})*/
var sundata = tributary.sun;

//tributary.sw gives you the width of the display
//you can calculate it in your own app like so:
//var sw = parseInt(svg.style("width"))
//you can style your display element (svg) with 100% width and height
//and get the size in the code with that trick
/*
//if you want to be responsive you can listen to resizes of the browser
window.addEventListener('resize', function(event) {
  //recalculate width
  //redraw
})
*/
var cw = tributary.sw - 30;
console.log(tributary.sw) 
var ch = tributary.sh;

var barheight = 3;
var bargap = 28;

var sunsize = 35 * Math.sqrt(tributary.sw);

//diameter Scale
var dia_min = d3.min(planets, function(d){return d.diameter});
var dia_max = 864327; 

console.log(dia_max);
var dia_scale = d3.scale.linear()
    .domain([dia_min, dia_max])
    .range([0, sunsize]);

//distance Scale    
var dist_min = d3.min(planets, function(d){return d.distance});
var dist_max = d3.max(planets, function(d){return d.distance});

var dist_scale = d3.scale.linear()
    .domain([dist_min, dist_max])
    .range([0, cw]);    

//the sun
var thesun = svg.append("circle")
    .attr({
      fill: "#FFC50C",
      opacity: 0.8,
      cx: -346,
      cy: -43,
      r: sunsize/2
    })
    


//create SVG group container for chart
var chart = svg.append("g")
    .attr({
      id: "chart"
    })
    
    
//create bars
var bars = chart.selectAll("rect")
    .data(planets)
    .enter()
    .append("rect")
    .attr({
      fill: "#ECE99F",
      opacity: 0.95,
      height: barheight,
      width: function(d,i){
        //console.log(d.distance);
        return dist_scale(d.distance);
      },
      transform: function(d,i){
      var x = 0;
      var y = i * bargap;
      return "translate(" + [x,y] + ")";
      }
    })    
    
    
//create images
var images = chart.selectAll("image")
    .data(planets)
    .enter()
    .append("image")
    .attr({
      opacity: 0.85,
      "xlink:href": function(d,i){
        return d.img;
      },
      x: function(d,i){
        return dist_scale(d.distance);
      },
      height: function(d){
        return 2*dia_scale(d.diameter);
      },
      width: function(d){
        return 2*dia_scale(d.diameter);
      },
      transform: function(d,i){
      var x = 0 - dia_scale(d.diameter);
      var y = i * bargap - dia_scale(d.diameter);
      return "translate(" + [x,y] + ")";
      }  
    })

    
    //create circles
var bodies = chart.selectAll("circle")
    .data(planets)
    .enter()
    .append("circle")
    .attr("class", function(d) { return "planet " + d.body.toLowerCase(); })
    .attr({
      cx: function(d){
        return dist_scale(d.distance);
      },
      r: function(d){
        return dia_scale(d.diameter) + 10;
      },
      transform: function(d,i){
      var x = 0;
      var y = i * bargap + barheight/2;
      return "translate(" + [x,y] + ")";
      }  
    })

    
//SVG text filter stuffs    
var defs = d3.select('svg').append('defs');

var filter = defs.append('filter')
.attr('id','drop-shadow')
.attr('width',2.1)
.attr('height',2.6)


filter.append('feGaussianBlur')
.attr('result','result8')
.attr('id','SourceAlpha')
.attr('stdDeviation',2.07)      

filter.append('feOffset')
.attr('dx', 2)
.attr('dy', 2)
.attr('result','ctt0')


filter.append('feFlood')
.attr('flood-color','black')
.attr('result',"cFTx")  

filter.append('feComposite')
.attr('operator','in')
.attr('in1',"result8")
.attr('in2','ctt0')
.attr('result','cCH0')


var merge = filter.append('feMerge')
merge.append('feMergeNode').attr('in','cCH0');    
merge.append('feMergeNode').attr('in','SourceGraphic')
var labels = chart.append("g")
    .classed("labels",true)
    .attr("id", "labels");


var lbltxt = labels.selectAll("g.lbltxt")
    .data(planets,function(d){
      return d.body;
    })
    .enter()
    .append("g")
    .append("text")
    .classed("lbltxt", true)
    .attr({
      "text-anchor": "middle",
      "font-weight": 600,
      "font-size": tributary.sw/60,
      "fill-opacity":0.95,
      "pointer-events":"none",
      "fill": "#FFFFFF",
      "filter" : "url(#drop-shadow)"
      })
    .text(function(d) {
    return d.body + ", " + d3.round(d.lightspeedMins) + " Minutes";
    })
    .attr("transform", function(d,i) {
      var x = 0 + dist_scale(d.distance);
        var y = i * bargap - dia_scale(d.diameter) - 13;
        return "rotate(-5) translate(" + [x,y] + ")";
    })
    .attr({"alignment-baseline":"after-edge"})
    
    
    
//title text
var titlebox = svg.append("g") 
var shade = titlebox.append("rect")
 shade.attr({
      rx:9,
      x:[tributary.sw/3.33],
      y:24,
      height:87,
      width:293,
   "fill-opacity":0.5
    })
     
var title = titlebox.append("text")
    .text("Planetary")
    .attr({
      "transform": "translate(" + [tributary.sw/2, 68] + ")",
      "text-anchor": "middle",
      "font-weight": 300,
      "font-size": 42,
      "fill-opacity": 0.7,
      "fill": "#E6DFBB"
    })
    
    
 var subtitle = titlebox.append("text")
    .text("Size and Sunlight travel time")
    .attr({
      "transform": "translate(" + [tributary.sw/2, 96] + ")",
      "text-anchor": "middle",
      "font-weight": 500,
      "font-size": 17,
      "fill": "#E5F1D6"
    })    
    

planets.json

[
	{
		"body": "Mercury",
		"diameter": 3032,
		"distance": 35983610,
		"lightspeedMins": 3.2194567018463,
		"lightspeedHrs": 0.053657611697438,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/Saturn_01.svg"
	},
	{
		"body": "Venus",
		"diameter": 7521,
		"distance": 67232360,
		"lightspeedMins": 6.01528506958983,
		"lightspeedHrs": 0.100254751159831,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/Tango_Venus.svg"
	},
	{
		"body": "Earth",
		"diameter": 7926,
		"distance": 92957100,
		"lightspeedMins": 8.31687978441288,
		"lightspeedHrs": 0.138614663073548,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/Tango_Earth.svg"
	},
	{
		"body": "Mars",
		"diameter": 4222,
		"distance": 141635300,
		"lightspeedMins": 12.6721225525458,
		"lightspeedHrs": 0.21120204254243,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/Tango_Mars.svg"
	},
	{
		"body": "Jupiter",
		"diameter": 88846,
		"distance": 483632000,
		"lightspeedMins": 43.2705969086296,
		"lightspeedHrs": 0.721176615143826,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/Tango_Jupiter-noshadow.svg"
	},
	{
		"body": "Saturn",
		"diameter": 74898,
		"distance": 888188000,
		"lightspeedMins": 79.4662572515505,
		"lightspeedHrs": 1.32443762085918,
      	"img": "http://www.paulvanslembrouck.com/tributary/planets/images/Saturn_01.svg"
	},
	{
		"body": "Uranus",
		"diameter": 31763,
		"distance": 1783950000,
		"lightspeedMins": 159.610160938792,
		"lightspeedHrs": 2.66016934897986
	},
	{
		"body": "Neptune",
		"diameter": 30778,
		"distance": 2798842000,
		"lightspeedMins": 250.412636039267,
		"lightspeedHrs": 4.17354393398778
	}
]

style.css

#display {
background-image: url('http://www.paulvanslembrouck.com/tributary/planets/images/starfield.jpg');
background-size: cover;
background-repeat: no-repeat;
//background-color: #272930;
}

#chart{
	transform: 		rotate(25deg)	translateX(100px);
	-moz-transform:	rotate(25deg)	translateX(100px); /* Firefox */
	-webkit-transform:	rotate(25deg)	translateX(100px); /* Safari and Chrome */
	-o-transform:	rotate(25deg)	translateX(100px); /* Opera */}  
  
.lbltext{  
} 
  
.planet {
  fill: none;
  opacity: 0.85;
  stroke: #77888A;
}

sun.json

[
  {
		"body": "Sun",
		"diameter": 864327,
		"distance": 0,
		"lightspeedMins": 0,
		"lightspeedHrs": 0,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/sun.png"
	}
]