Accepted answer

There are several ways for achieving the effect that you ask in your second question ("I set a function that makes the name and the dots appear bigger on mouseover, Is it possible to make it both at the same time?"), such as using groups. I particularly like a different approach, using classes to select all elements I want at once:

First, we set the same class for the circles and the texts:

class: function(d, i){ return (d.Name).split(" ").join("") + i}

Then, inside the mouseover, we retrieve the class:

var thisClass ="class");

And use it for changing both circles and texts.

For your first question, if I understand it correctly (maybe not), you are already showing the time in seconds. So, all you need is to divide it by 60:

var xAxisGen = d3.svg.axis()
    .tickFormat(function(d){ return d/60});

Here is your codepen:

Related Query