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

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

#1

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?

Thanks!!


#2

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) =>
                scalex(d.Year))
            .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()
    http://www.tutorialsteacher.com/d3js/axes-in-d3
    https://github.com/d3/d3-axis

#3

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!


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

#5

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


#6

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);})

        });

and

.data(timeNumVal)
change to 
.data(data)

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


#7

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


#8

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


#9

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.


#10

It’s because that also affected the domain


#11

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


#12

good luck I am here one hour


#13

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


#14

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