Data for D3 BarChart

Data for D3 BarChart
0

#1

I had most of my D3 BarChart completed, but couldn’t access the dates for the data-date attribute, and to add to my tooltips. I had pulled the data from the json file and organized it as an array containing a gdp array and a date array, thinking I could match them by indices.

So I tried a different approach, and formed an array called barData of objects, each containing date and gdp. Now I can’t figure out how to access the data to even get the bars to show up. For instance, how would I referrence the correct data in the following?

barChart.append('g')
	.attr('transform', 'translate(' + margin.left + ', 0)')
	.selectAll('rect').data(barData)
	.enter().append('rect')	
	.attr('class', 'bar')
	.style('fill', '#05405e')

and

 xScale = d3.scaleBand()
	        .domain(barData)
		.paddingInner(0.1)
		.paddingOuter(0)
		.range([0, width]);
						
xAxisValues = d3.scaleTime()
		.domain([barData[0].date, barData[(barData.length-1)].date])
		.range([0, width]);

I have hunted all over for how to work with data in this format, but with no luck.


#2

I believe I might have used a different strategy by just using the Year part of the date and creating an X-axis scale of those numbers.
My domain was declared as .domain([minDate, maxDate])
Not sure what barData is as you have not provided that.


#3

With my original attempt, I had two arrays, one gdp listing just the gdp values and one date listing just the dates. I had no problems with the x-axis, but I did have problems with the data-date attribute. That’s why I switched to organizing my data like this:

barData = [
    {
        date: "1947-01-01", 
        gdp: 243.1 
    },
    { 
        date: "1947-04-01", 
        gdp: 246.3
    }
​
// and so on

]

#4

So try to split off the year as that is all you need to show.