D3 Scatterplot Project Feedback --- Legends? and Styling Best Practice

Code Feedback
1

Hi Campers,

Just finished the D3 Scatterplot Project. (Lots of distractions this week, hope I’m not the only one with this problem!) Would love your feedback!

Follow up question:
D3 JS Date( ) Object - Javascript Date object is used for Time and Date functions. This means that in this challenge, data measurements in minutes/seconds need to be associated with full “Dates” (with years/months information). Is this the only way to interpret time data in JS, or is there more targeted ways to parse time information?

D3 Styling - I understand that you can style D3 objects within JS, or you can use an external stylesheet. Is it best practice just to keep everything within the JS file?

D3 Legend Creation - What are best practices? - I was researching about legends to create the D3 legend for this project, and I didn’t find any “one-shot” solution to this. Legend creation is kind of annoying, and it feels like you have to make it from scratch. This link was helpful (https://www.d3-graph-gallery.com/graph/custom_legend.html), and this D3 plugin seems really helpful (https://d3-legend.susielu.com/).

However, I’m curious if there is a unified strategy behind legends in D3, without using external libraries. Here’s my code:

//create legend
  const legw = 220;
  const legh = 60;
  //create legend box
  svg
    .append("rect")
    .attr("id", "legend")
    .attr("width", legw)
    .attr("height", legh)
    .attr(
      "transform",
      "translate(" + (w - padding - legw) + "," + padding + ")"
    )
    .style("fill", "white")
    .style("stroke", "black");

  //create legend-icons
  svg
    .append("rect")
    .attr("class", "legend-icon")
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", "rgb(248, 190, 83)")
    .attr(
      "transform",
      `translate( ${w - padding - legw + 15}, ${padding + legh - 25})`
    );

  svg
    .append("rect")
    .attr("class", "legend-icon")
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", "black")
    .attr(
      "transform",
      `translate( ${w - padding - legw + 15}, ${padding + legh - 45})`
    );

  //create legend-texts
  svg
    .append("text")
    .attr("class", "legend-text")
    .text("No doping allegations")
    .style("font-family", "Roboto")
    .attr(
      "transform",
      `translate( ${w - padding - legw + 35}, ${padding + legh - 35})`
    );

  svg
    .append("text")
    .attr("class", "legend-text")
    .text("Recorded doping allegations")
    .style("font-family", "Roboto")
    .attr(
      "transform",
      `translate( ${w - padding - legw + 35}, ${padding + legh - 15})`
    );