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.

<!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>

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;
  });

});

</script>

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

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