D3.JS v5.15 doesn't work?

JavaScript
1

Hi, I’m trying to build heatmap as a Certification Project. I get latest version from cdnjs of D3 which is 5.15.0 - no properties are readable somehow…

I declare width and height, pass them as the arguments but code doesn’t read them. I’m trying with 4.2.2. version of D3.js but then I got error of d3.scaleTime() is not a function - I cannot explain that range of F* emotions I have but can somebody explain what’s going on?

let width = 800;
let height = 400;
let padding = 40;
let paddingY = height + padding;
let paddingX = width + padding;

let svg = d3.select('body').append('svg').attr({width: width,
  height: height
}).style({
  'background-color': 'red'
  
})

var xScale = d3.scaleTime().range([padding,width])
let yearFormat = d3.timeFormat('%Y')
let xAxis = d3.axisBottom(xScale).tickFormat(yearFormat);

var yScale = d3.scaleTime().range([padding,height])
let monthFormat = d3.timeFormat('%B');
let yAxis = d3.axisLeft(yScale).tickFormat(monthFormat);
let color = d3.interpolateRdBu();
let url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json';

d3.json(url, data=>{
  let dataset = data.monthlyVariance;
  
  
  let year = dataset.map(i=>i.year)
  console.log(year);
  let minYear = d3.min(year);
  let maxYear = d3.max(year);
  
})
2

Mistake is not in d3.js.It is because you are passing object as argument in attr() .you need to change your svg variable code with following code to work .

let svg = d3.select('body').append('svg').attr("width",width).attr("height",height).style('background-color', 'red');
3

Why then in older versions this feature was supported, while giving me an error of scaleTime() function?

4

First time when I open your project it shows me following error:

Uncaught TypeError: Cannot read property 'style' of null at pen.js:2

But when I change your code with the above code now it is showing error :

Uncaught TypeError: d3.interpolateRdBu is not a function at pen.js:10

and when I remove let color = d3.interpolateRdBu(); from your code .now I can see year data is printing in console .
now it is not showing error.
for me it is not showing any error for scaleTime() function.

I never use d3.interpolateRdBu() .so I have no idea why it is showing error about it.

5

Hi Fatma, thanks for the reply. My point was that when I used D3 version 4.2.2. - objects as argument were valid. I have red rectangle draw. However I received an error with scaleTime() function. When switched to D3.Js 5.15 - everything become blank. Switch back to 4.2.2. - everything stop working too.

I am not sure was it a bug or something else, but I spend near an hour trying to fix it and nothing helped.

But thank you for help and advices :slight_smile:

6

You can use D3 version 5.15 .
I found one thing i.e. in D3 version 4 ,d3.json() function takes 2 arguments 1. url , 2.callback function, but now in D3 version 5 d3.json() function only allows you to pass one argument i.e. url and d3.json() will now return a promise you can handle using .then() method as follows :

let width = 800;
let height = 400;
let padding = 40;
let paddingY = height + padding;
let paddingX = width + padding;

let svg = d3.select('body').append('svg').attr('width', width+100).attr('height', height+100).style('background-color','red')

var xScale = d3.scaleTime().range([padding,width])
let yearFormat = d3.timeFormat('%Y')
let xAxis = d3.axisBottom(xScale);

var yScale = d3.scaleLinear().range([height,padding])
let monthFormat = d3.timeFormat('%B');
let yAxis = d3.axisLeft(yScale);

let url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json';

d3.json(url).then(data=>{
 let dataset = data.monthlyVariance;
  
  
  let year = dataset.map(i=>i.year)
  let parsedYear = year.map(d=> d3.timeParse(yearFormat)(d))
  
  let minYear = d3.min(parsedYear);
  let maxYear = d3.max(parsedYear);
  
  let month = dataset.map(i => i.month);
  let minMonth = d3.min(month);
  let maxMonth = d3.max(month);
  
  console.log(minMonth)
  
  xScale.domain([minYear, maxYear]);
  yScale.domain([0, 12])
  svg.append('g').call(xAxis).attr('transform','translate(30, 450)')
  svg.append('g').call(yAxis).attr('transform', 'translate(70, 50)')
  svg.selectAll('rect').data(dataset).enter().append('rect').attr('x', d=> d.year).attr('y', d=>d.month).attr('width','10px').attr('height','10px')
})
1 Like