gonzofish · December 15, 2015 04:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Negative Y-Axis Example</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">
    
    // w is the width of our SVG
      var w = 600;
 	  // h is the height of our SVG
      var h = 400;
 	  // padding is so we can make the axes easier to read
      var padding = 40;
 	  // This is the dummy data we'll use to populate our
 	  // chart just to show the axis properly
 	  var dummyData = [	[2, 8], 
 	  					[6, 3],
 						[1, 9],
 						[7, 4],
 						[5, 5]];
      
 	  // The X-domain, or the range of numbers the X-axis
 	  // can display (0 to 10)
      var xDomain = [0, 10];
 	  // The Y-domain (0 to 10)
      var yDomain = [0, 10];
      
 	  // The scale for our X-axis
 	  // It's a linear scale using the X-domain
 	  // and the range of the scale is relative to our 
 	  // display area which is 40 from the left (the
 	  // padding value) to 40 from the right (the width
 	  // of our SVG - padding)
      var xScale = d3.scale
                      .linear()
                      .domain(xDomain)
                      .range([padding, w - padding]);

 	  /**********************************************
 	   **********************************************
 	   THIS IS WHAT YOU ASKED ABOUT
 	   **********************************************
 	   **********************************************/
 	  // The scale for our Y-axis
 	  // Another linear scale but using the Y-domain
 	  // The range spans from 40 from the bottom
 	  // (the height of the SVG - padding) to 40 from
 	  // the top (the padding). This allows the Y-axis
 	  // to go from 0 at the bottom to 10 at the top
 	  // If you wanted to reverse it, you'd do:
 	  //	.range([padding, h - padding])
      var yScale = d3.scale
                      .linear()
                      .domain(yDomain)
                      .range([h - padding, padding]);
      
 	  // Actually create the chart to the dimensions
 	  // of w and h
      var chart = d3.select("body")
                    .append("svg")
                    .attr("id", "chart")
                    .attr("width", w)
                    .attr("height", h);
      
 	  // Create the Y-Axis using the Y-scale
 	  // Orient the scale values on the left
 	  // of the scale
 	  // 
 	  // Axis are actually functions in d3 so
 	  // below we call it
      var yAxis = d3.svg
                    .axis()
                    .scale(yScale)
                    .orient("left");
      
 	  // Create the X-Axis using the X-scale
 	  // Orient the scale values below the
 	  // scale
      var xAxis = d3.svg
                    .axis()
                    .scale(xScale)
                    .orient("bottom");
      
 	  // Create an SVG group and move it to 40 from the left
 	  // (padding) and 0 from the top
 	  // You see we use JavaScript's call method which allows
 	  // us to use the Y-axis defined about. Since axes are
 	  // functions in d3, we use this to let it do its thing
 	  // Look at the API for more information
      chart.append("g")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);
           
 	  // Create a group on the SVG move it 0 from the left
 	  // and 40 from the bottom (h - padding), then call the X-axis
      chart.append("g")
           .attr("transform", "translate(0,"  + (h - padding) + ")")
           .call(xAxis);

 	  // Take our dummy dataset and make it circles on the chart
 	  // I'm not sure this is the quickest/most efficient way
 	  // to do it, but it does what I want it to
 	  //
 	  // The X-position (cx) of each circle is based on the 
 	  // X-scale defined above, which places it properly on
 	  // the scale
 	  // Same goes for the Y-position (cy) but to the Y-scale
 	  // The radius of each circle is statically set to 5
 	  chart.selectAll("circle")
 	  		.data(dummyData)
 			.enter()
 			.append("circle")
 			.attr("cx", function(d){ return xScale(d[0]); })
 			.attr("cy", function(d){ return yScale(d[1]); })
 			.attr("r", 5);

           
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Negative Y-Axis Example</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>
	<script type="text/javascript">

	// w is the width of our SVG
	var w = 600;
	// h is the height of our SVG
	var h = 400;
	// padding is so we can make the axes easier to read
	var padding = 40;
	// This is the dummy data we'll use to populate our
	// chart just to show the axis properly
	var dummyData = [ [2, 8],
	[6, 3],
	[1, 9],
	[7, 4],
	[5, 5]];

	// The X-domain, or the range of numbers the X-axis
	// can display (0 to 10)
	var xDomain = [0, 10];
	// The Y-domain (0 to 10)
	var yDomain = [0, 10];

	// The scale for our X-axis
	// It's a linear scale using the X-domain
	// and the range of the scale is relative to our
	// display area which is 40 from the left (the
	// padding value) to 40 from the right (the width
	// of our SVG - padding)
	var xScale = d3.scale
	.linear()
	.domain(xDomain)
	.range([padding, w - padding]);

	/**********************************************
	**********************************************
	THIS IS WHAT YOU ASKED ABOUT
	**********************************************
	**********************************************/
	// The scale for our Y-axis
	// Another linear scale but using the Y-domain
	// The range spans from 40 from the bottom
	// (the height of the SVG - padding) to 40 from
	// the top (the padding). This allows the Y-axis
	// to go from 0 at the bottom to 10 at the top
	// If you wanted to reverse it, you'd do:
	// .range([padding, h - padding])
	var yScale = d3.scale
	.linear()
	.domain(yDomain)
	.range([h - padding, padding]);

	// Actually create the chart to the dimensions
	// of w and h
	var chart = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("width", w)
	.attr("height", h);

	// Create the Y-Axis using the Y-scale
	// Orient the scale values on the left
	// of the scale
	//
	// Axis are actually functions in d3 so
	// below we call it
	var yAxis = d3.svg
	.axis()
	.scale(yScale)
	.orient("left");

	// Create the X-Axis using the X-scale
	// Orient the scale values below the
	// scale
	var xAxis = d3.svg
	.axis()
	.scale(xScale)
	.orient("bottom");

	// Create an SVG group and move it to 40 from the left
	// (padding) and 0 from the top
	// You see we use JavaScript's call method which allows
	// us to use the Y-axis defined about. Since axes are
	// functions in d3, we use this to let it do its thing
	// Look at the API for more information
	chart.append("g")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis);

	// Create a group on the SVG move it 0 from the left
	// and 40 from the bottom (h - padding), then call the X-axis
	chart.append("g")
	.attr("transform", "translate(0," + (h - padding) + ")")
	.call(xAxis);

	// Take our dummy dataset and make it circles on the chart
	// I'm not sure this is the quickest/most efficient way
	// to do it, but it does what I want it to
	//
	// The X-position (cx) of each circle is based on the
	// X-scale defined above, which places it properly on
	// the scale
	// Same goes for the Y-position (cy) but to the Y-scale
	// The radius of each circle is statically set to 5
	chart.selectAll("circle")
	.data(dummyData)
	.enter()
	.append("circle")
	.attr("cx", function(d){ return xScale(d[0]); })
	.attr("cy", function(d){ return yScale(d[1]); })
	.attr("r", 5);


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