API tools faq
paste
Advertisement
NTahmid

exception_scatter

NTahmid
Feb 13th, 2024
816
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.75 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 {
  47.       fill: red;
  48.       stroke: red;
  49.     }
  50.   </style>
  51.  
  52.   <body>
  53.     <div id="container" align="center"></div>
  54.  
  55.     <script type="text/javascript">
  56.       var url =
  57.         "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json";
  58.  
  59.       var colors = ["#27ae60", "#8e44ad"];
  60.       var legendKeys = ["No Doping Allegations", "Doping Allegations"];
  61.  
  62.       const tooltip = d3
  63.         .select("body")
  64.         .append("div")
  65.         .attr("id", "tooltip")
  66.         .style("visibility", "hidden");
  67.  
  68.       d3.json(url).then(function (data) {
  69.         var width = 700;
  70.         var height = 500;
  71.         var margin = { left: 90, top: 80, bottom: 50, right: 20 };
  72.         var axisOffset = 10;
  73.  
  74.         const svg = d3
  75.           .select("#container")
  76.           .append("svg")
  77.           .attr("id", "svg")
  78.           .attr("width", width)
  79.           .attr("height", height);
  80.  
  81.         var xMin = d3.min(data, (d) => d["Year"]);
  82.         var xMax = d3.max(data, (d) => d["Year"]);
  83.  
  84.         var parseTime = d3.timeParse("%M:%S");
  85.         var yMin = d3.min(data, (d) => parseTime(d["Time"]));
  86.         var yMax = d3.max(data, (d) => parseTime(d["Time"]));
  87.  
  88.         var xScale = d3
  89.           .scaleLinear()
  90.           .domain([xMin, xMax])
  91.           .range([margin.left + axisOffset, width - margin.right]);
  92.  
  93.         var yScale = d3
  94.           .scaleTime()
  95.           .domain([yMax, yMin])
  96.           .range([height - margin.bottom - axisOffset, margin.top]);
  97.  
  98.         var xAxis = d3.axisBottom().scale(xScale).tickFormat(d3.format("d"));
  99.         var yAxis = d3
  100.           .axisLeft()
  101.           .scale(yScale)
  102.           .tickFormat(d3.timeFormat("%M:%S"));
  103.  
  104.         svg
  105.           .append("g")
  106.           .attr("transform", "translate(0, " + (height - margin.bottom) + ")")
  107.           .attr("id", "x-axis")
  108.           .call(xAxis);
  109.  
  110.         svg
  111.           .append("g")
  112.           .attr("transform", "translate(" + margin.left + ", 0)")
  113.           .attr("id", "y-axis")
  114.           .call(yAxis);
  115.  
  116.         svg
  117.           .selectAll("scatterPoints")
  118.           .data(data)
  119.           .enter()
  120.           .append("circle")
  121.           .attr("cx", (d) => xScale(d["Year"]))
  122.           .attr("cy", (d) => yScale(parseTime(d["Time"])))
  123.           .attr("r", 5)
  124.           .attr("fill", (d) => (d["Doping"] == "" ? colors[0] : colors[1]))
  125.           .attr("class", "dot")
  126.           .attr("data-xvalue", (d) => d["Year"])
  127.           .attr("data-yvalue", (d) => parseTime(d["Time"]))
  128.           .on("mouseover", function (d) {
  129.             info = d["originalTarget"]["__data__"];
  130.             tooltip
  131.               .style("visibility", "visible")
  132.               .style("left", event.pageX + 10 + "px")
  133.               .style("top", event.pageY - 80 + "px")
  134.               .attr("data-year", info["Year"])
  135.               .html(
  136.                 info["Name"] +
  137.                   " (" +
  138.                   info["Year"] +
  139.                   ") <br> Time: " +
  140.                   info["Time"] +
  141.                   "<br><br>" +
  142.                   info["Doping"]
  143.               );
  144.           })
  145.           .on("mousemove", function () {
  146.             tooltip.style("left", event.pageX + 10 + "px");
  147.           })
  148.           .on("mouseout", function () {
  149.             tooltip.style("visibility", "hidden");
  150.           });
  151.  
  152.         svg
  153.           .append("text")
  154.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  155.           .attr("y", height - margin.bottom / 5)
  156.           .attr("class", "label")
  157.           .text("Year");
  158.  
  159.         svg
  160.           .append("text")
  161.           .attr("y", margin.left / 4)
  162.           .attr("x", -height / 2)
  163.           .attr("transform", "rotate(-90)")
  164.           .attr("class", "label")
  165.           .text("Time to finish");
  166.  
  167.         svg
  168.           .append("text")
  169.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  170.           .attr("y", margin.top / 2.6)
  171.           .attr("id", "title")
  172.           .text("Doping in professional bike racing");
  173.  
  174.         svg
  175.           .append("text")
  176.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  177.           .attr("y", margin.top / 1.4)
  178.           .text("35 fastest times to finish Alpe d'Huez")
  179.           .style("font-size", "16px")
  180.           .style("text-anchor", "middle");
  181.  
  182.         svg
  183.           .selectAll("legendSymbols")
  184.           .data(legendKeys)
  185.           .enter()
  186.           .append("circle")
  187.           .attr("cx", width - margin.right - 200)
  188.           .attr("cy", (d, i) => 150 + i * 25)
  189.           .attr("r", 5)
  190.           .attr("fill", (d, i) => colors[i]);
  191.  
  192.         svg
  193.           .selectAll("legendTexts")
  194.           .data(legendKeys)
  195.           .enter()
  196.           .append("text")
  197.           .text((d) => d)
  198.           .attr("x", width - margin.right - 200 + 15)
  199.           .attr("y", (d, i) => 150 + i * 25 + 5)
  200.           .attr("class", "textbox");
  201.  
  202.         const legend = svg
  203.           .append("rect")
  204.           .attr("x", width - margin.right - 200 - 15)
  205.           .attr("y", 150 - 5 - 10)
  206.           .attr("rx", 5)
  207.           .attr("ry", 5)
  208.           .attr("width", 195)
  209.           .attr("height", 55)
  210.           .attr("id", "legend");
  211.  
  212.         // Annotation
  213.         svg
  214.           .selectAll("annotation")
  215.           .data(data.filter((d) => d["Doping"] !== ""))
  216.           .enter()
  217.           .append("line")
  218.           .attr("x1", (d) => xScale(d["Year"]))
  219.           .attr("y1", (d) => yScale(parseTime(d["Time"])))
  220.           .attr("x2", (d) => xScale(d["Year"]) + 20)
  221.           .attr("y2", (d) => yScale(parseTime(d["Time"])) - 20)
  222.           .attr("stroke-width", 1)
  223.           .attr("stroke", "red");
  224.  
  225.         svg
  226.           .selectAll("annotation")
  227.           .data(data.filter((d) => d["Doping"] !== ""))
  228.           .enter()
  229.           .append("text")
  230.           .attr("x", (d) => xScale(d["Year"]) + 25)
  231.           .attr("y", (d) => yScale(parseTime(d["Time"])) - 25)
  232.           .text((d) => d["Name"])
  233.           .attr("class", "annotation");
  234.       });
  235.     </script>
  236.   </body>
  237. </html>
  238.  
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!