D3 scaleBand ticks

D3 scaleBand ticks
0

#1

I’m implementing my Bar Chart right now and I’m using scaleBand for x-axis, but there’s a problem: it gives me a tick for every bar, so the axis is overcrowded with ticks and I can’t see anything. I tried to solve the problem like this:
const xAxis = d3.axisBottom(xScale) .tickValues(xScale.domain().filter(function(d,i){ return !(i%10)}));
But it’s not quite what I want, because it’s kinda random, and I want a tick for every five years. Also, I want to somehow extract the year from the data so ticks would read “
1947” instead of “1947-01-01”, but if I use map on xScale.domain() like I use filter it doesn’t work: all ticks suddenly move to the beginning of the axis and are placed on top of each other. Here’s my pen: http://codepen.io/enk/pen/qRvwgQ?editors=1111
So, my question is - is there a way to create ticks for every five years using scaleBand or should I use some other kind of scale? I tried linearScale for x-axis as well, extracting the year from the data, but it doesn’t work like I want to either: it gives me only one bar for every year for some reason: http://codepen.io/enk/pen/vgbvWq?editors=1111
Also, it doesn’t pass one of the tests, because I use years instead of full dates.


#2

About to leave so I don’t have time for a proper answer, but I would consider using scaleTime for the x axis. Here’s my code:

const url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json',
  margin = {top: 10,right: 10,bottom: 60,left: 40},
  width = 700,
  height = 400;

const tooltip = d3.select('body').append('div')
  .attr('id', 'tooltip');

const x = d3.scaleTime()
  .range([0, width]);

const y = d3.scaleLinear()
  .range([height, 0]);

const chart = d3.select('#chart')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', `translate(${margin.left}, ${margin.top})`);

chart.append('text')             
  .attr('transform', `translate(${width/2},${margin.top + 10})`)
  .attr('id', 'title')
  .text('US Quarterly Gross Domestic Product');

d3.json(url, (response) => {

    const data = response.data.map((i) => [new Date(Date.parse(i[0])), i[1]]) 
    const maxData = d3.max(data, (d) => d[1]);
    const colorScale = d3.scaleLinear().domain([0,maxData]).range(['#EEE','#85BB65']);
  
    x.domain([data[0][0], data[data.length - 1][0]]);
    y.domain([0, maxData]);

    chart.selectAll('.bar')
      .data(data)
      .enter().append('rect')
      .attr('class','bar')
      .attr('x', (d) => x(new Date(...d[0])))
      .attr('width', width / data.length + 1)
      .attr('y', (d) => y(d[1]))
      .attr('height', (d) => height - y(d[1]))
      .attr('fill', (d) => colorScale(d[1]))
      .on('mouseover', (d) => {
        tooltip.transition()
          .duration(100)		
          .style('opacity', .9);
        tooltip.text(`${d[0].toString().slice(4,8)} ${d[0].getFullYear()} $${d[1].toString().split('.')[0]}B`)
          .style('left', `${d3.event.pageX + 4}px`)	
          .style('top', `${d3.event.pageY - 80}px`);
      })
      .on('mouseout', () => {		
        tooltip.transition()		
        .duration(400)		
        .style('opacity', 0);	
      });
  
      chart.append('g')
        .attr('transform', `translate(0,${height})`)
        .call(d3.axisBottom(x));

      chart.append('text')             
        .attr('transform', `translate(${width/2},${height + margin.top + 40})`)
        .attr('id', 'x-label')
        .text(response.description);
      
      chart.append('g')
        .call(d3.axisLeft(y));
  
      chart.append('text')
        .attr('transform', 'rotate(-90)')
        .attr('dx', '-7.5em')
        .attr('dy', '1.5em')
        .text('Billions of Dollars');
  });