Skip to content

Instantly share code, notes, and snippets.

@gonzofish
Last active December 15, 2015 04:19
Show Gist options
  • Save gonzofish/5200910 to your computer and use it in GitHub Desktop.
Save gonzofish/5200910 to your computer and use it in GitHub Desktop.
This is just an example to show someone how to do a "proper" Y-axis
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment