scatterplot = { function formatDuration(duration) { const hours = Math.floor(duration / 3600) const restHours = duration % 3600 const minutes = Math.floor(restHours / 60) const seconds = restHours % 60 const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds return `${hours}:${formattedMinutes}:${formattedSeconds}` } const color = d3.scaleOrdinal(d3.schemeCategory10); function colorValue(d) { return d.isPro } const svg = d3.select(DOM.svg(width, height)); const y = d3.scaleLinear() .domain([0, Math.max(...powerData.concat(proRidersData).map(d => d.watts))]) .range([height - margin.top, margin.bottom]) const x = d3.scaleLinear() .domain(d3.extent(powerData.concat(proRidersData), d => d.duration)) .range([margin.left, width - margin.right]) const xAxis = d3.axisBottom(x) .ticks(5) .tickFormat(function(d) { const { duration } = d const hours = Math.floor(d / 3600) return `${hours}h` }) const yAxis = d3.axisLeft(y) .ticks(5) .tickFormat(function(d) { return `${d}W` }) const tooltip = d3 .select("body") .append("div") .attr("class", "scatterTooltip") const scatter = svg.append("g") .selectAll("circle") .data(powerData.concat(proRidersData)) .enter().append("circle") .attr("cx", function(d) { return x(d.duration) }) .attr("cy", function(d) { return y(d.watts) }) .attr("fill", function(d) { return color(colorValue(d)) }) .attr("r", 6) .on("mouseover", function(d) { d3.select(this) .attr("fill", "red"); const xPosition = d3.event.pageX + 15 const yPosition = height - d3.event.pageY + 15 const formattedDuration = formatDuration(d.duration) let tooltipContent if (d.isPro) { tooltipContent = `

Pro ride

Rider: ${d.riderFirstName} ${d.riderName}

Race: ${d.description}

Duration: ${formattedDuration}

Average power: ${d3.format('.3s')(d.watts)}W

` } else { tooltipContent = `

Rider: Antoine Dejonckheere

Duration: ${formattedDuration}

Average power: ${d3.format('.3s')(d.watts)}W

` } tooltip .style("left", xPosition + "px") .style("top", y(0) - yPosition + "px") .style("display", "inline-block") .html(tooltipContent) }) .on("mouseout", function(d){ d3.select(this) .attr('fill', function(d) { return color(colorValue(d)) }) tooltip.style("display", "none") }) svg.append("g") .attr("transform", `translate (0, ${height - margin.bottom})`) .call(xAxis); svg.append("g") .call(yAxis) .attr("transform", `translate (${margin.left}, 0)`) svg.append("text") .attr("transform", `translate( ${width/2} , ${height - margin.bottom + 30})`) .style("text-anchor", "middle") .style("font-size", "12px") .text("Ride duration"); svg.append("text") .attr("transform", `translate (${margin.left / 2 - 15}, ${height / 2}), rotate(-90)`) .style("text-anchor", "middle") .style("font-size", "12px") //.attr("transform", "rotate(-90)") .text("Average power") // legend const legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return `translate(0, ${height - 2 * margin.bottom - i * 20} )`; }); // draw legend colored rectangles legend.append("rect") .attr("x", width - 18 - 175 - 12) .attr("width", 18) .attr("height", 18) .style("fill", color); // draw legend text legend.append("text") .attr("x", width - 175) .attr("width", 175) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "start") .style("margin-left", "12px") .text(function(d) { if (d) { return "Pro rider reference" } return "Antoine Dejonckheere" }) return svg.node() }