Another Inlet

_.md

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

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5788758197889927,"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

d3.select("#display").style("background-color","#272930")

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

var planets = tributary.planets;

var cw = 34;
var ch = 307;
var cx = 17;
var cy = 16;

var sun = 60;

//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: "#000000",
      opacity: 0.7,
      height:3,
      width: function(d,i){
      console.log(d.distance);
        return dist_scale(d.distance);
      },
      transform: function(d,i){
      var x = 0;
      var y = i * 25;
      return "translate(" + [x,y] + ")";
      }
    })
    
//create circles
var bodies = chart.selectAll("circle")
    .data(planets)
    .enter()
    .append("circle")
    .attr({
      fill: "#768EC0",
      opacity: 0.4,
      stroke: "#BACAD6",
      cx: function(d,i){
        return dist_scale(d.distance);
      },
      r: function(d,i){
        return dia_scale(d.diameter);
      },
      transform: function(d,i){
      var x = 0;
      var y = i * 25 + 1.5;
      return "translate(" + [x,y] + ")";
      }
    })
    
    

planets.json

[
	{
		"body": "Sun",
		"diameter": "864327",
		"distance": "0",
		"lightspeedMins": "0",
		"lightspeedHrs": "0"
	},
	{
		"body": "Mercury",
		"diameter": "3032",
		"distance": "35983610",
		"lightspeedMins": "3.2194567018463",
		"lightspeedHrs": "0.053657611697438"
	},
	{
		"body": "Venus",
		"diameter": "7521",
		"distance": "67232360",
		"lightspeedMins": "6.01528506958983",
		"lightspeedHrs": "0.100254751159831"
	},
	{
		"body": "Earth",
		"diameter": "7926",
		"distance": "92957100",
		"lightspeedMins": "8.31687978441288",
		"lightspeedHrs": "0.138614663073548"
	},
	{
		"body": "Mars",
		"diameter": "4222",
		"distance": "141635300",
		"lightspeedMins": "12.6721225525458",
		"lightspeedHrs": "0.21120204254243"
	},
	{
		"body": "Jupiter",
		"diameter": "88846",
		"distance": "483632000",
		"lightspeedMins": "43.2705969086296",
		"lightspeedHrs": "0.721176615143826"
	},
	{
		"body": "Saturn",
		"diameter": "74898",
		"distance": "888188000",
		"lightspeedMins": "79.4662572515505",
		"lightspeedHrs": "1.32443762085918"
	},
	{
		"body": "Uranus",
		"diameter": "31763",
		"distance": "1783950000",
		"lightspeedMins": "159.610160938792",
		"lightspeedHrs": "2.66016934897986"
	},
	{
		"body": "Neptune",
		"diameter": "30778",
		"distance": "2798842000",
		"lightspeedMins": "250.412636039267",
		"lightspeedHrs": "4.17354393398778"
	}
]