D3 Examples - Music Periods Select

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    body > div {
      background-color: #efefef;
      border: 2px solid red;
    }
    
  </style>
</head>
​
<body>
  
  <select id="select">
    <option value="">--Please choose an option--</option>
    <option value="baroque">Baroque</option>
    <option value="classical">Classical</option>
    <option value="romantic">Romantic</option>
    <option value="modern">Modern</option>
  </select>
  
  <div id="container"></div>
  
  <script>
    
    d3.json("periods.json", function(error, data) {
      if (error) return console.warn(error);
      
      // select the container
    
      var container = d3.select("#container")
      
      // add a section per period
      
      var sections = container.selectAll('div')
        .data(data.periods)
        .enter().append("div")
        .attr("style", "border:1px solid blue; margin: 30px; position: absolute; left:0; top:0;right:0; background-color: white; opacity:0;")
        .attr("id", (d => d.name.toLowerCase()))
      
      // append a title to each section
      
      var titles = sections.append("h1")
        .text(d => d.name + " " + "Period")
      
      // append a diagram container to each section
      
      var diagramBoxes = sections.append("div")
        .attr("style", "width: 50px; height: 50px; border: 1px solid green;")
      
      // add the diagram (placeholder) to each diagram wrapper
      
      var diagrams = diagramBoxes.append("p")
        .text(d => d.orchestraSeating.length)
      
      // add "composers" heading
      
      sections.append("h2")
        .text("Composers")
      
      // append a list to each section
      
      var composersList = sections.append("ul")
        .attr("style", "border: 1px dashed pink;")
      
      // add composers to each list
      
      composersList.selectAll("li")
        .data(d => d.composers)
        .enter().append("li")
        .text(d => d)
    
    });
   
    // ----- get select value and show matching section -----
    
    var select = document.getElementById('select');
    var current = null;
    
    select.addEventListener('change', showSelected);
    
    function showSelected(){
      
      if (current)
            current.style.opacity = 0;
      
      current = document.getElementById(select[select.selectedIndex].value);      
      current.style.opacity = 1;
    };
​
  </script>
</body>
​