SpaceActuary/README.md

## README.md

      
    Raw
  

              README.md
            
          
    hello markdown


## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .axis text {
      font: 10px sans-serif;
    }
  </style>
</head>

<body>

  <script>
    d3.csv("o-ring.txt", function(data){
    // data that you want to plot, I've used separate arrays for x and y values
    var xdata = [5, 10, 15, 20],
        ydata = [3, 17, 4, 6];

    var x = function(d){ return d.temp; },
    	  y = function(d){ return d.damage; };

    // size and margins for the chart
    var margin = {top: 20, right: 15, bottom: 60, left: 60}
      , width = 960 - margin.left - margin.right
      , height = 500 - margin.top - margin.bottom;

    // x and y scales, I've used linear here but there are other options
    // the scales translate data values to pixel values for you
    var x = d3.scale.linear()
              .domain([0, d3.max(data, x)])  // the range of the values to plot
              .range([ 0, width ]);        // the pixel range of the x-axis

    var y = d3.scale.linear()
              .domain([0, d3.max(data, y)])
              .range([ height, 0 ]);

    // the chart object, includes all margins
    var chart = d3.select('body')
        .append('svg:svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .attr('class', 'chart')

    // the main object where the chart and axis will be drawn
    var main = chart.append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'main')

    // draw the x axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom');

    main.append('g')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('class', 'main axis date')
        .call(xAxis);

    // draw the y axis
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left');

    main.append('g')
        .attr('transform', 'translate(0,0)')
        .attr('class', 'main axis date')
        .call(yAxis);

    // draw the graph object
    var g = main.append("svg:g");

    g.selectAll("scatter-dots")
      .data(ydata)  // using the values in the ydata array
      .enter().append("svg:circle")  // create a new circle for each value
          .attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
          .attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
          .attr("r", 10) // radius of circle
          .style("opacity", 0.6); // opacity of circle

    });
  </script>
</body>


## o-ring.txt
"temp","damage","jitter"
66,0,0
70,4,-0.5
69,0,0
68,0,0
67,0,0
72,0,0
73,0,0
70,0,-0.5
57,4,0
63,2,0
70,4,0.5
78,0,0
67,0,-1
53,11,0
67,0,1
75,0,0
70,0,0.5
81,0,0
76,0,-0.5
79,0,0
75,4,0
76,0,0.5
58,4,0
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis text {
	font: 10px sans-serif;
	}
	</style>
	</head>

	<body>

	<script>
	d3.csv("o-ring.txt", function(data){
	// data that you want to plot, I've used separate arrays for x and y values
	var xdata = [5, 10, 15, 20],
	ydata = [3, 17, 4, 6];

	var x = function(d){ return d.temp; },
	y = function(d){ return d.damage; };

	// size and margins for the chart
	var margin = {top: 20, right: 15, bottom: 60, left: 60}
	, width = 960 - margin.left - margin.right
	, height = 500 - margin.top - margin.bottom;

	// x and y scales, I've used linear here but there are other options
	// the scales translate data values to pixel values for you
	var x = d3.scale.linear()
	.domain([0, d3.max(data, x)]) // the range of the values to plot
	.range([ 0, width ]); // the pixel range of the x-axis

	var y = d3.scale.linear()
	.domain([0, d3.max(data, y)])
	.range([ height, 0 ]);

	// the chart object, includes all margins
	var chart = d3.select('body')
	.append('svg:svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.attr('class', 'chart')

	// the main object where the chart and axis will be drawn
	var main = chart.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.attr('width', width)
	.attr('height', height)
	.attr('class', 'main')

	// draw the x axis
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom');

	main.append('g')
	.attr('transform', 'translate(0,' + height + ')')
	.attr('class', 'main axis date')
	.call(xAxis);

	// draw the y axis
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

	main.append('g')
	.attr('transform', 'translate(0,0)')
	.attr('class', 'main axis date')
	.call(yAxis);

	// draw the graph object
	var g = main.append("svg:g");

	g.selectAll("scatter-dots")
	.data(ydata) // using the values in the ydata array
	.enter().append("svg:circle") // create a new circle for each value
	.attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
	.attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
	.attr("r", 10) // radius of circle
	.style("opacity", 0.6); // opacity of circle

	});
	</script>
	</body>
	"temp","damage","jitter"
	66,0,0
	70,4,-0.5
	69,0,0
	68,0,0
	67,0,0
	72,0,0
	73,0,0
	70,0,-0.5
	57,4,0
	63,2,0
	70,4,0.5
	78,0,0
	67,0,-1
	53,11,0
	67,0,1
	75,0,0
	70,0,0.5
	81,0,0
	76,0,-0.5
	79,0,0
	75,4,0
	76,0,0.5
	58,4,0