API tools faq
paste
Advertisement
NTahmid

pointwise_comparison_scatter

NTahmid
Feb 13th, 2024
1,062
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.38 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.     .highlighted {
  47.       stroke: red;
  48.       stroke-width: 2;
  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", (d) => {
  126.             if (
  127.               (d["Name"] == "Marco Pantani" && d["Year"] == 1995) ||
  128.              (d["Name"] == "Lance Armstrong" && d["Year"] == 2004) ||
  129.              (d["Name"] == "Floyd Landis" && d["Year"] == 2006) ||
  130.              (d["Name"] == "Carlos Sastre" && d["Year"] == 2006)
  131.            ) {
  132.              return "dot highlighted";
  133.             } else {
  134.               return "dot";
  135.             }
  136.           })
  137.           .attr("data-xvalue", (d) => d["Year"])
  138.           .attr("data-yvalue", (d) => parseTime(d["Time"]))
  139.           .on("mouseover", function (d) {
  140.             info = d["originalTarget"]["__data__"];
  141.             tooltip
  142.               .style("visibility", "visible")
  143.               .style("left", event.pageX + 10 + "px")
  144.               .style("top", event.pageY - 80 + "px")
  145.               .attr("data-year", info["Year"])
  146.               .html(
  147.                 info["Name"] +
  148.                   " (" +
  149.                   info["Year"] +
  150.                   ") <br> Time: " +
  151.                   info["Time"] +
  152.                   "<br><br>" +
  153.                   info["Doping"]
  154.               );
  155.           })
  156.           .on("mousemove", function () {
  157.             tooltip.style("left", event.pageX + 10 + "px");
  158.           })
  159.           .on("mouseout", function () {
  160.             tooltip.style("visibility", "hidden");
  161.           });
  162.  
  163.         svg
  164.           .append("text")
  165.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  166.           .attr("y", height - margin.bottom / 5)
  167.           .attr("class", "label")
  168.           .text("Year");
  169.  
  170.         svg
  171.           .append("text")
  172.           .attr("y", margin.left / 4)
  173.           .attr("x", -height / 2)
  174.           .attr("transform", "rotate(-90)")
  175.           .attr("class", "label")
  176.           .text("Time to finish");
  177.  
  178.         svg
  179.           .append("text")
  180.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  181.           .attr("y", margin.top / 2.6)
  182.           .attr("id", "title")
  183.           .text("Doping in professional bike racing");
  184.  
  185.         svg
  186.           .append("text")
  187.           .attr("x", margin.left + (width - margin.left - margin.right) / 2)
  188.           .attr("y", margin.top / 1.4)
  189.           .text("35 fastest times to finish Alpe d'Huez")
  190.           .style("font-size", "16px")
  191.           .style("text-anchor", "middle");
  192.  
  193.         svg
  194.           .selectAll("legendSymbols")
  195.           .data(legendKeys)
  196.           .enter()
  197.           .append("circle")
  198.           .attr("cx", width - margin.right - 200)
  199.           .attr("cy", (d, i) => 150 + i * 25)
  200.           .attr("r", 5)
  201.           .attr("fill", (d, i) => colors[i]);
  202.  
  203.         svg
  204.           .selectAll("legendTexts")
  205.           .data(legendKeys)
  206.           .enter()
  207.           .append("text")
  208.           .text((d) => d)
  209.           .attr("x", width - margin.right - 200 + 15)
  210.           .attr("y", (d, i) => 150 + i * 25 + 5)
  211.           .attr("class", "textbox");
  212.  
  213.         const legend = svg
  214.           .append("rect")
  215.           .attr("x", width - margin.right - 200 - 15)
  216.           .attr("y", 150 - 5 - 10)
  217.           .attr("rx", 5)
  218.           .attr("ry", 5)
  219.           .attr("width", 195)
  220.           .attr("height", 55)
  221.           .attr("id", "legend");
  222.       });
  223.     </script>
  224.   </body>
  225. </html>
  226.  
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!