joannecheng/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  circle.jupiter {
    fill: rgb(200, 80, 40);
  }
  circle.saturn {
    fill: rgb(230, 180, 40);
  }
  circle.neptune {
    fill: rgb(40, 100, 240);
  }
  circle.uranus {
    fill: rgb(180, 200, 240);
  }
  circle.mars {
    fill: rgb(240, 40, 40);
  }
  circle.earth {
    fill: rgb(30, 30, 200);
  }
</style>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
w = 1600
h = 240
maxRadius = 40

svgContainer = d3.select('body')
  .append('svg')
  .attr('height', h)
  .attr('width', w)
  .classed('planets', true)

d3.csv('/joannecheng/raw/73bdbbfc4f6eb77d28fb/planets.csv', function(planetsArray) {
  maxPlanetRadius = d3.max(planetsArray, function(d) {
    return d.diameter/2;
  })
  planetRadiusScale = d3.scale.linear()
    .domain([0, maxPlanetRadius])
    .range([0, maxRadius])
  maxDistanceFromSun = d3.max(planetsArray, function(d) {
    return parseFloat(d.distance_from_sun);
  })
  distanceScale = d3.scale.linear()
    .domain([0, maxDistanceFromSun])
    .range([0, w - maxRadius])

  planets = svgContainer.selectAll('circle.planet')
    .data(planetsArray)
    .enter()
    .append('circle')
    .attr('cy', h/2)
    .attr('r', function(d) {
      return planetRadiusScale(d.diameter/2);
    })
    .attr('class', function(d) {
      return d.name;
    })
    .attr('cx', 10)

  planets
    .transition()
    .delay(1000)
    .attr('cx', function(d, i) {
      return distanceScale(d.distance_from_sun);
    })
})
</script>

## planets.csv

          
            name
            diameter
            distance_from_sun

            
              mercury
              4879
              57.9

            
              venus
              12104
              108.2

            
              earth
              12756
              149.6

            
              mars
              6792
              227.9

            
              jupiter
              142984
              778.6

            
              saturn
              120536
              1433.5

            
              uranus
              51118
              2872.5

            
              neptune
              49528
              4495.1

            
              pluto
              2390
              5870.0
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	circle.jupiter {
	fill: rgb(200, 80, 40);
	}
	circle.saturn {
	fill: rgb(230, 180, 40);
	}
	circle.neptune {
	fill: rgb(40, 100, 240);
	}
	circle.uranus {
	fill: rgb(180, 200, 240);
	}
	circle.mars {
	fill: rgb(240, 40, 40);
	}
	circle.earth {
	fill: rgb(30, 30, 200);
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	w = 1600
	h = 240
	maxRadius = 40

	svgContainer = d3.select('body')
	.append('svg')
	.attr('height', h)
	.attr('width', w)
	.classed('planets', true)

	d3.csv('/joannecheng/raw/73bdbbfc4f6eb77d28fb/planets.csv', function(planetsArray) {
	maxPlanetRadius = d3.max(planetsArray, function(d) {
	return d.diameter/2;
	})
	planetRadiusScale = d3.scale.linear()
	.domain([0, maxPlanetRadius])
	.range([0, maxRadius])
	maxDistanceFromSun = d3.max(planetsArray, function(d) {
	return parseFloat(d.distance_from_sun);
	})
	distanceScale = d3.scale.linear()
	.domain([0, maxDistanceFromSun])
	.range([0, w - maxRadius])

	planets = svgContainer.selectAll('circle.planet')
	.data(planetsArray)
	.enter()
	.append('circle')
	.attr('cy', h/2)
	.attr('r', function(d) {
	return planetRadiusScale(d.diameter/2);
	})
	.attr('class', function(d) {
	return d.name;
	})
	.attr('cx', 10)

	planets
	.transition()
	.delay(1000)
	.attr('cx', function(d, i) {
	return distanceScale(d.distance_from_sun);
	})
	})
	</script>
name	diameter	distance_from_sun
mercury	4879	57.9
venus	12104	108.2
earth	12756	149.6
mars	6792	227.9
jupiter	142984	778.6
saturn	120536	1433.5
uranus	51118	2872.5
neptune	49528	4495.1
pluto	2390	5870.0