D3 Examples - Scale - Solar System

Scale - Solar System
I'm working on this... I'm fascinated by scaling. Sizes. The objects begin correctly sized based upon the object's mean radius. Then they later transition to a scale rendering the sizes moot. I gave them 1 px radius so you can see them. Then the distances to the sun are shown correctly scaled. It stretches over 5,000 pixels to the right.
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>
        solar system
    </title>
</head>
<style>
​
html    {
    background-color: black;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    font-size: 10pt;
}
​
.axis path,
.axis text {
  fill: #19BBFF;
  stroke: #19BBFF;
}
​
.axis line{
    stroke: #19BBFF;
    fill: #19BBFF;
}
​
.axis2 path,
.axis2 line,
.axis2 text {
  fill: #19BBFF;
  stroke: #19BBFF;
}
​
​
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
​
<script>
​
var scale = 5000;
​
var delay = 5000, duration = 5000;
​
var width = scale + 50, height = 1300;
​
var x = d3.scale.linear().domain([0, 5873810807]).range([5, scale]);
​
var xAxis = d3.svg.axis().scale(x).orient("top").tickValues([0, 149597871, 778547263, 1433449373, 2876617461, 4503443445, 5873810807]);
​
var x0 = d3.scale.linear().domain([0,696342]).range([1, 600]);
​
var xAxis2 = d3.svg.axis().scale(x0).orient("buttom").tickValues([696342]);
​
var radius = d3.scale.linear().domain([1153, 696342]).range([1, 603]);
​
var radius1 = d3.scale.linear().domain([0, 5873810807]).range([1, scale]);
​
var distance = d3.scale.linear().domain([0 , 5873810807]).range([5 , scale]);
​
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
​
d3.csv("planets.csv", function(error, data) {
​
  data.forEach(function(d) {
    d.object = d.object;
    d.distance = +d.distance;
    d.radius = +d.radius;
    d.x1 = +d.x1;
    d.color = d.color;
    d.label = d.label;
  });
​
​
var planets = svg.selectAll(".objects")
    .data(data)
    .enter().append("circle")
    .attr("class", "objects")
    .attr("cx", function(d) {return d.x1;})
    .attr("cy", 650)
    .attr("r", function(d) {return radius(d.radius);})
    .style("fill", function(d) {return "#" + d.color;});
    
var labels = svg.selectAll(".label")
    .data(data)
    .enter().append("text")
    .attr("class", "label")
    .attr("dx", function(d) {return d.x1;})
    .attr("dy", function(d) {return 665 + radius(d.radius);})
    .attr("text-anchor", "middle")
    .style("fill", "white")
    .style("opacity", .9)
    .text( function(d) {return d.label;});
    
svg.selectAll("circle")
    .transition().duration(duration * 3).delay(delay)
    .attr("cx", function(d) {return distance(d.distance);})
    .attr("cy", function(d) {return 250;})
    .attr("r", function(d) {return radius1(d.radius);});
    
svg.selectAll(".label")
    .transition().duration(duration * 3).delay(delay)
    .attr("dx", function(d) {return distance(d.distance);})
    .attr("dy", function(d) {return 265;});
    
svg.append("g")
     .attr("class", "axis")
     .attr("id", "distanceAxis")
     .attr("transform", "translate(0," + 240 + ")")
     .style("opacity", 0)
     .call(xAxis)
     .append("text")
     .attr("y", -30)
     .attr("x", 90)
     .attr("dy", ".5em")
     .style("text-anchor", "end")
     .text("distance (km)");
     
svg.append("g")
    .attr("class", "axis2")
    .attr("id", "sizeAxis")
    .attr("transform", "translate(2," + 650 + ")")
    .style("opacity", 1)
    .call(xAxis2)
    .append("text")
    .attr("y", -15)
    .attr("x", 75)
    .attr("dy", ".5em")
    .style("text-anchor", "end")
    .text("radius (km)");
      
svg.selectAll("#distanceAxis")
    .transition().duration(4 * duration / 5).delay(delay * 4)
    .style("opacity", .9);
    
svg.selectAll("#sizeAxis")
    .transition().duration(2 * duration / 5).delay(4 * delay / 5 )
    .style("opacity", 0);
​
​
});
​
</script>
    