Data Visualization Projects - Visualize Data with a Scatterplot Graph

JavaScript
1

Hello everyone. I’ve been working on this second project for the D3.js certification and I’ve gotten stumped on mapping the domain of the y axis on to the graph. I’ve tried a lot of logical things that should work, but don’t. Including hard coding the domain values, calling in specific domain values from the data, or using extent in a smart way.

I’m expecting to see times mapped to the y axis from 36:50 to 39:50, but seeing nothing at all whenever I try to add in the domain values.

Your code so far

here is my y axis code:

let yScale = d3.scaleTime()
    .domain([d3.extent(data, (d) => d.Time)]) // this breaks it
    .range([0, h - 40]);
  
  let yAxis = d3.axisLeft(yScale).tickFormat(d3.timeFormat('%M:%S')); // read out in minutes and second format

  graphSVG.append('g')
    .attr("transform", "translate(40, 20)") // where to begin the y axis
    .call(yAxis);

here is all the code, live version:

Challenge: Data Visualization Projects - Visualize Data with a Scatterplot Graph

Link to the challenge:

1 Like
2

Well, I figured it out shortly after posting it.

The domain min and max needed to be formatted as a date object to be read correctly by d3.

the chunky solution was this:

.domain([d3.min(data, d => new Date(`2000 01 01 00:${d.Time}`)), d3.max(data, d => new Date(`2000 01 01 00:${d.Time}`))])
3

Well, nevermind. My slow connection didn’t sync the page before this got posted.

I’m seeing the correct values on both axes, so I’m not sure what your question is (plus this posted code is different than the codepen). The endpoints on the y-axis are not shown, but all the interior values are correct. If the problem is handling the time data, then you should look at the d3.timeParse() function and friends for converting string times to Date objects. In general, try to avoid hard coding anything for D3 as it usually is smart about the correct defaults (or at least wait until the end).

I do notice that you don’t have a variable for the padding and it seems to be causing problems in your scales and in translating your axes into position, especially when I graphed your points.

You are graphing the points in a line right now because of

  .attr("cx", (d, i) => w / i)
  .attr("cy", (d, i) => h / i)

You’ll need to use your scales on the data; perhaps this is just a placeholder.

4

Thanks for the review.

I was looking for how to parse the data into Date objects using a d3 function, thanks.

Yes, I should look into using padding.

I haven’t given much thought to the scatterplot data yet, and how to map it, but I definitely appreciate the hints there.

Vlad

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.