All examples By author By category About

wimbr

Full window Github gist

Module 6 : line graphs

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Spacewalk - Module 6</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,ul 
{
	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%;
}

circle {
		color: red ; 
	}

svg {
		/*background-color: gray ; */
	}

svg text{
		/*fill: white ;*/ 
	}

.axis text {
				font-size: 10px;

fill:darkgrey;
			}

.y0 text {
		fill:red ;
	}

.y1 text {
		fill:blue;
	}

.axis path, .axis line {
				fill: none;
				stroke: white;
				shape-rendering: crispEdges;
				opacity: 0.1; 
			}

.yDur  {
				fill: red ;
				opacity : 1 ;
			}

.yNum {
				fill: blue ;
				opacity : 1 ;
			}

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

</style>
	</head>
	<body>
		<div class="wrapper">
		<h1>Spacewalk Revisited</h1>
		<h2>Motivation</h2>
		<p>For this line graph excercise I wanted to stick with my eva dataset of the previous modules, because I preferred researching the technical aspect over the representational, as I am more familiar with the graphic side.  The only problem (again) was that I needed an extra quantitative values for each 'date' row. </p></br>
		<p>
			After reformatting my dataset in Google Spread Sheet, using the pivot table report. I had for each date of an extravehicular activity (eva) , the <span style="color:red">duration (minutes)</span> of the eva, and the <span style="color:blue">number</span> of eva's on that day. </p>
			<p> </br>
			I am aware that a line graph of this data is not the ideal thing to do since: 
			<ul>
				<li>the line graph can since the dates are not evenly distributed accross the timeline ( a scatterd plot would be better )</li>
				<li>2 different quantitative values, need 2 different scales and thus axes( on the left and the right) </li>
			</ul> 
		</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>Conclusion</h2>
		<p style="font-size:10px;colour:#121212">It seems that in the early 70s, there was a more irregular number of spacewalks, after that there were mostly 2 eva's per date, with 3 exceptions  ( two in the ninetees, and one in 2010). </p>
		<div id="spaceScatterContainer"></div>
		<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

// since were gonna work with date data we ll need to specify a date format :
			//Define the format, in our case 2011-12-31
			// so : %x - date, as "%m/%d/%Y".

//For all options, see: https://github.com/mbostock/d3/wiki/Time-Formatting
			var dateFormat = d3.time.format("%Y-%m-%d");

// create the scale
			// number of spaceWalks
			var scaleX = d3.time.scale()
							.range([0,chart_width-padding[1]-padding[3]]);

// we need to define 2 scales, one for the total duration on that date...
			var scaleY_duration = d3.scale.linear()
							.range([0,chart_height-padding[0]-padding[2]]);
			// ... and one for the number of spacewalks on that day, they share the same range but 
			// have a different domain; see more below
			var scaleY_evaCount = d3.scale.linear()
							.range([0,chart_height-padding[0]-padding[2]]);

// create the axes

/*var x_axis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

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

var lineDuration = d3.svg.line().x(function(d){
				return scaleX(dateFormat.parse(d.evaDate));
			}).y(function(d){
				return scaleY_duration(d.duration);
			});

var lineNumberOfSpacewalks = d3.svg.line().x(function(d){
				return +scaleX(dateFormat.parse(d.evaDate));
			}).y(function(d){
				return +scaleY_evaCount(d.numberOfEvas);
			});

// we ll define 2 axes as well
			var y_axis_duration = d3.svg.axis()
						.scale(scaleY_duration)
						.orient("left")
						.tickSize(6);

var y_axis_evaCount = d3.svg.axis()
				.scale(scaleY_evaCount)
				.orient("right")
				.tickSize(6)
				.ticks(4);

//Load in contents of CSV file

d3.csv("eva_years.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 dateFormat.parse(d.evaDate);
					}),
					d3.max(data, function(d) {
						return dateFormat.parse(d.evaDate);
					})
				]);

//scaleX.domain([dateFormat.parse("1970-01-01"),dateFormat.parse("2015-01-01")]) ;

// domain for the Y on duration
				scaleY_duration.domain([d3.max(data,function(d)
					{
						return +d.duration;	
					}), d3.min(data, function(d)
					{
						return +d.duration; })]);

scaleY_evaCount.domain([d3.max(data,function(d)
					{
						return +d.numberOfEvas;	
					}), 0]);

//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);
				
				// draw the duration line

svg.data([ data ])
					.append("path")
					.attr("d", lineDuration)
					.attr("fill", "none")
					.attr("stroke", "red")
					.attr("stroke-width", 1)
					.attr("transform","translate("+Number(padding[3]) +" , " + Number(padding[0])+")")
					.attr("opacity",1);

svg.data([ data ])
					.append("path")
					.attr("d", lineNumberOfSpacewalks)
					.attr("fill", "none")
					.attr("stroke", "blue")
					.attr("stroke-width", 1)
					.attr("transform","translate("+Number(padding[3]) +" , " + Number(padding[0])+")")
					.attr("opacity",1);

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

// x axis on the left

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

// same axis on the right

svg.append("g")
				.attr("class","y y1 axis")
				.attr("transform","translate("+Number(chart_width-padding[0])+","+ Number(padding[0]) +")")
				.call(y_axis_evaCount);

svg.append("text")
				.attr("text-anchor", "middle")
				.attr("class","axLabel yNum")  
	            .attr("transform", "translate(" + Number(chart_width - 40) + ","+ Number(chart_height/2)  + ")rotate(-90)")
            	.attr("fill","blue")
            	.text("Number of extra Vehicular Activities on a given date");

svg.append("text")
				.attr("text-anchor", "middle")
				.attr("class","axLabel yDur")  
	            .attr("transform", "translate(" + Number(padding[3]-60) + ","+ Number(chart_height/2)  + ")rotate(-90)")
            	.attr("fill","red")
            	.text("Total extra vehicular time spent on a given date");
						
			});

//.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