D3 Visualization Projects - Scatter Plot

JavaScript
1

Here’s my current code: https://codepen.io/DragonOsman/pen/MWjpVRr

The x-axis doesn’t appear at all. What am I doing wrong? I did try logging xScale and yScale to the console but the output is cryptic. I don’t get it. I tried making the y value in

.attr("transform", `translate(${padding}, 0)`)

for the y-axis a negation of the SVG element’s height value, but that didn’t work either. I was thinking the y-axis might be too far up to appear in the canvas. How do I confirm this?

I also saw that I have an invalid Date object in here:

.attr("data-yvalue", d => {
  const time:number = Date.parse(d.Time);
  console.log(new Date(time));
  return new Date(time);
})

(data-yvalue for the dots we have to plot for this). How do I fix it?

I finally figured out a way to do the right type annotation for the Promise returned by d3.json in TypeScript.

2

Here’s the updated code.

I had a problem with the data-xvalue and data-yvalue attribute values for the dots which I managed to fix just now, but I don’t get how to fix the issue with the y-axis not showing up.

I also have this error in my console:

Error: <path> attribute d: Expected number, "M-6,NaNH0.5VNaNH-6".

It’s coming from d3.v6.min.js:2 . What does it mean and how do I fix it?

And doing

console.log(yAxis);
console.log(yScale);

gives this:

ƒ l(l){var h=null==r?n.ticks?n.ticks.apply(n,e):n.domain():r,d=null==i?n.tickFormat?n.tickFormat.apply(n,e):Z:i,p=Math.max(o,0)+u,g=n.range(),y=+g[0]+.5,v=+g[g.length-1]+.5,_=(n.bandwidth?nt:tt)(n.copy…

ƒ l(n){return isNaN(n=+n)?e:(i||(i=r(a.map(t),u,c)))(t(f(n)))}

Are these fine? It’s too cryptic for me so I can’t tell.

Any help is appreciated.

3

I really need some help here. I believe I’ve tried what I can think of for now, which also includes using negative values for the y value offset in the translate call for the the y-axis drawing code.

Code Pen link in the comments above has the updated code.

4

This is d3 telling you that there is a problem with some path. The only paths that you have in your chart are the domain lines used in your axes. x axis renders correctly so there must be something wrong with y axis. And indeed there is:

Image from Gyazo
As you can see it doesn’t have dimensions, that’s why it’s not showing up.

The reason is that you have missing square brackets when setting the range of the scale. It has to be an array:

 const yScale = d3.scaleTime()
  .domain(d3.extent(data, d => d.Time))
  .range(svgHeight - padding, padding);

This will not be of any help really because yAxis and yScale are functions so after logging them you’ll get their function definition. If you want to check if your scale is working correctly you can use these scale’s method that you know will return a meaningful result for example:

// If domain is not specified, returns a copy 
// of the scale’s current domain.
yScale.domain();

// If range is not specified, returns a copy
// of the scale’s current range.
yScale.range();
5

Thanks for the info.

6

@sitek94 Here’s the updated pen. Please also look at the Dev console output.

  1. Why does it say “NaN” for the y value argument to translate for the x-axis when it actually shows up correctly?
  2. How do I get the y-axis to come down to where it should be? What should the y value argument for the translate function be for that?

Any help is appreciated.

7

@sitek94 The errors in the console are actually for the x-axis. I still don’t get how to fix it. The proof that it’s the x-axis is in the fact that the second error is

Error: <g> attribute transform: Trailing garbage, "translate(0,NaN)".

The one where the x value for translate is 0 is the x-axis.

Any ideas about how to fix this?

8

Never mind, the errors really were from the y-axis. I finally managed to get the axes right and get the dots plotted correctly. Now I just need the legend and the tooltip.

One question though: the tick order on my y-axis is backwards compared to the example project one; why did that happen and should I reverse it (how?)?

9

Updated code.

The tooltip is normally hidden and properly appears when it should, but the test for it not being visible when the user isn’t hovering over a particular dot doesn’t pass. And I have code to make it so the data-year property of the tooltips set to d.Year when a user hovers over a dot but the test for that doesn’t pass either.

Could someone help me out here, please?

10

@sitek94 I really don’t know what’s going on here.

The tooltip has a data-year property properly set to the correct year each time it appears when hovering over a dot, and it also correctly appears on hover and disappears when the user’s mouse leaves that dot. So I don’t get why the test suite thinks that the data-year property isn’t there and why it thinks the tooltip doesn’t appear or disappear when it should. Could someone please help me out here?