JSFiddle - React, Tailwind, and code Playground

HTML

<select id="letter">
  <option value="">Select a letter</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<div class"container">
  <!-- Generator: en.wikipedia.org/wiki/Module:Charts SVG -->
  <svg id="head" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" font-family="Helvetica, Arial" width="766" height="514">

    <title>Charts SVG Example 13 - Exploded Pie Chart</title>
    <desc>
      SVG chart generated by Charts SVG
    </desc>

    <metadata>
      <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/">
        <rdf:Description dc:title="Charts SVG Example 13 - Exploded Pie Chart" dc:description="SVG chart generated by Charts SVG" dc:date="2014-3-16" dc:format="image/svg+xml" dc:language="en">
        </rdf:Description>
      </rdf:RDF>
    </metadata>

    <!-- == backgrounds == -->

    <!-- image background -->
    <rect id="imagebackground" x="0" y="0" width="766" height="514" stroke-width="1" stroke="none" fill="white" />

    <!-- == graph area styles == -->

    <style id="styles" type="text/css">
      <![CDATA[
      /*-- general style of areas --*/
      
      .series-areas-general {
        stroke-width: 0;
      }
      /*-- series 1 --*/
      
      .series1 {
        fill: rgb(0, 0, 255);
      }
      /*-- series 2 --*/
      
      .series2 {
        fill: rgb(0, 192, 0);
      }
      /*-- series 3 --*/
      
      .series3 {
        fill: rgb(255, 255, 0);
      }
      /*-- series 4 --*/
      
      .series4 {
        fill: rgb(255, 0, 0);
      }
      /*-- series 5 --*/
      
      .series5 {
        fill: rgb(192, 192, 0);
      }
      
      ]]>

    </style>

    <!-- == pie segments == -->

    <g id="segments" class="series-areas-general"...

CSS

select {
  font-size: 2em
}

JavaScript

var options = {
  "A": "#segment1, #segment1text, #legend-area1, #legend-text1",
  "B": "#segment2, #segment2text, #legend-area2, #legend-text2",
  "C": "#segment3, #segment3text, #legend-area3, #legend-text3",
  "D": "#segment4, #segment4text, #legend-area4, #legend-text4",
  "E": "#segment5, #segment5text, #legend-area5, #legend-text5"
};

for (var value in options) {
  $(options[value])
  .attr('tabindex', 0)
  .data('value', value)
  .css('cursor', 'pointer')
  .on("click", onClick)
  .on('keydown', function(event) {
    if(event.which === 32 || event.which === 13)  {
      // Space.
      $(this).click();
			event.preventDefault();
    }
  });
}

function onClick() {
  $("#letter")
    .val($(this).data('value'))
    .trigger('change');
}
$('#letter').on('change', function() {
  for (var value in options) {
    if (value == $('#letter').val()) {
      $(options[value]).fadeTo("slow", 1);
    } else {
      $(options[value]).fadeTo("fast", .3);
    }
  }
}).trigger('change');