diff --git a/static/bargraph/style.css b/static/bargraph/style.css
index 13dbb1af..4513e56d 100644
--- a/static/bargraph/style.css
+++ b/static/bargraph/style.css
@@ -64,7 +64,7 @@ path.domain {
   display: inline-block;
 }
 
-#faq-text {
+.faq-text {
   width: 100%;
   max-width: 750px;
   padding: 5px 10px 0px 10px;
diff --git a/static/pie/pie.css b/static/pie/pie.css
index 6b712c7c..ac8696fe 100644
--- a/static/pie/pie.css
+++ b/static/pie/pie.css
@@ -2,3 +2,7 @@
     max-width: 800px;
     width: 100%;
 }
+
+#pie-wrapper {
+    max-width: 800px;
+}
diff --git a/templates/bargraph/barchart-interactive-nonblocking.html b/templates/bargraph/barchart-interactive-nonblocking.html
index 52c34bc1..b436362e 100644
--- a/templates/bargraph/barchart-interactive-nonblocking.html
+++ b/templates/bargraph/barchart-interactive-nonblocking.html
@@ -2,96 +2,9 @@
 
 <script type="text/javascript">
 
-const idOfWhyButton = "#bargraph-interactive-why-button";
 // Raising the scope for other methods to access
 let barchartRoundPlayer = null;
-let scrollbarLocked = false;
-
-function showTextOnRoundDescriber(description, keepFAQButtonHidden) {
-  // While playing, don't update the description text for the round
-  if (barchartRoundPlayer.playing()) {
-    return;
-  }
-
-  const idOfLegendOrRoundDescriber = "#bargraph-interactive-round-description";
-
-  // Don't re-render and transition if text already matches
-  if (d3.select(idOfLegendOrRoundDescriber).text() === description) {
-    return;
-  }
-
-  d3.select(idOfLegendOrRoundDescriber)
-  .transition()
-    .duration(100)
-    .delay(0)
-    .style("opacity", "0");
-  d3.select(idOfWhyButton)
-  .transition()
-    .duration(100)
-    .delay(0)
-    .style("opacity", "0");
-
-  d3.select(idOfLegendOrRoundDescriber)
-  .transition()
-    .delay(350)
-    .style("opacity", "1")
-    .text(description);
-
-  if (!keepFAQButtonHidden) {
-    d3.select(idOfWhyButton)
-    .transition()
-      .delay(350)
-      .style("opacity", "1");
-  }
-};
-
-
-function descriptionOfCurrRound(round) {
-  const roundData = humanFriendlyEventsPerRound[round];
-
-  let roundText = roundData.map(function(event) {
-    return event.description;
-  }).reduce(function(totalString, currText) {
-    return totalString + "\n" + currText;
-  }, "");
-
-  const roundIdentifier = `Round ${round + 1}. `;
-  return roundIdentifier + roundText;
-}
-
-
-function lockScrollbarIfNeeded() {
-  // Don't allow the animation to shift horizontally when a scrollbar is added
-  // and removed -- if a scrollbar is ever visible, keep it there.
-  if (scrollbarLocked) return;
-
-  const hasVerticalScrollbar = document.documentElement.scrollHeight > window.innerHeight;
-
-  if (hasVerticalScrollbar) {
-    document.body.style.overflowY = 'scroll';
-    scrollbarLocked = true;
-  }
-}
-
-function updateFaqText(round) {
-  const faqsPerRound = {{ faqsPerRound|safe }};
-  const idOfFaqTextDiv = "faq-text";
-  const text = faqsPerRound[round]
-              .map(d => "<p class='faq-q'>" + d['question'] + "</p>" +
-                        "<p class='faq-a'>" + d['answer'] + "</p>")
-              .reduce((accum, val) => accum + val);
-  document.getElementById(idOfFaqTextDiv).innerHTML = `<h3 class="faq-description-header">Round ${round + 1} Explanation</h3> ${text}`;
-  setTimeout(lockScrollbarIfNeeded, 0); // Needs to run after the DOM is updated
-}
-
-function showFaqs() {
-  makeFaqSectionVisible();
-  document.getElementById("faq-text").scrollIntoView({ behavior: "smooth" })
-}
-
-function makeFaqSectionVisible() {
-  document.getElementById("faq-text").style.display = "block";
-}
+const bargraphInteractiveIds = makeRoundComponentIds("bargraph-interactive");
 
 function makeInteractiveGraph() {
   {{ bargraphjs|safe }}
@@ -124,8 +37,8 @@
 
   function sliderValueChangedCallback(round) {
     transitionEachBarForRound(round);
-    showTextOnRoundDescriber(descriptionOfCurrRound(round), false);
-    updateFaqText(round);
+    showTextOnRoundDescriber(descriptionOfCurrRound(round), false, bargraphInteractiveIds);
+    updateFaqText(round, bargraphInteractiveIds);
   }
 
   barchartRoundPlayer = RoundPlayer({
@@ -133,35 +46,22 @@
     totalRounds: numRounds,
     onChange: sliderValueChangedCallback,
     onPlay: function() {
-      showTextOnRoundDescriber(humanFriendlySummary, false);
+      showTextOnRoundDescriber(humanFriendlySummary, false, bargraphInteractiveIds);
     }
   });
+  activeRoundPlayer = barchartRoundPlayer;
 
   // After creating the slider, make the default text the summary
   // round summary, with the FAQ button showing.
-  showTextOnRoundDescriber(humanFriendlySummary, false);
+  showTextOnRoundDescriber(humanFriendlySummary, false, bargraphInteractiveIds);
 
   // On load, show the FAQs if not in an iframe
   if (window.self === window.top) {
-    makeFaqSectionVisible();
+    makeFaqSectionVisible(bargraphInteractiveIds);
   }
 
   // Populate the FAQ with initial description for the last round
-  updateFaqText(numRounds - 1);
-}
-
-function showFaqButton() {
-  d3.select(idOfWhyButton)
-  .transition()
-    .delay(300)
-    .duration(300)
-    .style("opacity", "100%");
-}
-
-function showFaqButtonNow() {
-  // Just used for integration testing
-  d3.select(idOfWhyButton)
-    .style("opacity", "100%");
+  updateFaqText(numRounds - 1, bargraphInteractiveIds);
 }
 
 makeInteractiveGraph();
diff --git a/templates/bargraph/barchart-interactive.html b/templates/bargraph/barchart-interactive.html
index da5af29b..b965385b 100644
--- a/templates/bargraph/barchart-interactive.html
+++ b/templates/bargraph/barchart-interactive.html
@@ -7,21 +7,11 @@
 
 <div class="container-fluid">
   <div class="row d-flex flex-column justify-content-left align-items-start">
-    <div class="round-description-container">
-      <div id="round-description-wrapper" class="round-description-wrapper" role="alert">
-        <div class="round-description-text">
-          <span id="bargraph-interactive-round-description">
-          </span>
-          <span id="bargraph-interactive-why-button">
-            <a role="button" tabindex="0" onclick="showFaqs()">Read a detailed explanation</a>.
-          </span>
-        </div>
-      </div>
-    </div>
+    {% include "visualizer/round-describer.html" with prefix="bargraph-interactive" %}
     <div class="shadow-wrapper col-md-12 col-xl-10" id="bargraph-interactive-body">
       <div id="bargraph-slider-container" class="ml-auto mr-auto">
       </div>
     </div>
-    <div id="faq-text"></div>
+    {% include "visualizer/round-faq.html" with prefix="bargraph-interactive" %}
   </div>
 </div>
diff --git a/templates/pie/pie-nonblocking.html b/templates/pie/pie-nonblocking.html
index e18da237..3bb3a2dd 100644
--- a/templates/pie/pie-nonblocking.html
+++ b/templates/pie/pie-nonblocking.html
@@ -35,16 +35,22 @@
     // Append it to the div
     document.getElementById("pie-body").appendChild(pieChart);
 
+    const pieNumRounds = {{ config.numRounds }};
+    const pieIds = makeRoundComponentIds("pie");
+
     const pieRoundPlayer = RoundPlayer({
       container: document.getElementById('pie-slider-container'),
-      totalRounds: {{ config.numRounds }},
+      totalRounds: pieNumRounds,
       onChange: updatePieChartRound,
       timeBetweenStepsMs: 3000,
       firstStepHoldTimeMs: 500,
     });
+    activeRoundPlayer = pieRoundPlayer;
 
     function updatePieChartRound(sliderIndex) {
         pieChart.currentRound = sliderIndex+1;
+        showTextOnRoundDescriber(descriptionOfCurrRound(sliderIndex), false, pieIds);
+        updateFaqText(sliderIndex, pieIds);
     }
 
     // When the pie chart is animating it knows it is advancing rounds, but to avoid reactive
@@ -53,6 +59,15 @@
     function updateRound(roundNum) {
         pieChart.currentRound = roundNum;
         pieRoundPlayer.setStep(roundNum - 1);
+        showTextOnRoundDescriber(descriptionOfCurrRound(roundNum - 1), false, pieIds);
+        updateFaqText(roundNum - 1, pieIds);
+    }
+
+    // Show summary text and last-round FAQ on load
+    showTextOnRoundDescriber(humanFriendlySummary, false, pieIds);
+    updateFaqText(pieNumRounds - 1, pieIds);
+    if (window.self === window.top) {
+        makeFaqSectionVisible(pieIds);
     }
 
 </script>
diff --git a/templates/pie/pie.html b/templates/pie/pie.html
index 8c740660..c77b6852 100644
--- a/templates/pie/pie.html
+++ b/templates/pie/pie.html
@@ -1,9 +1,18 @@
+{% load static %}
+{% load compress %}
+
+{% compress css file %}
+<link rel="stylesheet" type="text/css" href="{% static 'pie/pie.css' %}">
+{% endcompress %}
 
 <!-- Embed JSON Data -->
 {{ rawData|json_script:"rawDataId" }}
 
+{% include "visualizer/round-describer.html" with prefix="pie" %}
 
 <div id="pie-wrapper" class="shadow-wrapper">
     <div id="pie-slider-container"></div>
     <div id="pie-body" style="width: 100%; max-width: 800px; aspect-ratio: 1; margin: 0 auto;"></div>
 </div>
+
+{% include "visualizer/round-faq.html" with prefix="pie" %}
diff --git a/templates/tabular/tabular-by-round-interactive-nonblocking.html b/templates/tabular/tabular-by-round-interactive-nonblocking.html
index 8fb7d161..f3499e05 100644
--- a/templates/tabular/tabular-by-round-interactive-nonblocking.html
+++ b/templates/tabular/tabular-by-round-interactive-nonblocking.html
@@ -5,12 +5,15 @@
 
 // For slider TODO sync with barchart-interactive.html
 var numRounds = {{ tabularByRoundInteractive.rounds|length }};
+const tabularIds = makeRoundComponentIds("tabular");
 
 function showRound(round) {
-    for (let i = 0; i < numRounds; i++) { 
+    for (let i = 0; i < numRounds; i++) {
       document.getElementById("tabular_round_container_"+i).style.display = "none";
     }
     document.getElementById("tabular_round_container_"+round).style.display = "block";
+    showTextOnRoundDescriber(descriptionOfCurrRound(round), false, tabularIds);
+    updateFaqText(round, tabularIds);
 }
 
 showRound(numRounds-1)
@@ -20,5 +23,12 @@
   totalRounds: numRounds,
   onChange: showRound,
 });
+activeRoundPlayer = roundPlayer;
+
+// Show summary text and last-round FAQ on load
+showTextOnRoundDescriber(humanFriendlySummary, false, tabularIds);
+if (window.self === window.top) {
+    makeFaqSectionVisible(tabularIds);
+}
 
 </script>
diff --git a/templates/tabular/tabular-by-round-interactive.html b/templates/tabular/tabular-by-round-interactive.html
index 4af15789..a81ba8ab 100644
--- a/templates/tabular/tabular-by-round-interactive.html
+++ b/templates/tabular/tabular-by-round-interactive.html
@@ -1,8 +1,12 @@
 {% load static %}
 
+{% include "visualizer/round-describer.html" with prefix="tabular" %}
+
   <div id="tabular-by-round-slider-container" class="ml-auto mr-auto">
   </div>
 
+{% include "visualizer/round-faq.html" with prefix="tabular" %}
+
   <div id="tabularByRoundInteractiveContainer">
     {% for round in tabularByRoundInteractive.rounds %}
       <div id="tabular_round_container_{{ forloop.counter0 }}">
@@ -15,7 +19,7 @@ <h4 class="mt-2 text-center">Round {{ forloop.counter }}</h4>
               <th scope="col">Current total votes</th>
             </tr>
           </thead>
-        
+
           <tbody>
             {% for candidate in round %}
               {% if candidate.wonThisRound %}
diff --git a/templates/visualizer/round-describer-nonblocking.html b/templates/visualizer/round-describer-nonblocking.html
new file mode 100644
index 00000000..b375359f
--- /dev/null
+++ b/templates/visualizer/round-describer-nonblocking.html
@@ -0,0 +1,81 @@
+<script type="text/javascript">
+
+// Consumers must set activeRoundPlayer to their RoundPlayer instance
+// before showTextOnRoundDescriber is called.
+let activeRoundPlayer = null;
+
+function makeRoundComponentIds(prefix) {
+  return {
+    describer: "#" + prefix + "-round-description",
+    whyButton: "#" + prefix + "-why-button",
+    faqText: prefix + "-faq-text"
+  };
+}
+
+function showTextOnRoundDescriber(description, keepFAQButtonHidden, ids) {
+  // While playing, don't update the description text for the round
+  if (activeRoundPlayer.playing()) {
+    return;
+  }
+
+  // Don't re-render and transition if text already matches
+  if (d3.select(ids.describer).text() === description) {
+    return;
+  }
+
+  d3.select(ids.describer)
+  .transition()
+    .duration(100)
+    .delay(0)
+    .style("opacity", "0");
+  d3.select(ids.whyButton)
+  .transition()
+    .duration(100)
+    .delay(0)
+    .style("opacity", "0");
+
+  d3.select(ids.describer)
+  .transition()
+    .delay(350)
+    .style("opacity", "1")
+    .text(description);
+
+  if (!keepFAQButtonHidden) {
+    d3.select(ids.whyButton)
+    .transition()
+      .delay(350)
+      .style("opacity", "1");
+  }
+};
+
+
+function descriptionOfCurrRound(round) {
+  const roundData = humanFriendlyEventsPerRound[round];
+
+  let roundText = roundData.map(function(event) {
+    return event.description;
+  }).reduce(function(totalString, currText) {
+    return totalString + "\n" + currText;
+  }, "");
+
+  const roundIdentifier = `Round ${round + 1}. `;
+  return roundIdentifier + roundText;
+}
+
+
+function showFaqButton(ids) {
+  d3.select(ids.whyButton)
+  .transition()
+    .delay(300)
+    .duration(300)
+    .style("opacity", "100%");
+}
+
+function showFaqButtonNow() {
+  // Just used for integration testing - targets the bargraph
+  const ids = makeRoundComponentIds("bargraph-interactive");
+  d3.select(ids.whyButton)
+    .style("opacity", "100%");
+}
+
+</script>
diff --git a/templates/visualizer/round-describer.html b/templates/visualizer/round-describer.html
new file mode 100644
index 00000000..d9d37398
--- /dev/null
+++ b/templates/visualizer/round-describer.html
@@ -0,0 +1,11 @@
+<div class="round-description-container">
+  <div class="round-description-wrapper" role="alert">
+    <div class="round-description-text">
+      <span id="{{ prefix }}-round-description">
+      </span>
+      <span id="{{ prefix }}-why-button">
+        <a role="button" tabindex="0" onclick="showFaqsFor('{{ prefix }}')">Read a detailed explanation</a>.
+      </span>
+    </div>
+  </div>
+</div>
diff --git a/templates/visualizer/round-faq-nonblocking.html b/templates/visualizer/round-faq-nonblocking.html
new file mode 100644
index 00000000..b70691ee
--- /dev/null
+++ b/templates/visualizer/round-faq-nonblocking.html
@@ -0,0 +1,38 @@
+<script type="text/javascript">
+
+let scrollbarLocked = false;
+
+function lockScrollbarIfNeeded() {
+  // Don't allow the animation to shift horizontally when a scrollbar is added
+  // and removed -- if a scrollbar is ever visible, keep it there.
+  if (scrollbarLocked) return;
+
+  const hasVerticalScrollbar = document.documentElement.scrollHeight > window.innerHeight;
+
+  if (hasVerticalScrollbar) {
+    document.body.style.overflowY = 'scroll';
+    scrollbarLocked = true;
+  }
+}
+
+function updateFaqText(round, ids) {
+  const faqsPerRound = {{ faqsPerRound|safe }};
+  const text = faqsPerRound[round]
+              .map(d => "<p class='faq-q'>" + d['question'] + "</p>" +
+                        "<p class='faq-a'>" + d['answer'] + "</p>")
+              .reduce((accum, val) => accum + val);
+  document.getElementById(ids.faqText).innerHTML = `<h3 class="faq-description-header">Round ${round + 1} Explanation</h3> ${text}`;
+  setTimeout(lockScrollbarIfNeeded, 0); // Needs to run after the DOM is updated
+}
+
+function showFaqsFor(prefix) {
+  const ids = makeRoundComponentIds(prefix);
+  makeFaqSectionVisible(ids);
+  document.getElementById(ids.faqText).scrollIntoView({ behavior: "smooth" });
+}
+
+function makeFaqSectionVisible(ids) {
+  document.getElementById(ids.faqText).style.display = "block";
+}
+
+</script>
diff --git a/templates/visualizer/round-faq.html b/templates/visualizer/round-faq.html
new file mode 100644
index 00000000..04f23a4a
--- /dev/null
+++ b/templates/visualizer/round-faq.html
@@ -0,0 +1 @@
+<div id="{{ prefix }}-faq-text" class="faq-text"></div>
diff --git a/templates/visualizer/visualize-ballotpedia.html b/templates/visualizer/visualize-ballotpedia.html
index a7c7d228..84408377 100644
--- a/templates/visualizer/visualize-ballotpedia.html
+++ b/templates/visualizer/visualize-ballotpedia.html
@@ -50,6 +50,8 @@
   </div>
   
   {% include "visualizer/common-visualizer-nonblocking.html" %}
+  {% include "visualizer/round-describer-nonblocking.html" %}
+  {% include "visualizer/round-faq-nonblocking.html" %}
   {% include "bargraph/barchart-common-nonblocking.html" %}
   {% include "bargraph/barchart-interactive-nonblocking.html" %}
 </body>
diff --git a/templates/visualizer/visualize-embedded.html b/templates/visualizer/visualize-embedded.html
index 84c9260b..6b20b75f 100644
--- a/templates/visualizer/visualize-embedded.html
+++ b/templates/visualizer/visualize-embedded.html
@@ -45,6 +45,8 @@
   </div>
 
   {% include "visualizer/common-visualizer-nonblocking.html" %}
+  {% include "visualizer/round-describer-nonblocking.html" %}
+  {% include "visualizer/round-faq-nonblocking.html" %}
   {% if vistype == "sankey" %}
       {% include "sankey/sankey-nonblocking.html" %}
   {% elif vistype == "pie" %}
diff --git a/templates/visualizer/visualize.html b/templates/visualizer/visualize.html
index a647dcdc..4a67a2b1 100644
--- a/templates/visualizer/visualize.html
+++ b/templates/visualizer/visualize.html
@@ -165,6 +165,8 @@ <h6 class="font-weight-light mb-1 ml-3">
 
 {% block afterMaincontent %}
     {% include "visualizer/common-visualizer-nonblocking.html" %}
+    {% include "visualizer/round-describer-nonblocking.html" %}
+    {% include "visualizer/round-faq-nonblocking.html" %}
     {% include "sankey/sankey-nonblocking.html" %}
     {% include "pie/pie-nonblocking.html" %}
     {% include "bargraph/barchart-common-nonblocking.html" %}
diff --git a/visualizer/tests/testLiveBrowserWithHead.py b/visualizer/tests/testLiveBrowserWithHead.py
index 2b94c300..f52e945f 100644
--- a/visualizer/tests/testLiveBrowserWithHead.py
+++ b/visualizer/tests/testLiveBrowserWithHead.py
@@ -191,7 +191,7 @@ def test_faq(self):
         self.browser.execute_script("showFaqButtonNow();")
 
         # Starts at 65px
-        div = self.browser.find_element(By.ID, 'round-description-wrapper')
+        div = self.browser.find_element(By.CSS_SELECTOR, '.round-description-wrapper')
         self._ensure_eventually_asserts(lambda: self.assertEqual(div.size['height'], 65))
 
         faqHeader = self.browser.find_element(By.CSS_SELECTOR, '.faq-description-header')
@@ -291,7 +291,7 @@ def test_faq_visibility_wrt_iframes(self):
         self._upload_something_if_needed()
 
         # Ensure that the FAQs are visible outside an iframe
-        faq = self.browser.find_element(By.ID, 'faq-text')
+        faq = self.browser.find_element(By.ID, 'bargraph-interactive-faq-text')
         self.assertEqual(faq.value_of_css_property("display"), "block")
 
         # Get the iframe HTML
@@ -310,7 +310,7 @@ def test_faq_visibility_wrt_iframes(self):
         # Check that the FAQs are hidden
         WebDriverWait(self.browser, 3).until(
             EC.visibility_of_element_located((By.ID, "embedded-body")))
-        faq = self.browser.find_element(By.ID, 'faq-text')
+        faq = self.browser.find_element(By.ID, 'bargraph-interactive-faq-text')
         self.assertEqual(faq.value_of_css_property("display"), "none")
 
         # After clicking "Read a detailed explanation" it becomes visible