Nothing displays, not even the title. I can’t figure out what’s wrong. The code is below.
<body>
<h5 id="title">
</h5>
<div class="scatter-plot">
</div>
<div class="tooltip">
</div>
<legend class="legend">
<div class="legend-title">
</div>
<div class="color-code">
</div>
<div class="country-code">
</div>
<div class="nation">
</div>
</legend>
<script src="./script.js ">
</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7">
</script>
</body>
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
font-size: 6;
}
.dot:hover {
fill: white;
}
.scatter-plot {
position: absolute;
}
#tooltip {
position: absolute;
width: 160px;
height: 60px;
padding: 0.5em;
font: 1rem;
border-radius: 4px;
pointer-events: none;
color: black;
background: lightblue;
display: flex;
align-items: center;
justify-content: center;
}
let json = [];
const w = 420;
const h = 400;
const pad = 50;
d3
.json(
"https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json"
)
.then((data) => { // *
const {time, place, seconds, name, year, nationality, doping, URL} = dataset;
const title =
document.getElementById("title"); // *
title.innerText = "Cyclist Data";
const mxYear = d3.max(dataset, (d) => year);
const mnYear = d3.min(dataset, (d) => year);
const xScale = d3
.scaleTime()
.domain([mnYear, mxYear])
.range([pad, w - pad]);
const mxTime= d3.max(dataset, (d) => new Time(year, 1, 1, 0, 0, seconds, 0).getMinutes());
const yScale = d3
.scaleLinear()
.domain([0, mxTime])
.range([h - pad, pad]);
const svg = d3
.select(".scatter-plot")
.append("svg")
.attr("width", w)
.attr("height", h)
.style("position", "absolute")
.style("left", -190)
.attr("x", w)
.attr("y", h);
const tooltip = d3
.select(".tooltip")
.attr("id", "tooltip")
.style("position", "absolute")
.style("visibility", "hidden");
svg
.selectAll("circle")
.append("g")
.data(dataset)
.enter()
.append("circle")
.attr("class", "dot")
.attr("cx", (d, i) => xScale(year))
.attr("cy", (d, i) => yScale(h - time))
.attr("r", 5)
.attr("x-value", (d) => year)
.attr("y-value", (d) => new Time(year, 1, 1, 0, 0, seconds, 0).getMinutes())
.attr("fill", "green")
.on("mouseover", (event, d) => {
tooltip
.attr("x-value", year)
.attr("y-value", new Time(year, 1, 1, 0, 0, seconds, 0).getMinutes())
.transition()
.duration(200)
.style("visibility", "visible")
.text(
"Name:\t" + name +
"Year:\t" + year +
"\nTime:\t" + time +
"\nPlace:\t" + place +
"\nSeconds\t" + seconds +
"\nNationality:\t" + nationality +
"\nDoping:\t" + doping +
"URL:\t" + URL + "\n")
.style("left", 70 + "px")
.style("top", 150 + "px");
})
.on("mouseout", () => {
tooltip
.transition()
.style("visibility", "hidden");
});
const xAxis = d3.axisBottom(xScale);
svg
.append("g")
.attr("id", "x-axis")
.attr("transform", `translate(0, ${h - pad})`)
.call(xAxis);
const yAxis = d3.axisLeft(yScale);
svg
.append("g")
.attr("id", "y-axis")
.attr("transform", `translate(${pad}, 0)`)
.call(yAxis);
});