Advertisement
NTahmid

descriptive_stats_box_plot_v2

Feb 26th, 2024
1,832
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.84 KB | None | 0 0
  1. Here is the modified HTML code with annotations added as per the requirements:
  2.  
  3. ```html
  4. <!DOCTYPE html>
  5. <meta charset="utf-8" />
  6.  
  7. <!-- Load d3.js -->
  8. <script src="https://d3js.org/d3.v4.js"></script>
  9. <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
  10. <!-- Create a div where the graph will take place -->
  11. <div id="my_dataviz"></div>
  12.  
  13. <script>
  14.   // set the dimensions and margins of the graph
  15.   var margin = { top: 10, right: 30, bottom: 30, left: 40 },
  16.     width = 960 - margin.left - margin.right,
  17.     height = 600 - margin.top - margin.bottom;
  18.   var chartWidth = 700;
  19.   var boxWidth = 100;
  20.  
  21.   // append the svg object to the body of the page
  22.   var svg = d3
  23.     .select("#my_dataviz")
  24.     .append("svg")
  25.     .attr("width", width + margin.left + margin.right)
  26.     .attr("height", height + margin.top + margin.bottom)
  27.     .append("g")
  28.     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  29.  
  30.   var months = ["Jan", "Apr", "Jul"];
  31.  
  32.   // Actual data for chickenpox cases - Data for January, April, and July with added data points and outliers
  33.   //These data are used to render the box plot
  34.   var actualData = [
  35.     [
  36.       956, 922, 1320, 1500, 1124, 970, 1120, 1154, 970, 1220, 1100, 980, 1050,
  37.       950, 1000, 1800, 1650,
  38.     ], // Data for January
  39.     [
  40.       1005, 1075, 1035, 1200, 1125, 980, 1080, 1150, 930, 1185, 1065, 955, 1000,
  41.       920, 980, 1500, 1420,
  42.     ], // Data for April
  43.     [
  44.       1120, 980, 1035, 1250, 1300, 1400, 1500, 1150, 950, 1000, 1045, 1280,
  45.       1200, 1250, 1380, 1420, 1500,
  46.     ], // Data for July
  47.   ];
  48.  
  49.   var rectangleColors = ["#8ebad9", "#ffbe86", "#95cf95"];
  50.   var lineColors = ["#1f77b4", "#ff7f0e", "#2ca02c"];
  51.  
  52.   //blue, tan, red colors
  53.   var legendColors = d3
  54.     .scaleOrdinal()
  55.     .domain(months)
  56.     .range(["#8ebad9", "#ffbe86", "#95cf95"]);
  57.  
  58.   //Title
  59.   svg
  60.     .append("text")
  61.     .attr("x", chartWidth / 2)
  62.     .attr("y", 40 - margin.top / 2)
  63.     .attr("text-anchor", "middle")
  64.     .style("font-size", "16px")
  65.     .style("text-decoration", "underline")
  66.     .text("Monthly Chickenpox Cases in NYC 1931-1971");
  67.  
  68.   // Show the X scale
  69.   var x = d3
  70.     .scaleBand()
  71.     .range([0, chartWidth])
  72.     .domain(months)
  73.     .paddingInner(1)
  74.     .paddingOuter(0.5);
  75.   svg
  76.     .append("g")
  77.     .attr("transform", "translate(40," + height + ")")
  78.     .call(d3.axisBottom(x));
  79.  
  80.   // Show the Y scale
  81.   var y = d3.scaleLinear().domain([400, 2000]).range([height, 80]);
  82.   svg
  83.     .append("g")
  84.     .attr("transform", "translate(40," + 0 + ")")
  85.     .call(d3.axisLeft(y));
  86.  
  87.   // Y axis label:
  88.   svg
  89.     .append("text")
  90.     .attr("text-anchor", "middle")
  91.     .attr("transform", "rotate(-90)")
  92.     .attr("y", -margin.left + 20)
  93.     .attr("x", -height / 2 + 20)
  94.     .text("Number of Chickenpox Cases");
  95.  
  96.   // Loop through the data and draw the boxplots
  97.   var boxes = svg
  98.     .selectAll(".box")
  99.     .data(months)
  100.     .enter()
  101.     .append("g")
  102.     .attr("class", "box")
  103.     .attr("transform", function (d) {
  104.       return "translate(" + (x(d) + 40 - boxWidth / 2) + ",0)";
  105.     });
  106.  
  107.   boxes.each(function (month, i) {
  108.     var data = actualData[i].sort(d3.ascending);
  109.     var q1 = d3.quantile(data, 0.25);
  110.     var median = d3.quantile(data, 0.5);
  111.     var q3 = d3.quantile(data, 0.75);
  112.     var interQuantileRange = q3 - q1;
  113.     var min = q1 - 1.5 * interQuantileRange;
  114.     var max = q3 + 1.5 * interQuantileRange;
  115.  
  116.     // Show the main vertical line
  117.     d3.select(this)
  118.       .append("line")
  119.       .attr("x1", boxWidth / 2)
  120.       .attr("x2", boxWidth / 2)
  121.       .attr("y1", y(min))
  122.       .attr("y2", y(max))
  123.       .attr("stroke", lineColors[i]);
  124.  
  125.     // Show the box
  126.     d3.select(this)
  127.       .append("rect")
  128.       .attr("y", y(q3))
  129.       .attr("height", y(q1) - y(q3))
  130.       .attr("width", boxWidth)
  131.       .attr("stroke", lineColors[i])
  132.       .style("fill", rectangleColors[i]);
  133.  
  134.     // show median, min and max horizontal lines
  135.     d3.select(this)
  136.       .selectAll("toto")
  137.       .data([min, median, max])
  138.       .enter()
  139.       .append("line")
  140.       .attr("x1", 0)
  141.       .attr("x2", boxWidth)
  142.       .attr("y1", function (d) {
  143.         return y(d);
  144.       })
  145.       .attr("y2", function (d) {
  146.         return y(d);
  147.       })
  148.       .attr("stroke", lineColors[i]);
  149.  
  150.     var filteredData = data.filter(function (d) {
  151.       return d > max || d < min;
  152.    });
  153.  
  154.    d3.select(this)
  155.      .selectAll("circle")
  156.      .data(filteredData)
  157.      .enter()
  158.      .append("circle")
  159.      .attr("cx", function (d) {
  160.        return boxWidth / 2;
  161.      })
  162.      .attr("cy", function (d) {
  163.        return y(d);
  164.      })
  165.      .attr("r", 4)
  166.      .style("fill", rectangleColors[i])
  167.      .attr("stroke", lineColors[i]);
  168.  });
  169.  
  170.  // Legend
  171.  var size = 20;
  172.  svg
  173.    .selectAll(".mydots")
  174.    .data(months)
  175.    .enter()
  176.    .append("rect")
  177.    .attr("class", "mydots")
  178.    .attr("x", 800)
  179.    .attr("y", function (d, i) {
  180.      return 100 + i * (size + 5);
  181.    })
  182.    .attr("width", size)
  183.    .attr("height", size)
  184.    .style("fill", function (d) {
  185.      return legendColors(d);
  186.    });
  187.  
  188.  svg
  189.    .selectAll(".mylabels")
  190.    .data(months)
  191.    .enter()
  192.    .append("text")
  193.    .attr("class", "mylabels")
  194.    .attr("x", 800 + size * 1.2)
  195.    .attr("y", function (d, i) {
  196.      return 100 + i * (size + 5) + size / 2;
  197.    })
  198.    .style("fill", function (d) {
  199.      return legendColors(d);
  200.    })
  201.    .text(function (d) {
  202.      return d;
  203.    })
  204.    .attr("text-anchor", "left")
  205.    .style("alignment-baseline", "middle");
  206.  
  207.  // Annotations
  208.  const annotations = [
  209.    {
  210.      note: { label: "Median" },
  211.      x: x("Jan") + 40, y: y(d3.quantile(actualData[0], 0.5)),
  212.      dy: -20, dx: 0,
  213.      color: "#C86984"
  214.    },
  215.    {
  216.      note: { label: "IQR" },
  217.      x: x("Apr") + 40, y: y(d3.quantile(actualData[1], 0.75)),
  218.      dy: y(d3.quantile(actualData[1], 0.25)) - y(d3.quantile(actualData[1], 0.75)), dx: 0,
  219.      color: "#C86984"
  220.    },
  221.    {
  222.      note: { label: "Min-Max" },
  223.      x: x("Jul") + 40, y: y(Math.min(...actualData[2])),
  224.      dy: y(Math.max(...actualData[2])) - y(Math.min(...actualData[2])), dx: 0,
  225.      color: "#C86984"
  226.    },
  227.    {
  228.      note: { label: "Outliers" },
  229.      x: x("Jan") + 40, y: y(Math.max(...actualData[0])),
  230.      dy: 20, dx: 20,
  231.      color: "#C86984"
  232.    }
  233.  ];
  234.  
  235.  const makeAnnotations = d3.annotation()
  236.    .annotations(annotations)
  237.    .type(d3.annotationLabel)
  238.    .accessors({
  239.      x: d => d.x,
  240.       y: d => d.y
  241.     })
  242.     .accessorsInverse({
  243.       x: d => d.x,
  244.       y: d => d.y
  245.     })
  246.     .textWrap(30);
  247.  
  248.   svg.append("g")
  249.     .call(makeAnnotations);
  250. </script>
  251. ```
  252.  
  253. This modified code includes annotations based on the descriptive statistics explanation, focusing on median, IQR, min-max, and outliers, with annotations color-coded as specified.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement