API tools faq
paste
Advertisement
NTahmid

title_box_plot_v2

NTahmid
Feb 26th, 2024
5,013
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.26 KB | None | 0 0
raw download clone embed print report
  1. Here is the modified code with the annotation strategy applied to the title:
  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.   var title = 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.   // Annotation for the title
  69.   var titleAnnotation = svg
  70.     .append("rect")
  71.     .attr("x", chartWidth / 2 - title.node().getComputedTextLength() / 2 - 10)
  72.     .attr("y", 40 - margin.top / 2 - 20)
  73.     .attr("width", title.node().getComputedTextLength() + 20)
  74.     .attr("height", 30)
  75.     .style("stroke", "#c86984")
  76.     .style("fill", "none");
  77.  
  78.   // Show the X scale
  79.   var x = d3
  80.     .scaleBand()
  81.     .range([0, chartWidth])
  82.     .domain(months)
  83.     .paddingInner(1)
  84.     .paddingOuter(0.5);
  85.   svg
  86.     .append("g")
  87.     .attr("transform", "translate(40," + height + ")")
  88.     .call(d3.axisBottom(x));
  89.  
  90.   // Show the Y scale
  91.   var y = d3.scaleLinear().domain([400, 2000]).range([height, 80]);
  92.   svg
  93.     .append("g")
  94.     .attr("transform", "translate(40," + 0 + ")")
  95.     .call(d3.axisLeft(y));
  96.  
  97.   // Y axis label:
  98.   svg
  99.     .append("text")
  100.     .attr("text-anchor", "middle")
  101.     .attr("transform", "rotate(-90)")
  102.     .attr("y", -margin.left + 20)
  103.     .attr("x", -height / 2 + 20)
  104.     .text("Number of Chickenpox Cases");
  105.  
  106.   // Loop through the data and draw the boxplots
  107.   var boxes = svg
  108.     .selectAll(".box")
  109.     .data(months)
  110.     .enter()
  111.     .append("g")
  112.     .attr("class", "box")
  113.     .attr("transform", function (d) {
  114.       return "translate(" + (x(d) + 40 - boxWidth / 2) + ",0)";
  115.     });
  116.  
  117.   boxes.each(function (month, i) {
  118.     var data = actualData[i].sort(d3.ascending);
  119.     var q1 = d3.quantile(data, 0.25);
  120.     var median = d3.quantile(data, 0.5);
  121.     var q3 = d3.quantile(data, 0.75);
  122.     var interQuantileRange = q3 - q1;
  123.     var min = q1 - 1.5 * interQuantileRange;
  124.     var max = q3 + 1.5 * interQuantileRange;
  125.  
  126.     console.log(min);
  127.     console.log(max);
  128.  
  129.     // Show the main vertical line
  130.     d3.select(this)
  131.       .append("line")
  132.       .attr("x1", boxWidth / 2)
  133.       .attr("x2", boxWidth / 2)
  134.       .attr("y1", y(min))
  135.       .attr("y2", y(max))
  136.       .attr("stroke", lineColors[i]);
  137.  
  138.     // Show the box
  139.     d3.select(this)
  140.       .append("rect")
  141.       .attr("y", y(q3))
  142.       .attr("height", y(q1) - y(q3))
  143.       .attr("width", boxWidth)
  144.       .attr("stroke", lineColors[i])
  145.       .style("fill", rectangleColors[i]);
  146.  
  147.     // show median, min and max horizontal lines
  148.     d3.select(this)
  149.       .selectAll("toto")
  150.       .data([min, median, max])
  151.       .enter()
  152.       .append("line")
  153.       .attr("x1", 0)
  154.       .attr("x2", boxWidth)
  155.       .attr("y1", function (d) {
  156.         return y(d);
  157.       })
  158.       .attr("y2", function (d) {
  159.         return y(d);
  160.       })
  161.       .attr("stroke", lineColors[i]);
  162.  
  163.     var filteredData = data.filter(function (d) {
  164.       return d > max || d < min;
  165.    });
  166.  
  167.    d3.select(this)
  168.      .selectAll("circle")
  169.      .data(filteredData)
  170.      .enter()
  171.      .append("circle")
  172.      .attr("cx", function (d) {
  173.        return boxWidth / 2;
  174.      })
  175.      .attr("cy", function (d) {
  176.        return y(d);
  177.      })
  178.      .attr("r", 4)
  179.      .style("fill", rectangleColors[i])
  180.      .attr("stroke", lineColors[i]);
  181.  });
  182.  
  183.  // Legend
  184.  var size = 20;
  185.  svg
  186.    .selectAll(".mydots")
  187.    .data(months)
  188.    .enter()
  189.    .append("rect")
  190.    .attr("class", "mydots")
  191.    .attr("x", 800)
  192.    .attr("y", function (d, i) {
  193.      return 100 + i * (size + 5);
  194.    })
  195.    .attr("width", size)
  196.    .attr("height", size)
  197.    .style("fill", function (d) {
  198.      return legendColors(d);
  199.    });
  200.  
  201.  svg
  202.    .selectAll(".mylabels")
  203.    .data(months)
  204.    .enter()
  205.    .append("text")
  206.    .attr("class", "mylabels")
  207.    .attr("x", 800 + size * 1.2)
  208.    .attr("y", function (d, i) {
  209.      return 100 + i * (size + 5) + size / 2;
  210.    })
  211.    .style("fill", function (d) {
  212.      return legendColors(d);
  213.    })
  214.    .text(function (d) {
  215.      return d;
  216.    })
  217.    .attr("text-anchor", "left")
  218.    .style("alignment-baseline", "middle");
  219. </script>
  220. ```
  221.  
  222. In this code, I have added a rectangle around the title to highlight it. The rectangle is created using the `append("rect")` method and its position and size are calculated based on the position and size of the title text. The color of the rectangle is set to `#c86984` as per the requirements.
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!