CODEWITHSUNDEEP
javascriptdatetimed3.jsvisualizationheatmap
XEmporea
XEmporea

Reputation: 35

d3.timeFormat on domain has only 1 value

I am trying to replace dayofweek integer to its corresponding names.

My Heatmap so far

var y_label = [...new Set(data.map((item) => item.y))].sort(d3.descending); // [0 - 6]

// Build Y scales and axis:
const y = d3.scaleBand().range([height, 0]).domain(y_label).padding(0.01);
svg.append("g").call(d3.axisLeft(y));

Now I am adding .tickFormat(d3.timeFormat("%A"))

var y_label = [...new Set(data.map((item) => item.y))].sort(d3.descending); // [0 - 6]

// Build Y scales and axis:
const y = d3.scaleBand().range([height, 0]).domain(y_label).padding(0.01);
svg.append("g").call(d3.axisLeft(y).tickFormat(d3.timeFormat("%A")));

What I get is this:

Heatmap with same names

I dont even know where the Thursday comes from. How do I fix my code?

Upvotes: 1

Views: 159

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

When you construct a Date object from a number, it takes the value as number of milliseconds since Jan 1, 1970 00:00 (Thursday). Thus, any number from 0 to 6 is interpreted as very beginning of that day. Don't use d3.timeFormat. Instead just define:

const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

....call(d3.axisLeft(y).tickFormat(d => weekDays[d.y]);

Upvotes: 1

Related Questions