title: How to make a semi-circle in d3?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.jonsIdea {
  background-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="jonsIdea"&gt;
          &lt;div class="canvas"&gt;
              &lt;svg width="90vw" height="100vh"&gt;
                  &lt;text text-anchor="middle" x="50vw" y="5vh" font-family="MarsBook" font-size="2vw" fill="black"&gt;
                      Please select your businesses
                  &lt;/text&gt;
                  &lt;circle r='7vw' cx='50vw' cy='50vh'&gt;&lt;/circle&gt;
              &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've been searching online but I have not been able to find an example of a simple semi circle using d3.js.</p>
  
  <p>As you can I see I have a circle appended to the middle of the page. What I am aiming to do is have two buttons inside the circle that present as semi-circles that users can click. It would be great if they were on top of each other, as opposed to next to eachother.</p>
  
  <p>Does anyone have the code to draw a semi-circle?</p>
  
  <p>Thanks in advance</p>