API tools faq
paste
Advertisement
NTahmid

central_tendency_box_plot_v2

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