API tools faq
paste
Advertisement
NTahmid

box_skewness

NTahmid
Mar 22nd, 2024
1,547
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3.  
  4. <!-- Load d3.js -->
  5. <script src="https://d3js.org/d3.v4.js"></script>
  6. <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
  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.   var legendColors = d3
  49.     .scaleOrdinal()
  50.     .domain(months)
  51.     .range(["#8ebad9", "#ffbe86", "#95cf95"]);
  52.  
  53.   //Title
  54.   svg
  55.     .append("text")
  56.     .attr("x", chartWidth / 2)
  57.     .attr("y", 40 - margin.top / 2)
  58.     .attr("text-anchor", "middle")
  59.     .style("font-size", "16px")
  60.     .style("text-decoration", "underline")
  61.     .text("Monthly Chickenpox Cases in NYC 1931-1971");
  62.  
  63.   // Show the X scale
  64.   var x = d3
  65.     .scaleBand()
  66.     .range([0, chartWidth])
  67.     .domain(months)
  68.     .paddingInner(1)
  69.     .paddingOuter(0.5);
  70.   svg
  71.     .append("g")
  72.     .attr("transform", "translate(40," + height + ")")
  73.     .call(d3.axisBottom(x));
  74.  
  75.   // Show the Y scale
  76.   var y = d3.scaleLinear().domain([400, 2000]).range([height, 80]);
  77.   svg
  78.     .append("g")
  79.     .attr("transform", "translate(40," + 0 + ")")
  80.     .call(d3.axisLeft(y));
  81.  
  82.   // Y axis label:
  83.   svg
  84.     .append("text")
  85.     .attr("text-anchor", "middle")
  86.     .attr("transform", "rotate(-90)")
  87.     .attr("y", -margin.left + 20)
  88.     .attr("x", -height / 2 + 20)
  89.     .text("Number of Chickenpox Cases");
  90.  
  91.   // Loop through the data and draw the boxplots
  92.   var boxes = svg
  93.     .selectAll(".box")
  94.     .data(months)
  95.     .enter()
  96.     .append("g")
  97.     .attr("class", "box")
  98.     .attr("transform", function (d) {
  99.       return "translate(" + (x(d) + 40 - boxWidth / 2) + ",0)";
  100.     });
  101.  
  102.   boxes.each(function (month, i) {
  103.     var data = actualData[i].sort(d3.ascending);
  104.     var q1 = d3.quantile(data, 0.25);
  105.     var median = d3.quantile(data, 0.5);
  106.     var q3 = d3.quantile(data, 0.75);
  107.     var interQuantileRange = q3 - q1;
  108.     var min = q1 - 1.5 * interQuantileRange;
  109.     var max = q3 + 1.5 * interQuantileRange;
  110.  
  111.     // Show the main vertical line
  112.     d3.select(this)
  113.       .append("line")
  114.       .attr("x1", boxWidth / 2)
  115.       .attr("x2", boxWidth / 2)
  116.       .attr("y1", y(min))
  117.       .attr("y2", y(max))
  118.       .attr("stroke", lineColors[i]);
  119.  
  120.     // Show the box
  121.     d3.select(this)
  122.       .append("rect")
  123.       .attr("y", y(q3))
  124.       .attr("height", y(q1) - y(q3))
  125.       .attr("width", boxWidth)
  126.       .attr("stroke", lineColors[i])
  127.       .style("fill", rectangleColors[i]);
  128.  
  129.     // show median, min and max horizontal lines
  130.     d3.select(this)
  131.       .selectAll("toto")
  132.       .data([min, median, max])
  133.       .enter()
  134.       .append("line")
  135.       .attr("x1", 0)
  136.       .attr("x2", boxWidth)
  137.       .attr("y1", function (d) {
  138.         return y(d);
  139.       })
  140.       .attr("y2", function (d) {
  141.         return y(d);
  142.       })
  143.       .attr("stroke", lineColors[i]);
  144.  
  145.     var filteredData = data.filter(function (d) {
  146.       return d > max || d < min;
  147.    });
  148.  
  149.    d3.select(this)
  150.      .selectAll("circle")
  151.      .data(filteredData)
  152.      .enter()
  153.      .append("circle")
  154.      .attr("cx", function (d) {
  155.        return boxWidth / 2;
  156.      })
  157.      .attr("cy", function (d) {
  158.        return y(d);
  159.      })
  160.      .attr("r", 4)
  161.      .style("fill", "none")
  162.      .attr("stroke", "#c86984");
  163.  
  164.    // Annotations for skewness
  165.    const annotations = [
  166.      {
  167.        note: {
  168.          label: "Longer tail towards higher values indicates positive skewness",
  169.          title: "Skewness"
  170.        },
  171.        x: x("Jan") + 40,
  172.        y: y(1500),
  173.        dy: -100,
  174.        dx: 0,
  175.        color: "#c86984"
  176.      },
  177.      {
  178.        note: {
  179.          label: "Few unusually high values (outliers)",
  180.          title: "Outliers"
  181.        },
  182.        x: x("Jan") + 40,
  183.        y: y(1650),
  184.        dy: -30,
  185.        dx: 40,
  186.        color: "#c86984"
  187.      }
  188.    ];
  189.  
  190.    const makeAnnotations = d3.annotation()
  191.      .annotations(annotations)
  192.      .type(d3.annotationCalloutElbow)
  193.      .accessors({
  194.        x: d => d.x,
  195.         y: d => d.y
  196.       });
  197.  
  198.     svg.append("g")
  199.       .call(makeAnnotations);
  200.   });
  201.  
  202.   // Legend
  203.   var size = 20;
  204.   svg
  205.     .selectAll(".mydots")
  206.     .data(months)
  207.     .enter()
  208.     .append("rect")
  209.     .attr("class", "mydots")
  210.     .attr("x", 800)
  211.     .attr("y", function (d, i) {
  212.       return 100 + i * (size + 5);
  213.     })
  214.     .attr("width", size)
  215.     .attr("height", size)
  216.     .style("fill", function (d) {
  217.       return legendColors(d);
  218.     });
  219.  
  220.   svg
  221.     .selectAll(".mylabels")
  222.     .data(months)
  223.     .enter()
  224.     .append("text")
  225.     .attr("class", "mylabels")
  226.     .attr("x", 800 + size * 1.2)
  227.     .attr("y", function (d, i) {
  228.       return 100 + i * (size + 5) + size / 2;
  229.     })
  230.     .style("fill", function (d) {
  231.       return legendColors(d);
  232.     })
  233.     .text(function (d) {
  234.       return d;
  235.     })
  236.     .attr("text-anchor", "left")
  237.     .style("alignment-baseline", "middle");
  238. </script>
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!