D3 Scatterplot Project: following the lessons but still can't make it work

Hi everyone,

I’m trying to build my scatterplot following the examples that we did in the D3 section but I’m getting this:

I’ve been tinkering with values and stuff but basically:

  1. I can’t get the axis to match their (0,0) point, they’re just floating around
  2. I can’t get the circles to spread the way they should limiting themselves to the SVG container
  3. I can’t get the ticks to how the data they should (it’s giving me either 0s or what looks like placeholder values? Not sure)

Could someone please have a look and tell me what I’m doing wrong?


1, maybe you don’t like the solution like me, but .attr('transform', 'translate(30, 430)'); and is better take that as padding variable var padding=30 .attr('transform', 'translate(padding, 460-padding)');

I am sure the solutions is not d*i that make the bang in graph I is 1,2.3,4,5,6 and you have there only one side Y positions. That is problem the dataset must contains both.
It’s looks like this

.attr("cx", (d, i) =>
            .attr("cy", (d, i) => scaley(d.Time))

The way you change time I don’t understand, so I only show the other way

  1. Yeah that take time also to me to find right manual
    just change .scaleLinear() .scaleTime()

Great resources thank you!!

I applied your suggested changes but my chart still looks exactly the same.

It’s weird, not sure what I’m doing wrong.

Thanks anyway!

.attr('transform', 'translate(padding, 460, padding)');
of Course
.attr('transform', 'translate('+padding+', 460'+- padding')');

I did that! maybe you visited before I saved changes :slight_smile:

ah I to fast
from these you need to one data.

 const date = data.map(function(item) {
    return item.Year;
  const time = data.map(function(item){
    return item.Time;
  const timeNumVal = data.map(function(item){
    return item.Time.replace(':', '.');
  }).map(function (item){
    return parseFloat(item);

 const date = data.map(function(item) {
    return item.Year;

like this

data.forEach(function (d) {
            d.Year = parseDate(d.Year);
              d.Time = parseTime(d.Time); or your d.Time =  d.Time.replace(':', '.');
  }).map(function (item){
    return parseFloat(item);})



change to 

and also this
.domain([0, d3.max(date, (d) => d.Year)]) and I think from 0 is too big range

Doesn’t work either :frowning: I switched it back to what I had before.
I think D3 just hates me.

I am blind you have date instead data, please create var data=[]

I think its’s done now but svg is not even showing. I guess I need a step-by-step tutorial and start it all over again.

It’s because that also affected the domain

Yeah, I figured. I’ll just look for a youtube tutorial and do it again from scratch following someone’s example.

good luck I am here one hour

I look you changed parseDate to date.parse
that is var parseDate = d3.timeParse("%Y");
from d3/d3-time-format/blob/master/README.md#timeFormat

And I look the JSON the data is just year like 1995.
you use in on x scaleLinear() so you don’t need format the d.Year