API tools faq
paste
Advertisement
NTahmid

Axis_Variables_Box_Plot

NTahmid
Feb 26th, 2024
1,330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.87 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.   var actualData = [
  30.     [
  31.       956, 922, 1320, 1500, 1124, 970, 1120, 1154, 970, 1220, 1100, 980, 1050,
  32.       950, 1000, 1800, 1650,
  33.     ],
  34.     [
  35.       1005, 1075, 1035, 1200, 1125, 980, 1080, 1150, 930, 1185, 1065, 955, 1000,
  36.       920, 980, 1500, 1420,
  37.     ],
  38.     [
  39.       1120, 980, 1035, 1250, 1300, 1400, 1500, 1150, 950, 1000, 1045, 1280,
  40.       1200, 1250, 1380, 1420, 1500,
  41.     ],
  42.   ];
  43.  
  44.   var rectangleColors = ["#8ebad9", "#ffbe86", "#95cf95"];
  45.   var lineColors = ["#1f77b4", "#ff7f0e", "#2ca02c"];
  46.   var legendColors = d3
  47.     .scaleOrdinal()
  48.     .domain(months)
  49.     .range(["#8ebad9", "#ffbe86", "#95cf95"]);
  50.  
  51.   //Title
  52.   svg
  53.     .append("text")
  54.     .attr("x", chartWidth / 2)
  55.     .attr("y", 40 - margin.top / 2)
  56.     .attr("text-anchor", "middle")
  57.     .style("font-size", "16px")
  58.     .style("text-decoration", "underline")
  59.     .text("Monthly Chickenpox Cases in NYC 1931-1971");
  60.  
  61.   var x = d3
  62.     .scaleBand()
  63.     .range([0, chartWidth])
  64.     .domain(months)
  65.     .paddingInner(1)
  66.     .paddingOuter(0.5);
  67.   svg
  68.     .append("g")
  69.     .attr("transform", "translate(40," + height + ")")
  70.     .call(d3.axisBottom(x));
  71.  
  72.   var y = d3.scaleLinear().domain([400, 2000]).range([height, 80]);
  73.   svg
  74.     .append("g")
  75.     .attr("transform", "translate(40," + 0 + ")")
  76.     .call(d3.axisLeft(y));
  77.  
  78.   // Y axis label:
  79.   svg
  80.     .append("text")
  81.     .attr("text-anchor", "middle")
  82.     .attr("transform", "rotate(-90)")
  83.     .attr("y", -margin.left + 20)
  84.     .attr("x", -height / 2 + 20)
  85.     .text("Number of Chickenpox Cases");
  86.  
  87.   var boxes = svg
  88.     .selectAll(".box")
  89.     .data(months)
  90.     .enter()
  91.     .append("g")
  92.     .attr("class", "box")
  93.     .attr("transform", function (d) {
  94.       return "translate(" + (x(d) + 40 - boxWidth / 2) + ",0)";
  95.     });
  96.  
  97.   boxes.each(function (month, i) {
  98.     var data = actualData[i].sort(d3.ascending);
  99.     var q1 = d3.quantile(data, 0.25);
  100.     var median = d3.quantile(data, 0.5);
  101.     var q3 = d3.quantile(data, 0.75);
  102.     var interQuantileRange = q3 - q1;
  103.     var min = q1 - 1.5 * interQuantileRange;
  104.     var max = q3 + 1.5 * interQuantileRange;
  105.  
  106.     d3.select(this)
  107.       .append("line")
  108.       .attr("x1", boxWidth / 2)
  109.       .attr("x2", boxWidth / 2)
  110.       .attr("y1", y(min))
  111.       .attr("y2", y(max))
  112.       .attr("stroke", lineColors[i]);
  113.  
  114.     d3.select(this)
  115.       .append("rect")
  116.       .attr("y", y(q3))
  117.       .attr("height", y(q1) - y(q3))
  118.       .attr("width", boxWidth)
  119.       .attr("stroke", lineColors[i])
  120.       .style("fill", rectangleColors[i]);
  121.  
  122.     d3.select(this)
  123.       .selectAll("toto")
  124.       .data([min, median, max])
  125.       .enter()
  126.       .append("line")
  127.       .attr("x1", 0)
  128.       .attr("x2", boxWidth)
  129.       .attr("y1", function (d) {
  130.         return y(d);
  131.       })
  132.       .attr("y2", function (d) {
  133.         return y(d);
  134.       })
  135.       .attr("stroke", lineColors[i]);
  136.  
  137.     var filteredData = data.filter(function (d) {
  138.       return d > max || d < min;
  139.    });
  140.  
  141.    d3.select(this)
  142.      .selectAll("circle")
  143.      .data(filteredData)
  144.      .enter()
  145.      .append("circle")
  146.      .attr("cx", function (d) {
  147.        return boxWidth / 2;
  148.      })
  149.      .attr("cy", function (d) {
  150.        return y(d);
  151.      })
  152.      .attr("r", 4)
  153.      .style("fill", rectangleColors[i])
  154.      .attr("stroke", lineColors[i]);
  155.  });
  156.  
  157.  // Legend
  158.  var size = 20;
  159.  svg
  160.    .selectAll(".mydots")
  161.    .data(months)
  162.    .enter()
  163.    .append("rect")
  164.    .attr("class", "mydots")
  165.    .attr("x", 800)
  166.    .attr("y", function (d, i) {
  167.      return 100 + i * (size + 5);
  168.    })
  169.    .attr("width", size)
  170.    .attr("height", size)
  171.    .style("fill", function (d) {
  172.      return legendColors(d);
  173.    });
  174.  
  175.  svg
  176.    .selectAll(".mylabels")
  177.    .data(months)
  178.    .enter()
  179.    .append("text")
  180.    .attr("class", "mylabels")
  181.    .attr("x", 800 + size * 1.2)
  182.    .attr("y", function (d, i) {
  183.      return 100 + i * (size + 5) + size / 2;
  184.    })
  185.    .style("fill", function (d) {
  186.      return legendColors(d);
  187.    })
  188.    .text(function (d) {
  189.      return d;
  190.    })
  191.    .attr("text-anchor", "left")
  192.    .style("alignment-baseline", "middle");
  193.  
  194.  // Annotations for Axis and Variables
  195.  svg.append("circle")
  196.    .attr("cx", 40)
  197.    .attr("cy", height + 30)
  198.    .attr("r", 20)
  199.    .style("fill", "none")
  200.    .style("stroke", "#C86984");
  201.  
  202.  svg.append("text")
  203.    .attr("x", 40)
  204.    .attr("y", height + 35)
  205.    .attr("text-anchor", "middle")
  206.    .style("font-size", "12px")
  207.    .style("fill", "#C86984")
  208.    .text("X Axis: Months");
  209.  
  210.  svg.append("circle")
  211.    .attr("cx", 0)
  212.    .attr("cy", height / 2)
  213.    .attr("r", 20)
  214.    .attr("transform", "rotate(-90," + 0 + "," + height / 2 + ")")
  215.    .style("fill", "none")
  216.    .style("stroke", "#C86984");
  217.  
  218.  svg.append("text")
  219.    .attr("x", -height / 2)
  220.    .attr("y", -35)
  221.    .attr("text-anchor", "middle")
  222.    .style("font-size", "12px")
  223.    .style("fill", "#C86984")
  224.    .text("Y Axis: Chickenpox Cases");
  225. </script>
  226. ```
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!