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

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


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


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.


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