API tools faq
paste
Advertisement
NTahmid

extrema_scatter

NTahmid
Feb 13th, 2024
942
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.45 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <meta charset="utf-8" />
  3. <html>
  4.   <head>
  5.     <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>
  6.   </head>
  7.  
  8.   <style>
  9.     * {
  10.       font-family: sans-serif;
  11.     }
  12.  
  13.     #tooltip {
  14.       visibility: hidden;
  15.       position: absolute;
  16.       opacity: 0.8;
  17.       padding: 10px;
  18.       vertical-align: middle;
  19.       border-radius: 5px;
  20.       background-color: #ecf0f1;
  21.       font-size: 14px;
  22.     }
  23.  
  24.     .textbox {
  25.       font-size: 14px;
  26.     }
  27.  
  28.     #legend {
  29.       opacity: 0.2;
  30.       fill: #2c3e50;
  31.     }
  32.  
  33.     #title {
  34.       text-anchor: middle;
  35.       font-size: 22px;
  36.     }
  37.  
  38.     .label {
  39.       text-anchor: middle;
  40.     }
  41.  
  42.     #svg {
  43.       background-color: white;
  44.     }
  45.  
  46.     .annotation-line {
  47.       stroke: red;
  48.       stroke-width: 1.5;
  49.     }
  50.  
  51.     .annotation-text {
  52.       fill: red;
  53.       font-size: 12px;
  54.     }
  55.   </style>
  56.  
  57.   <body>
  58.     <div id="container" align="center"></div>
  59.  
  60.     <script type="text/javascript">
  61.       var url =
  62.         "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
  63.  
  64.       var colors = ["#27ae60", "#8e44ad"];
  65.       var legendKeys = ["No Doping Allegations", "Doping Allegations"];
  66.  
  67.       const tooltip = d3
  68.         .select("body")
  69.         .append("div")
  70.         .attr("id", "tooltip")
  71.         .style("visibility", "hidden");
  72.  
  73.       d3.json(url).then(function (data) {
  74.         var width = 700;
  75.         var height = 500;
  76.         var margin = { left: 90, top: 80, bottom: 50, right: 20 };
  77.         var axisOffset = 10;
  78.  
  79.         const svg = d3
  80.           .select("#container")
  81.           .append("svg")
  82.           .attr("id", "svg")
  83.           .attr("width", width)
  84.           .attr("height", height);
  85.  
  86.         var xMin = d3.min(data, (d) => d["Year"]);
  87.         var xMax = d3.max(data, (d) => d["Year"]);
  88.  
  89.         var parseTime = d3.timeParse("%M:%S");
  90.         var yMin = d3.min(data, (d) => parseTime(d["Time"]));
  91.         var yMax = d3.max(data, (d) => parseTime(d["Time"]));
  92.  
  93.         var xScale = d3
  94.           .scaleLinear()
  95.           .domain([xMin, xMax])
  96.           .range([margin.left + axisOffset, width - margin.right]);
  97.  
  98.         var yScale = d3
  99.           .scaleTime()
  100.           .domain([yMax, yMin])
  101.           .range([height - margin.bottom - axisOffset, margin.top]);
  102.  
  103.         var xAxis = d3.axisBottom().scale(xScale).tickFormat(d3.format("d"));
  104.         var yAxis = d3
  105.           .axisLeft()
  106.           .scale(yScale)
  107.           .tickFormat(d3.timeFormat("%M:%S"));
  108.  
  109.         svg
  110.           .append("g")
  111.           .attr("transform", "translate(0, " + (height - margin.bottom) + ")")
  112.           .attr("id", "x-axis")
  113.           .call(xAxis);
  114.  
  115.         svg
  116.           .append("g")
  117.           .attr("transform", "translate(" + margin.left + ", 0)")
  118.           .attr("id", "y-axis")
  119.           .call(yAxis);
  120.  
  121.         svg
  122.           .selectAll("scatterPoints")
  123.           .data(data)
  124.           .enter()
  125.           .append("circle")
  126.           .attr("cx", (d) => xScale(d["Year"]))
  127.           .attr("cy", (d) => yScale(parseTime(d["Time"])))
  128.           .attr("r", 5)
  129.           .attr("fill", (d) => (d["Doping"] == "" ? colors[0] : colors[1]))
  130.           .attr("class", "dot")
  131.           .attr("data-xvalue", (d) => d["Year"])
  132.           .attr("data-yvalue", (d) => parseTime(d["Time"]))
  133.           .on("mouseover", function (d) {
  134.             info = d["originalTarget"]["__data__"];
  135.             tooltip
  136.               .style("visibility", "visible")
  137.               .style("left", event.pageX + 10 + "px")
  138.               .style("top", event.pageY - 80 + "px")
  139.               .attr("data-year", info["Year"])
  140.               .html(
  141.                 info["Name"] +
  142.                   " (" +
  143.                   info["Year"] +
  144.                   ") <br> Time: " +
  145.                   info["Time"] +
  146.                   "<br><br>" +
  147.                   info["Doping"]
  148.               );
  149.           })
  150.           .on("mousemove", function () {
  151.             tooltip.style("left", event.pageX + 10 + "px");
  152.           })
  153.           .on("mouseout", function () {
  154.             tooltip.style("visibility", "hidden");
  155.           });
  156.  
  157.         svg
  158.           .append("text")
  159.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  160.           .attr("y", height - margin.bottom / 5)
  161.           .attr("class", "label")
  162.           .text("Year");
  163.  
  164.         svg
  165.           .append("text")
  166.           .attr("y", margin.left / 4)
  167.           .attr("x", -height / 2)
  168.           .attr("transform", "rotate(-90)")
  169.           .attr("class", "label")
  170.           .text("Time to finish");
  171.  
  172.         svg
  173.           .append("text")
  174.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  175.           .attr("y", margin.top / 2.6)
  176.           .attr("id", "title")
  177.           .text("Doping in professional bike racing");
  178.  
  179.         svg
  180.           .append("text")
  181.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  182.           .attr("y", margin.top / 1.4)
  183.           .text("35 fastest times to finish Alpe d'Huez")
  184.           .style("font-size", "16px")
  185.           .style("text-anchor", "middle");
  186.  
  187.         svg
  188.           .selectAll("legendSymbols")
  189.           .data(legendKeys)
  190.           .enter()
  191.           .append("circle")
  192.           .attr("cx", width - margin.right - 200)
  193.           .attr("cy", (d, i) => 150 + i * 25)
  194.           .attr("r", 5)
  195.           .attr("fill", (d, i) => colors[i]);
  196.  
  197.         svg
  198.           .selectAll("legendTexts")
  199.           .data(legendKeys)
  200.           .enter()
  201.           .append("text")
  202.           .text((d) => d)
  203.           .attr("x", width - margin.right - 200 + 15)
  204.           .attr("y", (d, i) => 150 + i * 25 + 5)
  205.           .attr("class", "textbox");
  206.  
  207.         const legend = svg
  208.           .append("rect")
  209.           .attr("x", width - margin.right - 200 - 15)
  210.           .attr("y", 150 - 5 - 10)
  211.           .attr("rx", 5)
  212.           .attr("ry", 5)
  213.           .attr("width", 195)
  214.           .attr("height", 55)
  215.           .attr("id", "legend");
  216.  
  217.         // Annotations for extrema
  218.         var minTime = d3.min(data, (d) => d["Seconds"]);
  219.         var maxTime = d3.max(data, (d) => d["Seconds"]);
  220.         var minData = data.find((d) => d["Seconds"] === minTime);
  221.         var maxData = data.find((d) => d["Seconds"] === maxTime);
  222.  
  223.         // Annotation for minimum time
  224.         svg.append("line")
  225.           .attr("x1", xScale(minData["Year"]))
  226.           .attr("y1", yScale(parseTime(minData["Time"])))
  227.           .attr("x2", xScale(minData["Year"]) - 50)
  228.           .attr("y2", yScale(parseTime(minData["Time"])) - 50)
  229.           .attr("class", "annotation-line");
  230.  
  231.         svg.append("text")
  232.           .attr("x", xScale(minData["Year"]) - 55)
  233.           .attr("y", yScale(parseTime(minData["Time"])) - 55)
  234.           .text("Fastest time: " + minData["Time"])
  235.           .attr("class", "annotation-text");
  236.  
  237.         // Annotation for maximum time
  238.         svg.append("line")
  239.           .attr("x1", xScale(maxData["Year"]))
  240.           .attr("y1", yScale(parseTime(maxData["Time"])))
  241.           .attr("x2", xScale(maxData["Year"]) - 80 )
  242.           .attr("y2", yScale(parseTime(maxData["Time"])) + 40)
  243.           .attr("class", "annotation-line");
  244.  
  245.         svg.append("text")
  246.           .attr("x", xScale(maxData["Year"]) - 100)
  247.           .attr("y", yScale(parseTime(maxData["Time"])) + 55)
  248.           .text("Slowest time: " + maxData["Time"])
  249.           .attr("class", "annotation-text");
  250.       });
  251.     </script>
  252.   </body>
  253. </html>
  254.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!