trianah/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from trianah's block: music periods

  
## data.json
{
	"families": [{
			"name": "strings",
			"colour": "blue",
			"instruments": [
				"Violin",
				"Viola",
				"Chello",
				"Double Bass",
				"Harp"
			]
		},
		{
			"name": "percussion",
			"colour": "green",
			"instruments": [
				"Bass Drum",
				"Castanets",
				"Chimes",
				"Conga Drum",
				"Cowbell",
				"Cymbals",
				"Glockenspiel",
				"Gong",
				"Guiro",
				"Snare Drum",
				"Tambourine",
				"Tenor Drum",
				"Timpani",
				"Triangle",
				"Wood Block",
				"Xylophone"
			]
		},
		{
			"name": "woodwinds",
			"colour": "yellow",
			"instruments": [
				"Flute",
				"Piccolo",
				"Oboe",
				"English Horn",
				"Clarinet",
				"Bass Clarinet",
				"Saxophone",
				"Bassoon",
				"Contrabassoon"
			]
		},
		{
			"name": "brass",
			"colour": "orange",
			"instruments": [
				"French Horn",
				"Trumpet",
				"Trombone",
				"Tuba"
			]
		},
		{
			"name": "keyboards",
			"colour": "redorange",
			"instruments": [
				"Harpsichord",
				"Piano",
				"Organ"
			]
		}
	]
}

## families.json
{
	"families": [{
			"name": "strings",
			"colour": "blue",
			"instruments": [
				"Violin",
				"Viola",
				"Chello",
				"Double Bass",
				"Harp"
			]
		},
		{
			"name": "percussion",
			"colour": "green",
			"instruments": [
				"Bass Drum",
				"Castanets",
				"Chimes",
				"Conga Drum",
				"Cowbell",
				"Cymbals",
				"Glockenspiel",
				"Gong",
				"Guiro",
				"Snare Drum",
				"Tambourine",
				"Tenor Drum",
				"Timpani",
				"Triangle",
				"Wood Block",
				"Xylophone"
			]
		},
		{
			"name": "woodwinds",
			"colour": "yellow",
			"instruments": [
				"Flute",
				"Piccolo",
				"Oboe",
				"English Horn",
				"Clarinet",
				"Bass Clarinet",
				"Saxophone",
				"Bassoon",
				"Contrabassoon"
			]
		},
		{
			"name": "brass",
			"colour": "orange",
			"instruments": [
				"French Horn",
				"Trumpet",
				"Trombone",
				"Tuba"
			]
		},
		{
			"name": "keyboards",
			"colour": "redorange",
			"instruments": [
				"Harpsichord",
				"Piano",
				"Organ"
			]
		}
	]
}

## index.html
<!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>

## periods.json
{
	"periods": [{
			"name": "Baroque",
			"orchestraSeating": [
			  {"instrument": "Harpsichord"},
			  {"instrument": "Violin"},
			  {"instrument": "Flute"},
			  {"instrument": "Oboe"},
			  {"instrument": "Trumpet"},
			  {"instrument": "Viola"},
			  {"instrument": "Double Bass"},
			  {"instrument": "Cello"}
			  ],
			"composers": [
				"Johann Sebastian Bach",
				"George Frideric Handel",
				"Jean-Baptiste Lully",
				"Claudio Monteverdi",
				"Antonio Vivaldi"
			]
		},
		{
			"name": "Classical",
			"orchestraSeating": [
			  {"instrument": "Violin"},
			  {"instrument": "Second Violin"},
			  {"instrument": "Viola"},
			  {"instrument": "Cello"},
			  {"instrument": "Flute"},
			  {"instrument": "Oboe"},
			  {"instrument": "Bassoon"},
			  {"instrument": "Timpani"},
{"instrument": "French Horn"},
{"instrument": "Trumpet"},
{"instrument": "Double Bass"}
			  ],
			"composers": [
				"Ludwig van Beethoven",
				"Joseph Haydn",
				"Wolfgang Amadeus Mozart"
			]
		},
		{
			"name": "Romantic",
			"orchestraSeating": [
			  {"instrument": "Violin"},
			  {"instrument": "Second Violin"},
			  {"instrument": "Viola"},
			  {"instrument": "Cello"},
			  {"instrument": "Piccolo"},
			  {"instrument": "Flute"},
			  {"instrument": "Oboe"},
			  {"instrument": "Clarinet"},
{"instrument": "Bassoon"},
			  {"instrument": "Harp"},
			  {"instrument": "Percussion"},
			  {"instrument": "Timpani"},
			  {"instrument": "French Horn"},
			  {"instrument": "Trumpet"},
			  {"instrument": "Trombone"},
			  {"instrument": "Tuba"},
{"instrument": "Double Bass"}

			  ],
			"composers": [
				"Hector Berlioz",
				"Georges Bizet",
				"Alexander Borodin",
				"Johannes Brahms",
				"Paul Dukas",
				"Antonín Dvorák",
				"Sir Edward Elgar",
				"Mikhail Ivanovich Glinka",
				"Edvard Grieg",
				"Gustav Holst",
				"Engelbert Humperdinck",
				"Johann Strauss Jr.",
				"Anatol Liadov",
				"Franz Liszt",
				"Gustav Mahler",
				"Felix Mendelssohn",
				"Modest Mussorgsky",
				"Jacques Offenbach",
				"Sergei Rachmaninoff",
				"Nikolai Rimsky-Korsakov",
				"Gioachino Rossini",
				"Camille Saint-Saëns",
				"Clara Schumann",
				"Robert Schumann",
				"John Philip Sousa",
				"Richard Strauss",
				"Piotr Ilyich Tchaikovsky",
				"Giuseppe Verdi",
				"Johan Wagenaar",
				"Richard Wagner",
				"Carl Maria von Weber"
			]
		},
		{
			"name": "Modern",
			"orchestraSeating": [
			  {"instrument": "Violin"},
			  {"instrument": "Second Violin"},
			  {"instrument": "Viola"},
			  {"instrument": "Cello"},
			  {"instrument": "Piccolo"},
			  {"instrument": "Flute"},
			  {"instrument": "Oboe"},
			  {"instrument": "Clarinet"},
{"instrument": "Bassoon"},
			  {"instrument": "Harp"},
			  {"instrument": "Piano"},
			  {"instrument": "Percussion"},
			  {"instrument": "Timpani"},
			  {"instrument": "French Horn"},
			  {"instrument": "Trumpet"},
			  {"instrument": "Trombone"},
			  {"instrument": "Tuba"},
{"instrument": "Double Bass"}
			  ],
			"composers": [
				"John Adams",
				"Leroy Anderson",
				"Béla Bartók",
				"Leonard Bernstein",
				"Victoria Bond",
				"Benjamin Britten",
				"Michael Colgrass",
				"Aaron Copland",
				"Claude Debussy",
				"Manuel De Falla",
				"Arcady Dubensky",
				"Malcolm Forsyth",
				"George Gershwin",
				"Ferde Grofé",
				"Jennifer Higdon",
				"Paul Hindemith",
				"Vincent Ho",
				"Charles Ives",
				"Scott Joplin",
				"Dmitri Kabalevsky",
				"Aram Khachaturian",
				"George Kleinsinger",
				"Zoltán Kodály",
				"John Lanchbery",
				"Jean Langlais",
				"José Pablo Moncayo",
				"Sergei Prokofiev",
				"Maurice Ravel",
				"Ottorino Respighi",
				"William Schuman",
				"Dmitri Shostakovich",
				"William Grant Still",
				"Igor Stravinsky",
				"Joan Tower",
				"Heitor Villa-Lobos",
				"John Williams"
			]
		}
	]
}
	{
	"families": [{
	"name": "strings",
	"colour": "blue",
	"instruments": [
	"Violin",
	"Viola",
	"Chello",
	"Double Bass",
	"Harp"
	]
	},
	{
	"name": "percussion",
	"colour": "green",
	"instruments": [
	"Bass Drum",
	"Castanets",
	"Chimes",
	"Conga Drum",
	"Cowbell",
	"Cymbals",
	"Glockenspiel",
	"Gong",
	"Guiro",
	"Snare Drum",
	"Tambourine",
	"Tenor Drum",
	"Timpani",
	"Triangle",
	"Wood Block",
	"Xylophone"
	]
	},
	{
	"name": "woodwinds",
	"colour": "yellow",
	"instruments": [
	"Flute",
	"Piccolo",
	"Oboe",
	"English Horn",
	"Clarinet",
	"Bass Clarinet",
	"Saxophone",
	"Bassoon",
	"Contrabassoon"
	]
	},
	{
	"name": "brass",
	"colour": "orange",
	"instruments": [
	"French Horn",
	"Trumpet",
	"Trombone",
	"Tuba"
	]
	},
	{
	"name": "keyboards",
	"colour": "redorange",
	"instruments": [
	"Harpsichord",
	"Piano",
	"Organ"
	]
	}
	]
	}
	<!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>
	{
	"periods": [{
	"name": "Baroque",
	"orchestraSeating": [
	{"instrument": "Harpsichord"},
	{"instrument": "Violin"},
	{"instrument": "Flute"},
	{"instrument": "Oboe"},
	{"instrument": "Trumpet"},
	{"instrument": "Viola"},
	{"instrument": "Double Bass"},
	{"instrument": "Cello"}
	],
	"composers": [
	"Johann Sebastian Bach",
	"George Frideric Handel",
	"Jean-Baptiste Lully",
	"Claudio Monteverdi",
	"Antonio Vivaldi"
	]
	},
	{
	"name": "Classical",
	"orchestraSeating": [
	{"instrument": "Violin"},
	{"instrument": "Second Violin"},
	{"instrument": "Viola"},
	{"instrument": "Cello"},
	{"instrument": "Flute"},
	{"instrument": "Oboe"},
	{"instrument": "Bassoon"},
	{"instrument": "Timpani"},
	{"instrument": "French Horn"},
	{"instrument": "Trumpet"},
	{"instrument": "Double Bass"}
	],
	"composers": [
	"Ludwig van Beethoven",
	"Joseph Haydn",
	"Wolfgang Amadeus Mozart"
	]
	},
	{
	"name": "Romantic",
	"orchestraSeating": [
	{"instrument": "Violin"},
	{"instrument": "Second Violin"},
	{"instrument": "Viola"},
	{"instrument": "Cello"},
	{"instrument": "Piccolo"},
	{"instrument": "Flute"},
	{"instrument": "Oboe"},
	{"instrument": "Clarinet"},
	{"instrument": "Bassoon"},
	{"instrument": "Harp"},
	{"instrument": "Percussion"},
	{"instrument": "Timpani"},
	{"instrument": "French Horn"},
	{"instrument": "Trumpet"},
	{"instrument": "Trombone"},
	{"instrument": "Tuba"},
	{"instrument": "Double Bass"}

	],
	"composers": [
	"Hector Berlioz",
	"Georges Bizet",
	"Alexander Borodin",
	"Johannes Brahms",
	"Paul Dukas",
	"Antonín Dvorák",
	"Sir Edward Elgar",
	"Mikhail Ivanovich Glinka",
	"Edvard Grieg",
	"Gustav Holst",
	"Engelbert Humperdinck",
	"Johann Strauss Jr.",
	"Anatol Liadov",
	"Franz Liszt",
	"Gustav Mahler",
	"Felix Mendelssohn",
	"Modest Mussorgsky",
	"Jacques Offenbach",
	"Sergei Rachmaninoff",
	"Nikolai Rimsky-Korsakov",
	"Gioachino Rossini",
	"Camille Saint-Saëns",
	"Clara Schumann",
	"Robert Schumann",
	"John Philip Sousa",
	"Richard Strauss",
	"Piotr Ilyich Tchaikovsky",
	"Giuseppe Verdi",
	"Johan Wagenaar",
	"Richard Wagner",
	"Carl Maria von Weber"
	]
	},
	{
	"name": "Modern",
	"orchestraSeating": [
	{"instrument": "Violin"},
	{"instrument": "Second Violin"},
	{"instrument": "Viola"},
	{"instrument": "Cello"},
	{"instrument": "Piccolo"},
	{"instrument": "Flute"},
	{"instrument": "Oboe"},
	{"instrument": "Clarinet"},
	{"instrument": "Bassoon"},
	{"instrument": "Harp"},
	{"instrument": "Piano"},
	{"instrument": "Percussion"},
	{"instrument": "Timpani"},
	{"instrument": "French Horn"},
	{"instrument": "Trumpet"},
	{"instrument": "Trombone"},
	{"instrument": "Tuba"},
	{"instrument": "Double Bass"}
	],
	"composers": [
	"John Adams",
	"Leroy Anderson",
	"Béla Bartók",
	"Leonard Bernstein",
	"Victoria Bond",
	"Benjamin Britten",
	"Michael Colgrass",
	"Aaron Copland",
	"Claude Debussy",
	"Manuel De Falla",
	"Arcady Dubensky",
	"Malcolm Forsyth",
	"George Gershwin",
	"Ferde Grofé",
	"Jennifer Higdon",
	"Paul Hindemith",
	"Vincent Ho",
	"Charles Ives",
	"Scott Joplin",
	"Dmitri Kabalevsky",
	"Aram Khachaturian",
	"George Kleinsinger",
	"Zoltán Kodály",
	"John Lanchbery",
	"Jean Langlais",
	"José Pablo Moncayo",
	"Sergei Prokofiev",
	"Maurice Ravel",
	"Ottorino Respighi",
	"William Schuman",
	"Dmitri Shostakovich",
	"William Grant Still",
	"Igor Stravinsky",
	"Joan Tower",
	"Heitor Villa-Lobos",
	"John Williams"
	]
	}
	]
	}