D3 Minutes:Seconds Incorrect displaying - please help

1

Morning.
Doing certification project. Build Y axes where should lay minutes and seconds. I’m using timeformat “$M:$S” and logging for understand, but apparently on Y axes minutes lay with an hour (00 transform to 12) which isn’t correct. I do not understand how to solve it currently.

Please help with advice.

CodePen: https://codepen.io/volodymyr-rudov-tsymbalist/pen/gOpYMKx

Code:

d3.json('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json', function(data){
  
  let width = 900;
  let height = 400;
  let padding = 20;
  let paddingX = width + padding;
  let paddingY = height+padding;
  
  //X-Axis setup
  let years= data.map(i =>i.Year); // getting years data
  let yearsFormat = '%Y'; // - defining the format
  
  //parsing the year according to the format in a local variable
  let parsedYear = years.map(d=>{return d3.timeParse(yearsFormat)(d)});
 
  //d3.extent provides minimum and maximum from local variablle with correctly stored %Y - format years.
  let xScale =d3.scaleTime().domain(d3.extent(parsedYear)).range([padding, width]);
  let xAxis = d3.axisBottom().scale(xScale);
  

  
  //Y-Axis setup
  let minutes = data.map(i=>i.Time)
  console.log(minutes);
  let specifier = '%M:%S';
  console.log('%M:%S')
  let parsedTime = minutes.map(d=>{
    return d3.timeParse(specifier)(d)
  });
 console.log(parsedTime);
  let minM=d3.min(parsedTime);
  
  
  let minMax=d3.max(parsedTime);
  console.log(minM + 'max: ' + minMax)
  
  let yScale = d3.scaleTime().domain([minM, minMax]).range([height, padding]);
  let yAxis = d3.axisLeft().scale(yScale);
  
  
  let svg = d3.select('.plot').append('svg').attr('width',width + 100).attr('height',height + 30);
  
  //calling X-Axis 
  svg.append('g').call(xAxis).attr('id','x-axis').attr('transform','translate(20,400)');
  
 
  //calling Y-Axis
  svg.append('g').call(yAxis).attr('id','y-axis').attr('transform','translate(40,0)');
  //closing of the d3.son - do not delete
})
2

if you want to show time on y axis in timeformat "%M:%S" you can use d3.timeFormat() function and tickFormat() function.

  1. set a variable timeFormat for d3.timeFormat() function i.e.
let timeFormat = d3.timeFormat("%M:%S");
  1. In yAxis variable pass yScale to d3.axisLeft() as argument and use tickFormat() function for d3.axisLeft() and pass timeFormat variable as argument of tickFormat() i.e.
let yAxis = d3.axisLeft(yScale).tickFormat(timeFormat);
2 Likes
3

You are simply the best :slight_smile: Thank you very much again)))