Advertisement
NTahmid

central_tendency_box_plot

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