D3 Project 3 (Heat Map) - Only final data point displaying

1

I’ve set up my chart to use d3.scaleLinear() for the xScale, with a domain of the min year to the max year of the data set. I’ve kept these values as integers, rather than converting them to a Date object.

For the yScale, I’ve used d3.scaleBand(). The domain is set as integers 1-12, which are then modified into d3’s date/ month format via d3.timeParse for the tick display so that month names appear on the y-axis.

I’ve read the JSON file in to an array of objects (named ‘data’) with the following format:

Object {
  Color: "TBD",
  Month: 1,
  Variance: -1.366,
  Year: 1753
}

The code I’m intending to execute on my svg will create a ‘rect’ for each object in the array, with the following positioning and dimension attributes:

    .attr('x', (d, i) => xScale(data.Year))
    .attr('y', (d, i) => yScale(data.Month)) 
    .attr('width', w / (2015-1754)) //number of years included in the dataset
    .attr('height', yScale.bandwidth())

What is happening is that only the final value/ object in the array is actually generated onto my graph area. I’ve mulled through my code quite extensively now, and cannot find a logical reason why this is happening. Any help is appreciated!

NOTE: For now, every rect object’s fill will be set to navy. Once I can get everything to display, I will add in the functionality to display different fills dependent on the variance value. Please ignore this for now.

Codepen link: https://codepen.io/bloo0178/pen/dqvawr

2

The problem is here:

.attr('x', (d, i) => xScale(data.Year))
.attr('y', (d, i) => yScale(data.Month))

You’re using the data variable, which is an array of objects. Thus, there are no properties on it like Year and Month. However, the d value is an object, which is extracted from the data array. That has the properties you’re trying to extract.

3

That was the solution! Thank you for taking the time to review my code and catch my oversight!