D3js change ticks x and y axis

Question

I'm new to D3JS, and I've followed a tutorial on making a line graph at CodeTuts .

The chart I want to make should show the amount of users per hour and category of device. Since I want to be able to see at which time people will switch to tablet or mobile instead of desktop, I've made three arrays.

The arrays are build like this:

var desktop = [
{
  'hour': 01,
  'users': 20
},
{
 'hour': 08,
 'users': 800
}
];

My graph looks like this now: I would like to get to know how to set the xaxis values as:

00 , 01, 02, 03, 04 ,05, etc..

and The yaxis should have the focus on the lowest device categories (mobile and desktop, so the yaxis should be something like:

00, 10, 20, 30, 40, 50, 60, 70, 80, 100, [maxvalue of users in desktop array]

So something like this it should be:

My code:

function makeChart(desktopData,mobileData,tabletData){
    var WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
                top:20,
            right:20,
            bottom:20,
            left:50
        }
    var vis = d3.select("#visualisation"),
        WIDTH = 1200,
        HEIGHT = 300,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]).domain([00,23]),
        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([00,100]),
        xAxis = d3.svg.axis()
            .scale(xScale),

        yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
        .call(xAxis);

    vis.append("svg:g")
        .attr("class","axis")
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

    var lineGen = d3.svg.line()
        .x(function(d){
            return xScale(d.uur);
        })
        .y(function(d){
            return yScale(d.pageviews);
        });
    vis.append('svg:path')
        .attr('d', lineGen(desktopData))
        .attr('stroke','deepskyblue')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(mobileData))
        .attr('stroke','orange')
        .attr('stroke-width',2)
        .attr('fill','none');

    vis.append('svg:path')
        .attr('d', lineGen(tabletData))
        .attr('stroke','deeppink')
        .attr('stroke-width',2)
        .attr('fill','none');
}

Answer 1

To force ticks values on axis, you can use ticks() or tickValues() (and even tickFormat() if you need to have a specific format displayed).

For instance:

var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(24); // Will display 24 ticks (for 24 hours on x axis)

For your y axis , you have to define the scale domain from 0 to the max value. Instead of

yScale = d3.scale.linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([00,100]), // All values above 100 will be out of the chart

Define the domain as follow (here using d3.max() ):

var maxValue = d3.max(desktopArray, function(d){ return d.users });

var yScale = d3.scale.linear()
    .range([HEIGHT - MARGINS.top, MARGINS.bottom])
    .domain([00, maxValue]),