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