Demo2

<!DOCTYPE html>
<html lang="en">
  <title>Experiment-Bar1</title>
  <meta charset="utf-8">
  <style>
    /* CSS part */
    html, body {
      margin: 0;
      padding:0;
      height: 100%;
      width: 100%;
    }
    h1 {
      color: #000000;
      font-family: 'Lucida Console';
      font-weight: normal;
      font-size: 2.5em;
      letter-spacing: .2em;
      line-height: 1.1em;
      text-align: center;
      text-transform: uppercase;
    }
    p {
      width:700px;
      color: #000000;
      font-family: 'Lucida Console';
      text-align: center;
      font-size: 1em;
      line-height: 1.2em;
      text-anchor: middle;
    }
    #container {
      width:800px;
    }
    #content {
      background-color:#ffffff;
      height:600px;
      width:800px;
      float:left;
      font-family: 'Lucida Console';
    }
    #footer {
      width:800px;
      height: 50px;
      background: #1abc9c;
      float:left;
    }
    button {
      margin: 10px;
      font-size: 12px;
    }
    #next {
      float:right;
    }
  </style>
  <body>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3-random.v1.min.js"></script>

<div id = "container">
      <div id ="content">
        <svg height="400" width="650">
        </svg>
        <script>
          //Ref: https://bl.ocks.org/bricedev/8aaef92e64007f882267
var width = 900,
    height = 400,
    barHeight = height / 2 - 40;

var formatNumber = d3.format("s");

var svg = d3.select('svg')
    .append("g")
    .attr("transform", "translate(" + width/2.5 + "," + height/2 + ")");

console.log(dataChosen);
  
  var extent = d3.extent(dataRadial, function(d) { return d.value; });
  var barScale = d3.scale.linear()
      .domain(extent)
      .range([0, barHeight]);

var arc = d3.svg.arc()
      .startAngle(function(d,i) { return (i * 2 * Math.PI) / numBars; })
      .endAngle(function(d,i) { return ((i + 1) * 2 * Math.PI) / numBars; })
      .innerRadius(0);

var segments = svg.selectAll("path")
                    .data(dataRadial)
                    .enter()
                    .append("path")
          .style("fill", "#ffffff")
          .style("stroke", "#000000")
          .attr("d", function(d, index) {
              d.outerRadius = d.value * 2;
              return arc(d, index);
          });
          
  // Marks
           var markRadius = barHeight-140;

var marks = svg.append("g")
           .classed("marks", true);

marks.append("def")
        .append("path")
        .attr("id", "label-path")
        .attr("d", "m0 " + -markRadius + " a" + markRadius + " " + markRadius + " 0 1,1 -0.01 0");

marks.selectAll("text")
        .data(c)
      .enter().append("text")
        .style("text-anchor", "middle")
        .append("textPath")
        .attr("xlink:href", "#label-path")
        .attr("startOffset", function(d, i) {return d * 100 / numBars + 50 / numBars + '%';})
        .style("font-weight","bold")
        .text("·");
          
          
          
          
          var content = d3.select("#content");
          content.append("p")
                 .text('Two values are marked with dots.');
          content.append("p")
                 .attr("class", "aim")
                 .text('What do you think the percent of the smaller value to the larger value?');

function toPie() {
            location.href = "pie.html";
          }
          
        </script>
        
          <div class="slider">
            <input type="range" id="slider-range" min="0" max="100" value="20">
          </div>
        <div id="result" value="0%">0%</div>
      </div>
    <div id ="footer">
      <button type="button" id = "next" onclick="toPie()">NEXT</button>
    </div>
  </div>
  </body>
</html>

https://d3js.org/d3.v3.min.js

https://d3js.org/d3-random.v1.min.js