title: D3 - tickFormat not working
body: <p>If anyone could take a look at my code and let me know why D3 doesn't want to format Y axis ticks as <code>%M:%S</code>.</p>
  
  <p><a href="https://jsfiddle.net/2o3e82fu/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Code:</p>
  
  <pre><code>function renderScatterPlot(data) {
  
    // set up svg and bar dimensions/margins
    const width = 1000;
    const height = 500;
    const padding = 20;
    const margin = { top: 40, right: 20, bottom: 80, left: 80 };
  
    // append svg to DOM
    const svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
  
    // for parsing time string in data and converting back to original format
    const parse = d3.timeParse('%M:%S');
    const format = d3.timeFormat('%M:%S')
  
    // calculate min and max data values
    const timeMin = d3.min(data, (d) =&gt; parse(d.Time));
    const timeMax = d3.max(data, (d) =&gt; parse(d.Time));
  
    // set up scales
    const xScale = d3.scaleBand()
      .domain(data.map((d) =&gt; d.Year))
      .range([margin.left, width - margin.right])
      .paddingInner(0.1)
  
    const yScale = d3.scaleTime()
      .domain([timeMin, timeMax])
      .range([height - margin.bottom, margin.top])
  
    // set up x and y axes
    const xAxis = d3.axisBottom(xScale)
  
    const yAxis = d3.axisLeft(yScale)
      .tickFormat(format)
  
  
    // append axes to svg
    svg.append('g')
      .attr('id', 'x-axis')
      .attr('transform', `translate(0, ${height - margin.bottom})`)
      .call(xAxis)
  
    svg.append('g')
      .call(d3.axisLeft(yScale))
      .attr('transform', `translate(${margin.left}, 0)`)
      .attr('id', 'y-axis')
  }
  
  $.getJSON('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json', (data) =&gt; renderScatterPlot(data));
  </code></pre>