API tools faq
paste
Advertisement
NTahmid

Title

NTahmid
Feb 8th, 2024
566
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.31 KB | None | 0 0
raw download clone embed print report
  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:#BC151E;
  27.   font-weight: bold;
  28.   font: 20px sans-serif;
  29. }
  30. </style>
  31.  
  32. <svg class="chart" width="960" height="590" aria-labelledby="graph-title" aria-describedby="graph-desc">
  33.     <title>GDP Growth Remains Broad Based</title>
  34.     <desc id="graph-desc">GDP Growth Remains Broad Based, with values for 2017 quarters 1-3.</desc>
  35.     <text transform="translate(10, 20)" class="chartDisplayTitle">Chart1</text>
  36.     <text id="graph-title" transform="translate(10, 45)" class="chartDisplayTitle">GDP Growth Remains Broad Based</text>
  37.     <text transform="translate(10, 70)" class="yUnits">Percentage points*</text>
  38.     <text transform="translate(10, 570)" class="caption">*Contribution to total gross domestic product (GDP) growth; seasonally adjusted annualized rate.</text>
  39.     <text transform="translate(10, 585)" class="caption">SOURCE: Bureau of Economic Analysis.</text>
  40. </svg>
  41. <script src="https://d3js.org/d3.v4.min.js"></script>
  42. <script>
  43.  
  44. var econ2 = [
  45.   {
  46.     "Category": "GDP",
  47.     "2017 Q1": 1.2,
  48.     "2017 Q2": 3.1,
  49.     "2017 Q3 First Estimate": 3.0
  50.   },
  51.   {
  52.     "Category": "Consumption",
  53.     "2017 Q1": 1.3,
  54.     "2017 Q2": 2.2,
  55.     "2017 Q3 First Estimate": 1.6
  56.  
  57.   },
  58.   {
  59.     "Category": "Nonresidential investment",
  60.     "2017 Q1": 0.9,
  61.     "2017 Q2": 0.8,
  62.     "2017 Q3 First Estimate": 0.5
  63.  
  64.   },
  65.   {
  66.     "Category": "Residential investment",
  67.     "2017 Q1": 0.4,
  68.     "2017 Q2": -0.3,
  69.     "2017 Q3 First Estimate": -0.2
  70.   },
  71.   {
  72.     "Category": "Inventories",
  73.     "2017 Q1": -1.5,
  74.     "2017 Q2": 0.1,
  75.     "2017 Q3 First Estimate": 0.7
  76.  
  77.   },
  78.   {
  79.     "Category": "Net exports",
  80.     "2017 Q1": 0.2,
  81.     "2017 Q2": 0.2,
  82.     "2017 Q3 First Estimate": 0.4
  83.  
  84.   },
  85.   {
  86.     "Category": "Government",
  87.     "2017 Q1": -0.1,
  88.     "2017 Q2": 0.0,
  89.     "2017 Q3 First Estimate": 0.0
  90.  
  91.   }
  92. ]
  93.  
  94. var svg = d3.select("svg"),
  95.     margin = {top: 80, right: 10, bottom: 80, left: 25},
  96.     width = svg.attr("width") - margin.left - margin.right,
  97.     height = svg.attr("height") - margin.top - margin.bottom,
  98.     g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  99.  
  100. var y = d3.scaleLinear()
  101.       .domain([-2, 4])
  102.       .range([height, 0]);
  103.  
  104. var x0 = d3.scaleBand()  
  105.       .rangeRound([0, width])
  106.       .paddingInner(0.1)
  107.       .paddingOuter(0.1);
  108.  
  109. var x1 = d3.scaleBand()  
  110.     .paddingOuter(0.25)
  111.     .paddingInner(0.15);
  112.  
  113. var z = d3.scaleOrdinal()
  114.         .range(["#BC151E", "#D3B178", "#354B5F"]);
  115.  
  116. const yAxis = d3.axisLeft(y).ticks(7);
  117.  
  118. var subCategories = Object.keys(econ2[0]).slice(1);
  119.  
  120. x0.domain(econ2.map( d =>  d.Category ));
  121.  
  122. x1.domain(subCategories).rangeRound([0, x0.bandwidth()])
  123.  
  124.   var selection = g.selectAll("g")
  125.     .data(econ2)
  126.     .enter().append("g")
  127.       .attr("transform", d => "translate(" + x0(d.Category) + ",0)" )
  128.     selection.selectAll("rect")
  129.      .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  130.       .enter().append("rect")
  131.       .attr("x", d => x1(d.key) )
  132.       .attr("y", d => (d.value<0 ? y(0) : y(d.value)) )
  133.      .attr("width", x1.bandwidth())
  134.      .attr("height", d => Math.abs(y(d.value) - y(0)) )
  135.       .attr("fill", d => z(d.key) )
  136.     selection.selectAll("text")
  137.        .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  138.         .enter().append("text")
  139.         .attr("x", d => x1(d.key) )
  140.         .attr("y", d => d.value<=0 ? y(0) - (y(4) - (Math.abs(y(d.value) - y(0)) + 20)) : y(d.value) - 10)
  141.        .style('fill', d => z(d.key))
  142.         .style('font-size', '1.25em')
  143.         .text(d => Number.parseFloat(d.value).toFixed(1))
  144.  
  145. g.append("g")
  146.     .attr("class", "axis")
  147.     .attr("transform", "translate(0," + height + ")")
  148.     .call(d3.axisBottom(x0))
  149.     .selectAll(".tick text")
  150.     .call(wrap, x0.bandwidth());
  151.  
  152. g.append('g')
  153. .call(yAxis)
  154.  
  155. g.append("line")
  156.     .attr("y1", y(0))
  157.     .attr("y2", y(0))
  158.     .attr("x1", 0)
  159.     .attr("x2", width)
  160.     .attr("stroke", "black");
  161.  
  162. var legend = g.append("g")
  163.       .attr("font-family", "sans-serif")
  164.       .attr("font-size", 13)
  165.       .attr("text-anchor", "end")
  166.     .selectAll("g")
  167.     .data(subCategories)
  168.     .enter().append("g")
  169.       .attr("transform", function(d, i) { return "translate(0," + i * 24 + ")"; });
  170.   legend.append("rect")
  171.       .attr("x", width - 142)
  172.       .attr("width", 8)
  173.       .attr("height", 8)
  174.       .attr("fill", z);
  175.   legend.append("text")
  176.           .attr("x", d => d.length > 7 ? (width + 5) : (width - 80))
  177.           .attr("y", 5.5)
  178.           .attr("dy", "0.22em")
  179.           .text(d => (d));
  180.  
  181.   function wrap(text, width) {
  182.             text.each(function() {
  183.               var text = d3.select(this),
  184.                   words = text.text().split(/\s+/).reverse(),
  185.                   word,
  186.                   line = [],
  187.                   lineNumber = 0,
  188.                   lineHeight = 1.1,
  189.                   y = text.attr("y"),
  190.                   dy = parseFloat(text.attr("dy")),
  191.                   tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
  192.               while (word = words.pop()) {
  193.                 line.push(word);
  194.                 tspan.text(line.join(" "));
  195.                 if (tspan.node().getComputedTextLength() > width) {
  196.                   line.pop();
  197.                   tspan.text(line.join(" "));
  198.                   line = [word];
  199.                   tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
  200.                 }
  201.               }
  202.             });
  203.           }
  204.  
  205. </script>```
  206.  
  207. Topics: Axis - Range
  208.  
  209. Explanation Prompt:
  210. Explanation:
  211. Annotation Prompt:
  212. Annotation:
  213. ```<!DOCTYPE html>
  214. <meta charset="utf-8">
  215.  
  216. <style>
  217. .axis line{
  218.       visibility:hidden;
  219.     }
  220.  
  221. .axis .domain {
  222.   display: none;
  223. }
  224.  
  225. .axis {
  226.       font: 13px sans-serif;
  227.     }
  228.  
  229.   .yUnits {
  230.     font: 14px sans-serif;
  231.   }
  232.  
  233.   .caption {
  234.     font: 12px sans-serif;
  235.   }
  236.  
  237. .chartDisplayTitle{
  238.   fill:#354B5F;
  239.   font-weight: bold;
  240.   font: 20px sans-serif;
  241. }
  242.  
  243. .annotation {
  244.   fill: red;
  245.   font: 14px sans-serif;
  246. }
  247. </style>
  248.  
  249. <svg class="chart" width="960" height="590" aria-labelledby="graph-title" aria-describedby="graph-desc">
  250.     <title>GDP Growth Remains Broad Based</title>
  251.     <desc id="graph-desc">GDP Growth Remains Broad Based, with values for 2017 quarters 1-3.</desc>
  252.     <text transform="translate(10, 20)" class="chartDisplayTitle">Chart1</text>
  253.     <text id="graph-title" transform="translate(10, 45)" class="chartDisplayTitle">GDP Growth Remains Broad Based</text>
  254.     <text transform="translate(10, 70)" class="yUnits">Percentage points*</text>
  255.     <text transform="translate(10, 570)" class="caption">*Contribution to total gross domestic product (GDP) growth; seasonally adjusted annualized rate.</text>
  256.     <text transform="translate(10, 585)" class="caption">SOURCE: Bureau of Economic Analysis.</text>
  257. </svg>
  258. <script src="https://d3js.org/d3.v4.min.js"></script>
  259. <script>
  260.  
  261. var econ2 = [
  262.   {
  263.     "Category": "GDP",
  264.     "2017 Q1": 1.2,
  265.     "2017 Q2": 3.1,
  266.     "2017 Q3 First Estimate": 3.0
  267.   },
  268.   {
  269.     "Category": "Consumption",
  270.     "2017 Q1": 1.3,
  271.     "2017 Q2": 2.2,
  272.     "2017 Q3 First Estimate": 1.6
  273.  
  274.   },
  275.   {
  276.     "Category": "Nonresidential investment",
  277.     "2017 Q1": 0.9,
  278.     "2017 Q2": 0.8,
  279.     "2017 Q3 First Estimate": 0.5
  280.  
  281.   },
  282.   {
  283.     "Category": "Residential investment",
  284.     "2017 Q1": 0.4,
  285.     "2017 Q2": -0.3,
  286.     "2017 Q3 First Estimate": -0.2
  287.   },
  288.   {
  289.     "Category": "Inventories",
  290.     "2017 Q1": -1.5,
  291.     "2017 Q2": 0.1,
  292.     "2017 Q3 First Estimate": 0.7
  293.  
  294.   },
  295.   {
  296.     "Category": "Net exports",
  297.     "2017 Q1": 0.2,
  298.     "2017 Q2": 0.2,
  299.     "2017 Q3 First Estimate": 0.4
  300.  
  301.   },
  302.   {
  303.     "Category": "Government",
  304.     "2017 Q1": -0.1,
  305.     "2017 Q2": 0.0,
  306.     "2017 Q3 First Estimate": 0.0
  307.  
  308.   }
  309. ]
  310.  
  311. var svg = d3.select("svg"),
  312.     margin = {top: 80, right: 10, bottom: 80, left: 25},
  313.     width = svg.attr("width") - margin.left - margin.right,
  314.     height = svg.attr("height") - margin.top - margin.bottom,
  315.     g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  316.  
  317. var y = d3.scaleLinear()
  318.       .domain([-2, 4])
  319.       .range([height, 0]);
  320.  
  321. var x0 = d3.scaleBand()  
  322.       .rangeRound([0, width])
  323.       .paddingInner(0.1)
  324.       .paddingOuter(0.1);
  325.  
  326. var x1 = d3.scaleBand()  
  327.     .paddingOuter(0.25)
  328.     .paddingInner(0.15);
  329.  
  330. var z = d3.scaleOrdinal()
  331.         .range(["#BC151E", "#D3B178", "#354B5F"]);
  332.  
  333. const yAxis = d3.axisLeft(y).ticks(7);
  334.  
  335. var subCategories = Object.keys(econ2[0]).slice(1);
  336.  
  337. x0.domain(econ2.map( d =>  d.Category ));
  338.  
  339. x1.domain(subCategories).rangeRound([0, x0.bandwidth()])
  340.  
  341.   var selection = g.selectAll("g")
  342.     .data(econ2)
  343.     .enter().append("g")
  344.       .attr("transform", d => "translate(" + x0(d.Category) + ",0)" )
  345.     selection.selectAll("rect")
  346.      .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  347.       .enter().append("rect")
  348.       .attr("x", d => x1(d.key) )
  349.       .attr("y", d => (d.value<0 ? y(0) : y(d.value)) )
  350.      .attr("width", x1.bandwidth())
  351.      .attr("height", d => Math.abs(y(d.value) - y(0)) )
  352.       .attr("fill", d => z(d.key) )
  353.     selection.selectAll("text")
  354.        .data(function(d) { return subCategories.map(function(key) { return {key: key, value: d[key]}; }); })
  355.         .enter().append("text")
  356.         .attr("x", d => x1(d.key) )
  357.         .attr("y", d => d.value<=0 ? y(0) - (y(4) - (Math.abs(y(d.value) - y(0)) + 20)) : y(d.value) - 10)
  358.        .style('fill', d => z(d.key))
  359.         .style('font-size', '1.25em')
  360.         .text(d => Number.parseFloat(d.value).toFixed(1))
  361.  
  362. g.append("g")
  363.     .attr("class", "axis")
  364.     .attr("transform", "translate(0," + height + ")")
  365.     .call(d3.axisBottom(x0))
  366.     .selectAll(".tick text")
  367.     .call(wrap, x0.bandwidth());
  368.  
  369. g.append('g')
  370. .call(yAxis)
  371.  
  372. g.append("line")
  373.     .attr("y1", y(0))
  374.     .attr("y2", y(0))
  375.     .attr("x1", 0)
  376.     .attr("x2", width)
  377.     .attr("stroke", "black");
  378.  
  379. var legend = g.append("g")
  380.       .attr("font-family", "sans-serif")
  381.       .attr("font-size", 13)
  382.       .attr("text-anchor", "end")
  383.     .selectAll("g")
  384.     .data(subCategories)
  385.     .enter().append("g")
  386.       .attr("transform", function(d, i) { return "translate(0," + i * 24 + ")"; });
  387.   legend.append("rect")
  388.       .attr("x", width - 142)
  389.       .attr("width", 8)
  390.       .attr("height", 8)
  391.       .attr("fill", z);
  392.   legend.append("text")
  393.           .attr("x", d => d.length > 7 ? (width + 5) : (width - 80))
  394.           .attr("y", 5.5)
  395.           .attr("dy", "0.22em")
  396.           .text(d => (d));
  397.  
  398.   function wrap(text, width) {
  399.             text.each(function() {
  400.               var text = d3.select(this),
  401.                   words = text.text().split(/\s+/).reverse(),
  402.                   word,
  403.                   line = [],
  404.                   lineNumber = 0,
  405.                   lineHeight = 1.1,
  406.                   y = text.attr("y"),
  407.                   dy = parseFloat(text.attr("dy")),
  408.                   tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
  409.               while (word = words.pop()) {
  410.                 line.push(word);
  411.                 tspan.text(line.join(" "));
  412.                 if (tspan.node().getComputedTextLength() > width) {
  413.                   line.pop();
  414.                   tspan.text(line.join(" "));
  415.                   line = [word];
  416.                   tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
  417.                 }
  418.               }
  419.             });
  420.           }
  421.  
  422. // Annotations
  423. g.append("text")
  424.   .attr("class", "annotation")
  425.   .attr("x", width / 2)
  426.   .attr("y", y(4) + 20)
  427.   .text("Y-axis range: -2 to 4");
  428.  
  429. g.append("text")
  430.   .attr("class", "annotation")
  431.   .attr("x", width / 2)
  432.   .attr("y", height + 40)
  433.   .text("X-axis categories: GDP, Consumption, Nonresidential investment, Residential investment, Inventories, Net exports, Government");
  434.  
  435. </script>```
  436.  
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!