Another Inlet

_.md

[ Launch Inlet ]
Gist #4082130 [ Launch Inlet ]
Gist #4080585 [ Launch Inlet ]
Gist #3714311
See Previous Inlet [ Gist ]

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5610224900130313,"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 cw = 1200;
var ch = 307;
var cx = 17;
var cy = 16;

var barheight = 3;
var bargap = 52;

var sun = 1055;

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

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

//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]);    
   
//create SVG group container for chart
var chart = svg.append("g")
    .attr("id","chart")
	.attr("transform", "translate(" + [cx, cy] + ")");


    
//create bars
var bars = chart.selectAll("rect")
    .data(planets)
    .enter()
    .append("rect")
    .attr({
      fill: "#ECE99F",
      opacity: 0.95,
      height: barheight,
      width: function(d,i){
        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,i){
        return 2*dia_scale(d.diameter);
      },
      width: function(d,i){
        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,i){
        return dist_scale(d.distance);
      },
      r: function(d,i){
        return dia_scale(d.diameter) + 10;
      },
      transform: function(d,i){
      var x = 0;
      var y = i * bargap + barheight/2;
      return "translate(" + [x,y] + ")";
      }  
    })

var labels = chart.append("g")
    .classed("labels",true)
    .attr("id", "labels");

var lbltxt = labels.selectAll("g.lbltxt")
    .data(planets)
    .enter()
    .append("g")
    .append("text")
    .classed("lbltxt", true)
    .attr({
      "text-anchor": "middle",
      "font-weight": 900,
      "font-size": 12,
      "fill-opacity":0.95,
      "pointer-events":"none",
      "fill": "#FFFFFF",
      "stroke": "#596869",
      "stroke-width": 0.5
      })
    .text(function(d) {
    return d.body + ", " + d3.round(d.lightspeedMins) + " Minutes" 
    })
    .attr("transform", function(d,i) {
      var x = 35 + dist_scale(d.distance);
        var y = i * bargap + dia_scale(d.diameter) + 7;
        return "translate(" + [x,y] + ")";
    })
    .attr({"alignment-baseline":"after-edge"})
    
    
    
//title text
var shade = svg.append("rect")
    
 shade.attr({
      rx:9,
      x:171,
      y:9,
      height:87,
      width:293,
   "fill-opacity":0.25
    })
     
var title = svg.append("text")
    .text("Planetary")
    .attr({
      "transform": "translate(" + [320, 51] + ")",
      "text-anchor": "middle",
      "font-weight": 300,
      "font-size": 42,
      "fill-opacity": 0.7,
      "fill": "#E6DFBB"
    })
    
 var subtitle = svg.append("text")
    .text("Size and Sunlight travel time")
    .attr({
      "transform": "translate(" + [319, 80] + ")",
      "text-anchor": "middle",
      "font-weight": 500,
      "font-size": 17,
      "fill": "#E5F1D6"
    })    
    
    
    
    
/*    
svg.append("image")
  .attr({
    width: 100,
    height: 100,
    "xlink:href":"http://www.paulvanslembrouck.com/tributary/planets/images/Saturn_01.svg"
  })
*/
    
    

planets.json

[
	{
		"body": "Sun",
		"diameter": 864327,
		"distance": 0,
		"lightspeedMins": 0,
		"lightspeedHrs": 0,
      "img": "http://www.paulvanslembrouck.com/tributary/planets/images/sun.png"
	},
	{
		"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;
}

.lbltext{  
} 
  
.planet {
  fill: none;
  opacity: 0.85;
  stroke: #77888A;
}

.sun {
-ms-transform: translate(-100,-100) !important; /* IE 9 */
-moz-transform: translate(-100,-100) !important; /* Firefox */
-webkit-transform: translate(-188,-141) !important; /* Safari and Chrome */
-o-transform: translate(-100,-100) !important; /* Opera */
}