Link to home
Start Free TrialLog in
Avatar of jgrammer42
jgrammer42

asked on

How do I add an axis scale to a graph using Javascript and D3.js

I am trying to learn how to use D3.js so that I can produce graphs for visualized data on my web page which is based on using Javascript.
But I am struggling trying to get an axis scale correctly rendered.
Below is the code where I draw the graph and "attempt" to put the X & Y scales on the axis.   However, if you look at the attach JPG file, the X axis is being drawn at the TOP of the graph, not the bottom where it was supposed to be.   I was calling the d3.axisBottom() as you can seen from the code.  Also, the Y axis is being placed about 10 pixels inside the left side of the graph, again even though I am using the d3.axisLeft() class.  Again you can see this in the attached file screen shot.

From the code below, does anyone have any idea what I am doing wrong?

Thank you,



var dataset = [77,361,7,9,0,0,0,0,0,266,228,454];

var svgWidth = 500;
var svgHeight = 500;
var barPadding = 5;
var barWidth = (svgWidth / dataset.length);

var svg = d3.select('svg')
	.attr("width", svgWidth)
	.attr("height", svgHeight);


var xScale = d3.scaleLinear()
        .domain([0,svgWidth + 150])
        .range([0,svgWidth + 150]);

var x_axis = d3.axisBottom()
        .scale(xScale)
        .ticks(10);

svg.append("g")
        .call(x_axis);

var yScale = d3.scaleLinear()
        .domain([d3.min(dataset),(d3.max(dataset) + 200)])
        .range([svgHeight,0]);

var y_axis = d3.axisLeft()
        .scale(yScale);

svg.append("g")
        .attr("transform", "translate(50,10)")
        .call(y_axis);

var barChart = svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr("y", function(d) {
		return svgHeight - d
	})
	.attr("height", function(d) {
		return d;
	})
	.attr("width", barWidth - barPadding)
	.attr("transform", function(d,i) {
		var translate = [barWidth * i,0];
		return "translate("+ translate +")";
	})
	.attr("fill", function (d) {
		return "#0057e7";
	});

var chartValues = svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .text(function (d) {
                return d;
        })
        .attr("x", function(d,i){
                        return (svgWidth/dataset.length) * i;
                })
        .attr("y", function(d) {
                return svgHeight - d
        });

Open in new window

d3-graph-test.jpg
Avatar of mccarl
mccarl
Flag of Australia image

Firstly, I have taken the liberty of putting your code in code tags so that we can easily refer to line numbers and such.

Secondly, it is not as clearly stated in the latest docs than it was in the old 3.x version but the orientation only affects the way the axis is drawn, i.e. d3.axisBottom() creates the tick marks below the axis. You still have to position the axes yourself.

So to answer your initial questions, the y axis is located inside the graph because you are drawing it in a translated position due to line 32 of your code. And the X axis is at the top because you are not translating it at all near line 22.

You probably should think about the graph margins too, so that you have somewhere to draw the axes and keep the graph bars/column positions in sync.

Even though it is for the older version of D3, I'd recommend reading this tutorial...

https://bost.ocks.org/mike/bar/

(The axes stuff comes in in Part 3 but the first two parts are still worth reading I think)
Avatar of jgrammer42
jgrammer42

ASKER

mccarl,

Thank you let me try that and see if that works for me.  (oh, and thank you for putting the code in that format.  I had just forgotten to do that.)
ASKER CERTIFIED SOLUTION
Avatar of jgrammer42
jgrammer42

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial