Advertisement
NTahmid

extrema_v3_bar

Feb 21st, 2024
694
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.31 KB | None | 0 0
  1. ```<!DOCTYPE html>
  2. <meta charset="utf-8">
  3.  
  4. <style>
  5. .axis line{
  6.       visibility:hidden;
  7.     }
  8.  
  9. .axis .domain {
  10.   display: none;
  11. }
  12.  
  13. .axis {
  14.       font: 13px sans-serif;
  15.     }
  16.  
  17.   .yUnits {
  18.     font: 14px sans-serif;
  19.   }
  20.  
  21.   .caption {
  22.     font: 12px sans-serif;
  23.   }
  24.  
  25. .chartDisplayTitle{
  26.   fill:#354B5F;
  27.   font-weight: bold;
  28.   font: 20px sans-serif;
  29. }
  30.  
  31. .annotation-line {
  32.   stroke: #c86984;
  33.   stroke-width: 2px;
  34. }
  35.  
  36. .annotation-circle {
  37.   fill: none;
  38.   stroke: #c86984;
  39.   stroke-width: 2px;
  40. }
  41.  
  42. .annotation-text {
  43.   fill: #c86984;
  44.   font-size: 14px;
  45.   font-weight: bold;
  46. }
  47.  
  48. .annotation-rect {
  49.   fill: none;
  50.   stroke: #c86984;
  51.   stroke-width: 2px;
  52. }
  53. </style>
  54.  
  55. <svg class="chart" width="960" height="590" aria-labelledby="graph-title" aria-describedby="graph-desc">
  56.     <title>GDP Growth Remains Broad Based</title>
  57.     <desc id="graph-desc">GDP Growth Remains Broad Based, with values for 2017 quarters 1-3.</desc>
  58.     <text transform="translate(10, 20)" class="chartDisplayTitle">Chart1</text>
  59.     <text id="graph-title" transform="translate(10, 45)" class="chartDisplayTitle">GDP Growth Remains Broad Based</text>
  60.     <text transform="translate(10, 70)" class="yUnits">Percentage points*</text>
  61.     <text transform="translate(10, 570)" class="caption">*Contribution to total gross domestic product (GDP) growth; seasonally adjusted annualized rate.</text>
  62.     <text transform="translate(10, 585)" class="caption">SOURCE: Bureau of Economic Analysis.</text>
  63. </svg>
  64. <script src="https://d3js.org/d3.v4.min.js"></script>
  65. <script>
  66.  
  67. const regression = d3.regressionLinear()
  68.   .x(d => d.x)
  69.   .y(d => d.y)
  70.   .domain([0, 100]);
  71.  
  72. </script>
  73. <script>
  74.  
  75. var econ2 = [
  76.   {
  77.     "Category": "GDP",
  78.     "2017 Q1": 1.2,
  79.     "2017 Q2": 3.1,
  80.     "2017 Q3 First Estimate": 3.0
  81.   },
  82.   {
  83.     "Category": "Consumption",
  84.     "2017 Q1": 1.3,
  85.     "2017 Q2": 2.2,
  86.     "2017 Q3 First Estimate": 1.6
  87.  
  88.   },
  89.   {
  90.     "Category": "Nonresidential investment",
  91.     "2017 Q1": 0.9,
  92.     "2017 Q2": 0.8,
  93.     "2017 Q3 First Estimate": 0.5
  94.  
  95.   },
  96.   {
  97.     "Category": "Residential investment",
  98.     "2017 Q1": 0.4,
  99.     "2017 Q2": -0.3,
  100.     "2017 Q3 First Estimate": -0.2
  101.   },
  102.   {
  103.     "Category": "Inventories",
  104.     "2017 Q1": -1.5,
  105.     "2017 Q2": 0.1,
  106.     "2017 Q3 First Estimate": 0.7
  107.  
  108.   },
  109.   {
  110.     "Category": "Net exports",
  111.     "2017 Q1": 0.2,
  112.     "2017 Q2": 0.2,
  113.     "2017 Q3 First Estimate": 0.4
  114.  
  115.   },
  116.   {
  117.     "Category": "Government",
  118.     "2017 Q1": -0.1,
  119.     "2017 Q2": 0.0,
  120.     "2017 Q3 First Estimate": 0.0
  121.  
  122.   }
  123. ]
  124.  
  125. var svg = d3.select("svg"),
  126.     margin = {top: 80, right: 10, bottom: 80, left: 25},
  127.     width = svg.attr("width") - margin.left - margin.right,
  128.     height = svg.attr("height") - margin.top - margin.bottom,
  129.     g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  130.  
  131. var y = d3.scaleLinear()
  132.       .domain([-2, 4])
  133.       .range([height, 0]);
  134.  
  135. var x0 = d3.scaleBand()  
  136.       .rangeRound([0, width])
  137.       .paddingInner(0.1)
  138.       .paddingOuter(0.1);
  139.  
  140. var x1 = d3.scaleBand()  
  141.     .paddingOuter(0.25)
  142.     .paddingInner(0.15);
  143.  
  144. var z = d3.scaleOrdinal()
  145.         .range(["#BC151E", "#D3B178", "#354B5F"]);
  146.  
  147. const yAxis = d3.axisLeft(y).ticks(7);
  148.  
  149. var subCategories = Object.keys(econ2[0]).slice(1);
  150.  
  151. x0.domain(econ2.map( d =>  d.Category ));
  152.  
  153. x1.domain(subCategories).rangeRound([0, x0.bandwidth()])
  154.  
  155.   var selection = g.selectAll("g")
  156.     .data(econ2)
  157.     .enter().append("g")
  158.       .attr("transform", d => "translate(" + x0(d.Category) + ",0)" )
  159.     selection.selectAll("rect")
  160.      .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  161.       .enter().append("rect")
  162.       .attr("x", d => x1(d.key) )
  163.       .attr("y", d => (d.value<0 ? y(0) : y(d.value)) )
  164.      .attr("width", x1.bandwidth())
  165.      .attr("height", d => Math.abs(y(d.value) - y(0)) )
  166.       .attr("fill", d => z(d.key) )
  167.     selection.selectAll("text")
  168.        .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  169.         .enter().append("text")
  170.         .attr("x", d => x1(d.key) )
  171.         .attr("y", d => d.value<=0 ? y(0) - (y(4) - (Math.abs(y(d.value) - y(0)) + 20)) : y(d.value) - 10)
  172.        .style('fill', d => z(d.key))
  173.         .style('font-size', '1.25em')
  174.         .text(d => Number.parseFloat(d.value).toFixed(1))
  175.  
  176. g.append("g")
  177.     .attr("class", "axis")
  178.     .attr("transform", "translate(0," + height + ")")
  179.     .call(d3.axisBottom(x0))
  180.     .selectAll(".tick text")
  181.     .call(wrap, x0.bandwidth());
  182.  
  183. g.append('g')
  184. .call(yAxis)
  185.  
  186. g.append("line")
  187.     .attr("y1", y(0))
  188.     .attr("y2", y(0))
  189.     .attr("x1", 0)
  190.     .attr("x2", width)
  191.     .attr("stroke", "black");
  192.  
  193. var legend = g.append("g")
  194.       .attr("font-family", "sans-serif")
  195.       .attr("font-size", 13)
  196.       .attr("text-anchor", "end")
  197.     .selectAll("g")
  198.     .data(subCategories)
  199.     .enter().append("g")
  200.       .attr("transform", function(d, i) { return "translate(0," + i * 24 + ")"; });
  201.   legend.append("rect")
  202.       .attr("x", width - 142)
  203.       .attr("width", 8)
  204.       .attr("height", 8)
  205.       .attr("fill", z);
  206.   legend.append("text")
  207.           .attr("x", d => d.length > 7 ? (width + 5) : (width - 80))
  208.           .attr("y", 5.5)
  209.           .attr("dy", "0.22em")
  210.           .text(d => (d));
  211.  
  212.   function wrap(text, width) {
  213.             text.each(function() {
  214.               var text = d3.select(this),
  215.                   words = text.text().split(/\s+/).reverse(),
  216.                   word,
  217.                   line = [],
  218.                   lineNumber = 0,
  219.                   lineHeight = 1.1,
  220.                   y = text.attr("y"),
  221.                   dy = parseFloat(text.attr("dy")),
  222.                   tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
  223.               while (word = words.pop()) {
  224.                 line.push(word);
  225.                 tspan.text(line.join(" "));
  226.                 if (tspan.node().getComputedTextLength() > width) {
  227.                   line.pop();
  228.                   tspan.text(line.join(" "));
  229.                   line = [word];
  230.                   tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
  231.                 }
  232.               }
  233.             });
  234.           }
  235.  
  236. // Annotations
  237. g.append("line")
  238.   .attr("x1", x0("GDP") + x1("2017 Q1"))
  239.   .attr("y1", y(1.2))
  240.   .attr("x2", x0("GDP") + x1("2017 Q2"))
  241.   .attr("y2", y(3.1))
  242.   .attr("class", "annotation-line");
  243.  
  244. g.append("text")
  245.   .attr("x", x0("GDP") + x1("2017 Q2") / 2)
  246.   .attr("y", y(2.2))
  247.   .attr("class", "annotation-text")
  248.   .text("GDP growth from Q1 to Q2");
  249.  
  250. g.append("circle")
  251.   .attr("cx", x0("Consumption") + x1("2017 Q1"))
  252.   .attr("cy", y(1.3))
  253.   .attr("r", 20)
  254.   .attr("class", "annotation-circle");
  255.  
  256. g.append("text")
  257.   .attr("x", x0("Consumption") + x1("2017 Q1") - 10)
  258.   .attr("y", y(1.3) - 30)
  259.   .attr("class", "annotation-text")
  260.   .text("Consumption in Q1");
  261.  
  262. g.append("rect")
  263.   .attr("x", x0("GDP"))
  264.   .attr("y", y(3.1))
  265.   .attr("width", x0.bandwidth())
  266.   .attr("height", y(1.2) - y(3.1))
  267.   .attr("class", "annotation-rect");
  268.  
  269. g.append("text")
  270.   .attr("x", x0("GDP") + x0.bandwidth() / 2)
  271.   .attr("y", y(2.2))
  272.   .attr("class", "annotation-text")
  273.   .text("GDP growth in 2017");
  274.  
  275. </script>```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement