How should I fix the D3.js axes and tooltips in this bar chart?

I’m trying to create this bar chart visualization with years on the x-axis and GDP values on the y-axis for the US GDP data. I also need to have a tooptip with corresponding information to each bar working.

  1. So the first issue I have is that on the y-axis the tick values for the GDP data seem to be upside down.

Currently, I’m using the following code in for the yScale:

const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, yValue)])
  .range([0, innerHeight]);

If I change it to

const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, yValue)])
  .range([innerHeight, 0]);

I’m able to fix the y-axis tick values to be in correct order, however the bar charts align in a strange way that seems to be in reversed order.

  1. Second issue that I seem not to be able to find a solution to is having an excessive amount of ticks on the x-axis. As I understand the D3 in this case is adding a tick for each data value provided, but I would like to only give 14 ticks (from 1950 to 2015 with 5 year interval).

I tried adding adding ticks axis.ticks() to the following line of code,

const xAxis = d3.axisBottom(xScale);

but there was no impact from it.

  1. The last issue I have is related to the tooltips. When I hover over each bar, the quarter date text and corresponding GDP value supposed to be shown, however, right now it shows the following information from the very first data point (“1947 Q1”) in each bar.
barchart.selectAll("title").data(dataset)
   .enter().append("title")
   .attr("id", "tooltip")
   .text(d => `${textValue(d)} \n${yValue(d)} Billion`) //!
   .attr("data-date", d => xValue(d))

I set up the following code for the tooltips and was assuming that having that callback function inside .text() attribute would extract the required values for each bar chart, but it only seems to be assigning the first value from the dataset to each of them.

Here’s my codepen for the following project.

I would appreciate any help on this matter.

it’s depressing how many of these don’t get any response… I’m on the same project and reading any that seem related. Your Code Pen is gone… did you ever get it fixed?