hydrosquall · April 8, 2018 20:07
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>

 <body>
  <script>
    
    // Section 1: Download and process the data
    var visualizeData = function(url) {
      d3.json(url, (data) => { // wrapper function 
        const cleanedData = cleanData(data);
    		renderChart(cleanedData);
      });
    }
   
    var cleanData = function(data) {
      const cleaned = data.launches;
      // Prepare to process dates
    	const dateParse = d3.timeParse("%Y%m%dT%H%M%S%Z");
    	const dateFormat = d3.timeFormat("%Y-%m-%d");
    
      return cleaned.map((row)=> {
        // Pick out a subset of the interesting properties
        return {
          name: row.name,
          net: dateParse(row.isonet), // Convert ISO timestamp to Javascript Dates
          location: row.location,
          probability: +row.probability,  // Convert string to number
          rocket: row.rocket,
          lsp: row.lsp,
          missions: row.missions,
          num_agencies: row.rocket.agencies.length
        }
      }); 
    }
    

    var renderChart = function(data) {
      // Section 2: Create the graphical elements / code the display
 			const margin = ({top: 20, 
           		 				 right: 0, 
           		 				 bottom: 30, 
           		         left: 40});
      const width = 500;
    	const height = 400;
      
      // Create an HTML element to hold the chart
    	const svg = d3.select("body")
      							.append("svg")
      								.attr("width", width)
      								.attr("height", height);
    
      // Create scaling functions. First x axis, then y axis
      const xRange = [margin.left, width - margin.right];
      const xScale = d3.scaleBand()
                       .domain(data.map(d => d.name))
                       .range(xRange)
                       .padding(0.15); // how much space to put around each bar

      const max_agencies = d3.max(data.map(d => d.num_agencies));
      const num_agencies_range = [0 , max_agencies];
      const yRange = [height - margin.bottom, margin.top].map(d => d/1); // scaling
      const yScale = d3.scaleLinear()
                       .domain(num_agencies_range)
                       .range(yRange)
                       .nice();

      // SECTION 3: Render the chart!
      
      var bar_color = function(row) {
        if (row.location.countryCode === "USA") {
          return "#78CDD7"; // pale turqoise saved from earlier
        } else {
          return "lightgrey";
        }
      };
      
      const yAxis = g => g
          .attr("transform", `translate(${margin.left}, 0)`)
          .call(d3.axisLeft(yScale) // place tickets to the left of the bar
               .ticks(max_agencies)
               // .tickSize(0)
               .tickFormat(d3.format("d"))
          )
          .call(g => g.select(".domain").remove()) // Tufte style: remove the axis line
      
      // Build the final chart
      svg.append("g")
         .selectAll("rect")               
           .data(data)
         .enter()                     
           .append("rect")                 
            .attr("x", d => xScale(d.name)) 
            .attr("y", d => yScale(d.num_agencies) ) 
            .attr("height", d => yScale(0) - yScale(d.num_agencies) )
            .attr("width", xScale.bandwidth() / 2) 
            .attr("fill", bar_color);
      
      svg.append("g")
      		 .call(yAxis);
    }
    
    // Wrapper function for the visualization
    const url = "https://launchlibrary.net/1.3/launch/next/15";
    visualizeData(url);
    
  </script>
 </body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>

	// Section 1: Download and process the data
	var visualizeData = function(url) {
	d3.json(url, (data) => { // wrapper function
	const cleanedData = cleanData(data);
	renderChart(cleanedData);
	});
	}

	var cleanData = function(data) {
	const cleaned = data.launches;
	// Prepare to process dates
	const dateParse = d3.timeParse("%Y%m%dT%H%M%S%Z");
	const dateFormat = d3.timeFormat("%Y-%m-%d");

	return cleaned.map((row)=> {
	// Pick out a subset of the interesting properties
	return {
	name: row.name,
	net: dateParse(row.isonet), // Convert ISO timestamp to Javascript Dates
	location: row.location,
	probability: +row.probability, // Convert string to number
	rocket: row.rocket,
	lsp: row.lsp,
	missions: row.missions,
	num_agencies: row.rocket.agencies.length
	}
	});
	}


	var renderChart = function(data) {
	// Section 2: Create the graphical elements / code the display
	const margin = ({top: 20,
	right: 0,
	bottom: 30,
	left: 40});
	const width = 500;
	const height = 400;

	// Create an HTML element to hold the chart
	const svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	// Create scaling functions. First x axis, then y axis
	const xRange = [margin.left, width - margin.right];
	const xScale = d3.scaleBand()
	.domain(data.map(d => d.name))
	.range(xRange)
	.padding(0.15); // how much space to put around each bar

	const max_agencies = d3.max(data.map(d => d.num_agencies));
	const num_agencies_range = [0 , max_agencies];
	const yRange = [height - margin.bottom, margin.top].map(d => d/1); // scaling
	const yScale = d3.scaleLinear()
	.domain(num_agencies_range)
	.range(yRange)
	.nice();

	// SECTION 3: Render the chart!

	var bar_color = function(row) {
	if (row.location.countryCode === "USA") {
	return "#78CDD7"; // pale turqoise saved from earlier
	} else {
	return "lightgrey";
	}
	};

	const yAxis = g => g
	.attr("transform", `translate(${margin.left}, 0)`)
	.call(d3.axisLeft(yScale) // place tickets to the left of the bar
	.ticks(max_agencies)
	// .tickSize(0)
	.tickFormat(d3.format("d"))
	)
	.call(g => g.select(".domain").remove()) // Tufte style: remove the axis line

	// Build the final chart
	svg.append("g")
	.selectAll("rect")
	.data(data)
	.enter()
	.append("rect")
	.attr("x", d => xScale(d.name))
	.attr("y", d => yScale(d.num_agencies) )
	.attr("height", d => yScale(0) - yScale(d.num_agencies) )
	.attr("width", xScale.bandwidth() / 2)
	.attr("fill", bar_color);

	svg.append("g")
	.call(yAxis);
	}

	// Wrapper function for the visualization
	const url = "https://launchlibrary.net/1.3/launch/next/15";
	visualizeData(url);

	</script>
	</body>