D3 Examples - Families of Musical Instruments

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; }
    
    div {
      background-color: #efefef;
    }
    
    div > div {
      border: 1px dashed grey; margin-bottom: 40px;
      padding: 20px;
    }
    
    ul {
      border: 1px dashed grey;
      padding: 10px;
    }
    
​
  </style>
</head>
​
<body>
  <script>
    
    
    d3.json("families.json", function(error, data) {
      if (error) return console.warn(error);
      
      
      
      // Document title
      
      const title = d3.select("body").append("h1")
        .text("Instruments")
      
      
      
      // A div where we add everything
      
      var contentDiv = d3.select("body").append("div")
      
      
      
      // Create a section per instrument
      
      var sections = contentDiv.selectAll("div")
        .data(data.families)
        .enter().append("div")
      
      
      
      // Add a h2 title to each section
      
      var subtitles = sections.append("h2")
        .text(d => d.name)
      
      
      
      // add a list to each section
      
      var lists = sections.append("ul")
      
      
      
      // add n number of list items to each list
      // 'lists' uses 'sections'
      // so 'd' in 'lists' is an element of 'data' in 'sections'
      lists.selectAll('li')
        .data(d => d.instruments)
        .enter().append("li")
        .text(d => d)
​
    });
    
​
  </script>
</body>
​
    