API tools faq
paste
Advertisement
NTahmid

outliers_v2_scatter

NTahmid
Feb 22nd, 2024
688
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.14 KB | None | 0 0
raw download clone embed print report
  1. Here is the modified code with annotations to highlight the outliers:
  2.  
  3. ```html
  4. <!doctype html>
  5. <meta charset="utf-8" />
  6. <html>
  7.   <head>
  8.     <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>
  9.     <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
  10.   </head>
  11.  
  12.   <style>
  13.     * {
  14.       font-family: sans-serif;
  15.     }
  16.  
  17.     #tooltip {
  18.       visibility: hidden;
  19.       position: absolute;
  20.       opacity: 0.8;
  21.       padding: 10px;
  22.       vertical-align: middle;
  23.       border-radius: 5px;
  24.       background-color: #ecf0f1;
  25.       font-size: 14px;
  26.     }
  27.  
  28.     .textbox {
  29.       font-size: 14px;
  30.     }
  31.  
  32.     #legend {
  33.       opacity: 0.2;
  34.       fill: #2c3e50;
  35.     }
  36.  
  37.     #title {
  38.       text-anchor: middle;
  39.       font-size: 22px;
  40.     }
  41.  
  42.     .label {
  43.       text-anchor: middle;
  44.     }
  45.  
  46.     #svg {
  47.       background-color: white;
  48.     }
  49.  
  50.     .annotation {
  51.       fill: #c86984;
  52.       stroke: #c86984;
  53.     }
  54.   </style>
  55.  
  56.   <body>
  57.     <div id="container" align="center"></div>
  58.  
  59.     <script type="text/javascript">
  60.       var url =
  61.         "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
  62.  
  63.       var colors = ["#27ae60", "#8e44ad"];
  64.       var legendKeys = ["No Doping Allegations", "Doping Allegations"];
  65.  
  66.       const tooltip = d3
  67.         .select("body")
  68.         .append("div")
  69.         .attr("id", "tooltip")
  70.         .style("visibility", "hidden");
  71.  
  72.       d3.json(url).then(function (data) {
  73.         var width = 700;
  74.         var height = 500;
  75.         var margin = { left: 90, top: 80, bottom: 50, right: 20 };
  76.         var axisOffset = 10;
  77.  
  78.         const svg = d3
  79.           .select("#container")
  80.           .append("svg")
  81.           .attr("id", "svg")
  82.           .attr("width", width)
  83.           .attr("height", height);
  84.  
  85.         var xMin = d3.min(data, (d) => d["Year"]);
  86.         var xMax = d3.max(data, (d) => d["Year"]);
  87.  
  88.         var parseTime = d3.timeParse("%M:%S");
  89.         var yMin = d3.min(data, (d) => parseTime(d["Time"]));
  90.         var yMax = d3.max(data, (d) => parseTime(d["Time"]));
  91.  
  92.         var xScale = d3
  93.           .scaleLinear()
  94.           .domain([xMin, xMax])
  95.           .range([margin.left + axisOffset, width - margin.right]);
  96.  
  97.         var yScale = d3
  98.           .scaleTime()
  99.           .domain([yMax, yMin])
  100.           .range([height - margin.bottom - axisOffset, margin.top]);
  101.  
  102.         var xAxis = d3.axisBottom().scale(xScale).tickFormat(d3.format("d"));
  103.         var yAxis = d3
  104.           .axisLeft()
  105.           .scale(yScale)
  106.           .tickFormat(d3.timeFormat("%M:%S"));
  107.  
  108.         svg
  109.           .append("g")
  110.           .attr("transform", "translate(0, " + (height - margin.bottom) + ")")
  111.           .attr("id", "x-axis")
  112.           .call(xAxis);
  113.  
  114.         svg
  115.           .append("g")
  116.           .attr("transform", "translate(" + margin.left + ", 0)")
  117.           .attr("id", "y-axis")
  118.           .call(yAxis);
  119.  
  120.         svg
  121.           .selectAll("scatterPoints")
  122.           .data(data)
  123.           .enter()
  124.           .append("circle")
  125.           .attr("cx", (d) => xScale(d["Year"]))
  126.           .attr("cy", (d) => yScale(parseTime(d["Time"])))
  127.           .attr("r", 5)
  128.           .attr("fill", (d) => (d["Doping"] == "" ? colors[0] : colors[1]))
  129.           .attr("class", "dot")
  130.           .attr("data-xvalue", (d) => d["Year"])
  131.           .attr("data-yvalue", (d) => parseTime(d["Time"]))
  132.           .on("mouseover", function (d) {
  133.             info = d["originalTarget"]["__data__"];
  134.             tooltip
  135.               .style("visibility", "visible")
  136.               .style("left", event.pageX + 10 + "px")
  137.               .style("top", event.pageY - 80 + "px")
  138.               .attr("data-year", info["Year"])
  139.               .html(
  140.                 info["Name"] +
  141.                   " (" +
  142.                   info["Year"] +
  143.                   ") <br> Time: " +
  144.                   info["Time"] +
  145.                   "<br><br>" +
  146.                   info["Doping"]
  147.               );
  148.           })
  149.           .on("mousemove", function () {
  150.             tooltip.style("left", event.pageX + 10 + "px");
  151.           })
  152.           .on("mouseout", function () {
  153.             tooltip.style("visibility", "hidden");
  154.           });
  155.  
  156.         svg
  157.           .append("text")
  158.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  159.           .attr("y", height - margin.bottom / 5)
  160.           .attr("class", "label")
  161.           .text("Year");
  162.  
  163.         svg
  164.           .append("text")
  165.           .attr("y", margin.left / 4)
  166.           .attr("x", -height / 2)
  167.           .attr("transform", "rotate(-90)")
  168.           .attr("class", "label")
  169.           .text("Time to finish");
  170.  
  171.         svg
  172.           .append("text")
  173.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  174.           .attr("y", margin.top / 2.6)
  175.           .attr("id", "title")
  176.           .text("Doping in professional bike racing");
  177.  
  178.         svg
  179.           .append("text")
  180.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  181.           .attr("y", margin.top / 1.4)
  182.           .text("35 fastest times to finish Alpe d'Huez")
  183.           .style("font-size", "16px")
  184.           .style("text-anchor", "middle");
  185.  
  186.         svg
  187.           .selectAll("legendSymbols")
  188.           .data(legendKeys)
  189.           .enter()
  190.           .append("circle")
  191.           .attr("cx", width - margin.right - 200)
  192.           .attr("cy", (d, i) => 150 + i * 25)
  193.           .attr("r", 5)
  194.           .attr("fill", (d, i) => colors[i]);
  195.  
  196.         svg
  197.           .selectAll("legendTexts")
  198.           .data(legendKeys)
  199.           .enter()
  200.           .append("text")
  201.           .text((d) => d)
  202.           .attr("x", width - margin.right - 200 + 15)
  203.           .attr("y", (d, i) => 150 + i * 25 + 5)
  204.           .attr("class", "textbox");
  205.  
  206.         const legend = svg
  207.           .append("rect")
  208.           .attr("x", width - margin.right - 200 - 15)
  209.           .attr("y", 150 - 5 - 10)
  210.           .attr("rx", 5)
  211.           .attr("ry", 5)
  212.           .attr("width", 195)
  213.           .attr("height", 55)
  214.           .attr("id", "legend");
  215.  
  216.         // Annotations
  217.         const outliers = data.filter(d => parseTime(d["Time"]) < parseTime("38:00"));
  218.        const annotations = outliers.map(d => ({
  219.           note: { label: d["Name"] + " (" + d["Year"] + ")" },
  220.           x: xScale(d["Year"]),
  221.           y: yScale(parseTime(d["Time"])),
  222.           dx: 50,
  223.           dy: -30
  224.         }));
  225.  
  226.         const makeAnnotations = d3.annotation()
  227.           .annotations(annotations)
  228.           .type(d3.annotationLabel);
  229.  
  230.         svg.append("g")
  231.           .attr("class", "annotation-group")
  232.           .call(makeAnnotations);
  233.       });
  234.     </script>
  235.   </body>
  236. </html>
  237. ```
  238.  
  239. This code adds annotations to the scatter plot to highlight the outliers. The outliers are defined as the cyclists who finished the race in less than 38 minutes. The annotations are created using the d3-annotation library. Each annotation consists of a label with the cyclist's name and year, and an arrow pointing to the corresponding data point on the scatter plot. The annotations are styled with a fill and stroke color of #c86984.
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!