Advertisement
NTahmid

pointwise_comparison_v2_bar

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