Visualize Data with a Scatterplot Graph - on stuck with circles

1

Hi!

I’m just working on the second Data Visualization Project.

I can’t get the circles to the svg. Is something missing?

Can anybody give me a hint?

Here’s my code so far:

> req = new XMLHttpRequest();
> req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json", true);
> req.send();
> req.onload=function(){
>   json=JSON.parse(req.responseText);
> 
> const dataset = json;
> 
> const w = 600;
> const h = 600;
> const padding = 100;
> const paddingAxis = 50;
> 
> const xScale = d3.scaleLinear()
>               .domain([d3.min(dataset, (d) => d.Year), d3.max(dataset, (d) => d.Year)])
>               .range([0,w-padding])
> 
> const yScale = d3.scaleLinear()
>               .domain([d3.min(dataset, (d) => d.Seconds), d3.max(dataset, (d) => d.Seconds)])
>               .range([h-padding,0])
>   
> const xAxis = d3.axisBottom(xScale);
> 
> const yAxis = d3.axisLeft(yScale);
> 
> const svg = d3.select("body")
>               .append("svg")
>               .attr("width", w)
>               .attr("height", h)
>               .style("background-color", "grey");
> 
> svg.select("circle").data(dataset).enter()
>               .append("circle")
>               .attr("cx", (d) => xScale(d.Year))
>               .attr("cy", (d) => yScale(d.Seconds))
>               .attr("r", 10);
> 
> svg.append("g")
>         .attr("transform", "translate("+(paddingAxis)+", "+(w-paddingAxis)+")")
>         .call(xAxis);
> 
> svg.append("g")
>         .attr("transform", "translate("+(paddingAxis)+","+(paddingAxis)+")")
>         .call(yAxis);  
>    
> }
2

You should use selectAll instead of select in the following code:

svg.select("circle").data(dataset).enter()
               .append("circle")
               /* ... */