I am visualizing a scatter plot graph and I'm stuck

[favourdylismundi]

When I run the code it is saying I pass 15/16
thisis the problem with it
Below here is the error that i made

8. The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis.
   y values don’t line up with y locations : expected false to be true
   AssertionError: y values don’t line up with y locations : expected false to be true
   at o. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:14996)
   at o.e (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:401:182)
   at Object.e [as get] (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:68:1382)
   at Function.n.isTrue (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:1222)
   at n. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:182531)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259477
   at ny.Dg.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:259772)
   at r.Qg.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274680)
   at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:275616
   at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569:274033)

Below here is my code

CodePen - FCC: D3 Scatter Plot .graph { display: block; margin: auto; background-color: yellow; } body { font: 10px cursive; width: 100%; height: 100%; } .main { position: relative; } .axis path, .axis line { fill: none; stroke: #39FF14; shape-rendering: crispEdges; } .dot { stroke: #39FF14; opacity: 0.8; } div.tooltip { position: absolute; padding: 10px; font: 15px monospace; background: #39FF14; border: 0px; border-radius: 8px; pointer-events: none; }

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script id="rendered-js">

/* global d3 /
/ eslint-disable max-len */

// eslint-disable-next-line no-unused-vars
var projectName = ‘scatter-plot’;

// RETURN TO GIDCDN link once chances propogate

// coded by @paycoguy

var url =
‘https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json’;
var margin = {
top: 100,
right: 20,
bottom: 30,
left: 60 },

width = 920 - margin.left - margin.right,
height = 630 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);

var y = d3.scaleTime().range([0, height]);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var timeFormat = d3.timeFormat(’%M:%S’);
var xAxis = d3.axisBottom(x).tickFormat(d3.format(‘d’));

var yAxis = d3.axisLeft(y).tickFormat(timeFormat);

// Define the div for the tooltip
var div = d3.
select(‘body’).
append(‘div’).
attr(‘class’, ‘tooltip’).
attr(‘id’, ‘tooltip’).
style(‘opacity’, 0);

var svg = d3.
select(‘body’).
append(‘svg’).
attr(‘width’, width + margin.left + margin.right).
attr(‘height’, height + margin.top + margin.bottom).
attr(‘class’, ‘graph’).
append(‘g’).
attr(‘transform’, ‘translate(’ + margin.left + ‘,’ + margin.top + ‘)’);

d3.json(url).
then(data => {
data.forEach(function (d) {
d.Place = +d.Place;
var parsedTime = d.Time.split(’:’);
d.Time = new Date(1970, 0, 1, 0, parsedTime[0], parsedTime[1]);
});

x.domain([
d3.min(data, function (d) {
return d.Year - 1;
}),
d3.max(data, function (d) {
return d.Year + 1;
})]);

y.domain(
d3.extent(data, function (d) {
return d.Time;
}));

svg.
append(‘g’).
attr(‘class’, ‘x axis’).
attr(‘id’, ‘x-axis’).
attr(‘transform’, ‘translate(0,’ + height + ‘)’).
call(xAxis).
append(‘text’).
attr(‘class’, ‘x-axis-label’).
attr(‘x’, width).
attr(‘y’, -6).
style(‘text-anchor’, ‘end’).
text(‘Year’);

svg.
append(‘g’).
attr(‘class’, ‘y axis’).
attr(‘id’, ‘y-axis’).
call(yAxis).
append(‘text’).
attr(‘class’, ‘label’).
attr(‘transform’, ‘rotate(-90)’).
attr(‘y’, 6).
attr(‘dy’, ‘.71em’).
style(‘text-anchor’, ‘end’).
text(‘Best Time (minutes)’);

svg.
append(‘text’).
attr(‘transform’, ‘rotate(-90)’).
attr(‘x’, -160).
attr(‘y’, -44).
style(‘font-size’, 18).
text(‘Time in Minutes’);

svg.
selectAll(’.dot’).
data(data).
enter().
append(‘circle’).
attr(‘class’, ‘dot’).
attr(‘r’, 6).
attr(‘cx’, function (d) {
return x(d.Year);
}).
attr(‘cy’, function (d) {
return y(d.Time);
}).
attr(‘data-xvalue’, function (d) {
return d.Year;
}).
attr(‘data-yvalue’, function (d) {
return d.Time.toISOString();
}).
style(‘fill’, function (d) {
return color(d.Doping !== ‘’);
}).
on(‘mouseover’, function (event, d) {
div.style(‘opacity’, 0.9);
div.attr(‘data-year’, d.Year);
div.
html(
d.Name +
': ’ +
d.Nationality +
‘
’ +
'Year: ’ +
d.Year +
', Time: ’ +
timeFormat(d.Time) + (
d.Doping ? ‘

’ + d.Doping : ‘’)).

style('left', event.pageX + 'px').
style('top', event.pageY - 28 + 'px');

}).
on(‘mouseout’, function () {
div.style(‘opacity’, 0);
});

// title
svg.
append(‘text’).
attr(‘id’, ‘title’).
attr(‘x’, width / 2).
attr(‘y’, 0 - margin.top / 2).
attr(‘text-anchor’, ‘middle’).
style(‘font-size’, ‘30px’).
text(‘Doping in Professional Bicycle Racing’);

// subtitle
svg.
append(‘text’).
attr(‘x’, width / 2).
attr(‘y’, 0 - margin.top / 2 + 25).
attr(‘text-anchor’, ‘middle’).
style(‘font-size’, ‘20px’).
text(“35 Fastest times up Alpe d’Huez”);

var legendContainer = svg.append(‘g’).attr(‘id’, ‘legend’);

var legend = legendContainer.
selectAll(’#legend’).
data(color.domain()).
enter().
append(‘g’).
attr(‘class’, ‘legend-label’).
attr(‘transform’, function (d, i) {
return ‘translate(0,’ + (height / 2 - i * 20) + ‘)’;
});

legend.
append(‘rect’).
attr(‘x’, width - 18).
attr(‘width’, 18).
attr(‘height’, 18).
style(‘fill’, color);

legend.
append(‘text’).
attr(‘x’, width - 24).
attr(‘y’, 9).
attr(‘dy’, ‘.35em’).
style(‘text-anchor’, ‘end’).
text(function (d) {
if (d) {
return ‘Riders with doping allegations’;
} else {
return ‘No doping allegations’;
}
});
}).
catch(err => console.log(err));
//# sourceURL=pen.js

199419961998200020022004200620082010201220142016Year37:0037:1537:3037:4538:0038:1538:3038:4539:0039:1539:3039:45Best Time (minutes)Time in MinutesDoping in Professional Bicycle Racing35 Fastest times up Alpe d’HuezRiders with doping allegationsNo doping allegations

D3 Scatter Plot

[andrebdinis]

Hello, favourdylismundi.

I am having the exact same issue.

The “time” property is treated as a Date object, and it is converted whenever necessary with d3.timeFormat() (convert to String) and d3.timeParse() (convert to Date) functions.

All dots and information are well-presented in the graph, in the right coordinates, in both axes. Even so, the test n. 8 fails.

Why? I do not know.

EDIT: After trying out different code for several hours, I got it to work!
I must say the layout did not change (all dots remained in the same correct position), even after changing the code so that test n. 8 succeeds.

The problem was: the Date format I was working on was Western European Standard Hour, and, of course, for FreeCodeCamp to be able to assess every project from around the world they would have to set the Date to an universal standard hour format, to work with everybody, like ISO or UTC.

Before (Graph is correct but Test n. 8 fails):

.attr("data-yvalue", (d) => d.time)
/* Date object: Sun Jan 01 1995 00:00:00 GMT+0100 (Hora padrão da Europa Ocidental) Mon Jan 01 1900 00:36:50 GMT-0036 (Hora padrão da Europa Ocidental) */

After (Test n. 8 succeeds):

.attr("data-yvalue", (d) => d.time.toISOString())
/* String: 1900-01-01T01:13:35.000Z */

or

.attr("data-yvalue", (d) => d.time.toUTCString())
/* String: Mon, 01 Jan 1900 01:13:35 GMT */

or

.attr("data-yvalue", (d) => d.time.toGMTString())
/* String: Mon, 01 Jan 1900 01:13:35 GMT */

or

.attr("data-yvalue", (d) => d.time.toJSON())
/* String: 1900-01-01T01:13:35.000Z */