Module 5 Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Spacewalk - Module 4</title>
		<script src="//use.typekit.net/jet8jnr.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
	body {
		background-color: black ; 
		color: white ;
		font-family: sans-serif;
		margin: 0px auto 40px auto;
	}

p 
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 10px;
	line-height: 200%;
	color: rgb(231, 231, 231);
	width: 400px;
	margin: auto;
}

.axLabel 
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-family : "cubano-sharp", sans-serif ; */
	font-size: 10px;
	line-height: 200%;
	fill:grey;
	width: 400px;
	margin: auto;
}

h1 {
  font-family: "cubano-sharp",sans-serif;
  text-align: center;
  letter-spacing: 1px;
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 40px;
}

h2 {
	margin-top: 40px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 2px;
  text-align: center;
  color: white;
}
a {
	color: darkgray ;
}

a:visited {
	/*color:darkgray;*/
	opacity: .4 ; 
}

.wrapper {
  max-width: 800px;
  margin: auto 10% auto 10%;
}

svg {
		/*background-color: gray ; */
	}
	.axis path,
			.axis line {
				fill: none;
				stroke: white;
				shape-rendering: crispEdges;
			}

circle {
				fill: white ;
			}

circle:hover {
				fill: yellow ;
				r : 20 ; 
			}

.x.axis path, .x.axis line, .y.axis path, .y.axis line {
			opacity: 0.1; 
			}

.axis text {
				font-size: 10px;
				fill:darkgrey;
			}

</style>
	</head>
	<body>
		<div class="wrapper">
		<h1>Spacewalk</h1>
		<p>Since history of mankind around 200 people have had the opportunity being out of space. EVA, which is astro/kosmonaut slang for Extravehicular Activity means work done by an astronaut away from the Earth and outside of his or her spacecraft </p><br/>
		<p>Below is a scatterplot displaying on the x-axis for each astronaut in space the total duration spent outside a spacecraft, on the y-axis the number of spacewalks is plotted.</p>
		<br/>
		<p><em>NASA Data Source:</em> <a href="https://data.nasa.gov/Raw-Data/Extra-vehicular-Activity-EVA-US-and-Russia/9kcy-zwvn" target="_blank">https://data.nasa.gov/Raw-Data/Extra-vehicular-Activity-EVA-US-and-Russia/9kcy-zwvn</a></p>
		<div id="spaceContainer"></div>
		<h2>Notes</h2>
		<p style="font-size:10px;colour:#121212">For this exercise I still sticked with the black and white colour scheme and the very minimalistic axes. I want the dots to look as bright stars in space.</p>
		<script type="text/javascript">

// some predefined graphic properties

var chart_width = 800 ;
			var chart_height = 600 ;

var padding = [80,80,80,80] ; // padding top, right , bottom , left

// create the scale
			// number of spaceWalks
			var scaleX = d3.scale.linear()
							.range([0,chart_width-padding[1]-padding[3]]);
			// total time in space
			var scaleY = d3.scale.linear()
							.range([0,chart_height-padding[0]-padding[2]]);

// create the axes

var x_axis = d3.svg.axis()
						.scale(scaleX)
						.orient("bottom")
						.tickSize(6);

var y_axis = d3.svg.axis()
						.scale(scaleY)
						.orient("left")
						.tickSize(6);

//Load in contents of CSV file

d3.csv("spacewalks.csv", function(data) {

/*
				data.sort(function(a,b){
					 return d3.descending(+(a.duration),+(b.duration));
				})
				*/

// set the domain of scale now that the data is loaded

scaleX.domain([d3.min(data,function(d)
					{
						return +d.numberOfSpacewalks;	
					}), d3.max(data, function(d)
					{
						return +d.numberOfSpacewalks; })]);

scaleY.domain([d3.max(data,function(d)
					{
						return +d.duration;	
					}), d3.min(data, function(d)
					{
						return +d.duration; })]);

//console.log(data);
				//console.log(data.map(function(d){return d.astronautName}));
				//console.log(d3.range(data.length));

//Now CSV contents have been transformed into
				//an array of JSON objects.

//Log 'data' to the console, for verification.
				svg = d3.select('#spaceContainer').append('svg')
				.attr('width',chart_width)
				.attr('height',chart_height);

svg.selectAll('circle').data(data).enter().append('circle')
				.attr('cx', function(d){
					return padding[3]  + scaleX(d.numberOfSpacewalks) ;  
				})
				.attr('cy', function(d){
					return padding[0] + (scaleY(d.duration)); 
				})
				.attr('r', 2 )
				.append('title')
				.text(function(d){return d.astronautName + ": " + d.duration + " minutes and " + d.numberOfSpacewalks + " spacewalks." ; });

svg.append("g")
				.attr("class","x axis")
				.attr("transform","translate(" + Number(padding[3]) + ","+ Number(-padding[0] + chart_height)  + ")")
				.call(x_axis);

svg.append("g")
				.attr("class","y axis")
				.attr("transform","translate("+Number(padding[3])+","+ Number(padding[0]) +")")
				.call(y_axis);

svg.append("text")
				.attr("text-anchor", "middle")
				.attr("class","axLabel")  
	            .attr("transform", "translate(" + Number((chart_width)/2) + ","+ Number(-padding[0] + chart_height+40)  + ")")
            	.text("Number of Extra Vehicular Activities per Astronaut");

svg.append("text")
				.attr("text-anchor", "middle")
				.attr("class","axLabel")  
	            .attr("transform", "translate(" + Number(padding[3]-60) + ","+ Number(chart_height/2)  + ")rotate(-90)")
            	.text("Total extra vehicular time spent per Astronaut");
						
			});

//.attr("transform","translate(" + padding[3] + "," + chart_height-padding[2] + ")")
//.attr("transform","translate(" + Number(padding[3]) + "," + Number(chart_height-padding[2]) + ")")

</script>
</div>
	</body>
</html>

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

https://use.typekit.net/jet8jnr.js

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