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.
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');
});
1 Like