Can't bind external json data to d3

JavaScript
1

Tell us what’s happening:
Hello,
I’m coding my first project with D3 and I haven’t figured it out yet how to bind an external set of JSON data to my scatterplot graph.

Here’s below a simple test I made just to see if I can visualize the data.

Your code so far

const w = 1000
const h = 600
const padding = 30

const svg = d3.select('body')
                .append('svg')
                .attr('width', w)
                .attr('height', h)

const link = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json'

d3.json(link)
  .then(function(d){

  console.log(d[0].Year)

  svg.selectAll('circle')
  .data(d)
  .enter()
  .append('circle')
  .attr('cx', (d) => d.Year)
  .attr('cy', (d) => d.Seconds)
  .attr('r', (d) => 5)
})

I see based on the console log that the JSON / THEN part is correct:
And I guess the mistake it’s on the ‘Circle’ part and how I bind data there.

Anybody can help?

Thanks,
Marco

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0.

2

Hi @MarcoMaz ,

Your JSON data indeed binds with circles. However, the values of d.Year and d.Seconds are greater than your svg frame which causes them to move out of the frame while drawing them. Thats why you are unable to see them on the page. If you inspect the page, you can see the circle tags with corresponding cx, cy and r values.
image

You can also quickly verify this by dividing d.Year and d.Seconds by 10 in your code. You will be able to see the circles. Usually to tackle this issue, you can use scaling method.

1 Like
3