scripts-local.html

{% include_relative scripts-listeners.html %}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
	     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
	     crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>


<script>
// vim: ts=3


//////////////////////////////
//
// fillInCensusData --
//

function fillInCensusData(data) {
	let workCount = 0;
	let concertCount = 0;
	let personCount = 0;
	let composerCount = 0;

	for (let i=0; i<EMC.METADATA.works.length; i++) {
		let count = EMC.METADATA.works[i]["Standardized Name of Work"];
		workCount++;
	}

	for (let i=0; i<EMC.METADATA.concerts.length; i++) {
		let count = EMC.METADATA.concerts[i]["ID"];
		concertCount++;
	}

	for (let i=0; i<EMC.METADATA.people.length; i++) {
		let count = EMC.METADATA.people[i]["ID"];
		personCount++;
	}

	for (let i=0; i<EMC.METADATA.composers.length; i++) {
		let count = EMC.METADATA.composers[i]["ID"];
		composerCount++;
	}


	let workElement = document.querySelector("#work-count");
	if (workElement) {
		workElement.innerHTML = workCount;
	}

	let concertElement = document.querySelector("#concert-count");
	if (concertElement) {
		concertElement.innerHTML = concertCount;
	}

	let personElement = document.querySelector("#person-count");
	if (personElement) {
		personElement.innerHTML = personCount;
	}

	let composerElement = document.querySelector("#composer-count");
	if (composerElement) {
		composerElement.innerHTML = composerCount;
	}

}



//////////////////////////////
//
// displayYearsPlot --
//

function displayYearsPlot(data) {
	let element = document.querySelector("#concerts-by-year");
	if (!element) {
		console.error("ERROR: Cannot find #concerts-by-year");
		return;
	}

	let threshold = element.dataset.threshold;
	if (threshold < 1) {
		threshold = 10;
	} else if (threshold > 50) {
		threshold = 50;
	}

	let yearData = prepareYearData(data.statistics);

	let plotInfo = {
		"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
		"config": {
			"view": {
				"width": 700,
				"height": 250
			}
		},
		"data": {
			"values": yearData
		},
		"mark": "bar",
		"encoding": {
			"x": {
				"field": "Concert Years",
				"type": "ordinal",
				"title": "Years",
				"axis": {
					"tickMinStep": 5,
					"labelFontSize": 14,
					"titleFontSize": 16
				}
			},
			"y": {
				"field": "Number of Concerts",
				"type": "quantitative",
				"title": "Number of Concerts",
				"axis": {
					"labelFontSize": 14,
					"titleFontSize": 16
				}
			},
			"color": {
				"field": "Concert Years",
				"type": "quantitative",
				"scale": {
					"scheme": "viridis",
					"interpolate": "light-blue-green"
				},
				"legend": null
			}
		},
		"title": {
			"text": "Number of Concerts per Year",
			"fontSize": 18
		}, 
	};

	vegaEmbed('#concerts-by-year', plotInfo);
}



//////////////////////////////
//
// prepareYearData -- Extract number of concerts for each year, adding
//     entries for years in which there are no concert notes.  This function
//     is for use to generate a vega-lite bar chart that functions like a yearly
//     histogram chart.
//

function prepareYearData(input) {
	let min = 100000;
	let max = -1;
	let counts = {};
	for (let i=0; i<input.length; i++) {
		let year = parseInt(input[i]["Concert Years"]);
		let count = parseInt(input[i]["Number of Concerts"]);
		if (min > year) {
			min = year;
		}
		if (max < year) {
			max = year;
		}
		counts[year] = count;
	}
	let output = [];
	for (let i=min; i<=max; i++) {
		let obj = {
			"Concert Years": i,
			"Number of Concerts": counts[i] || 0
		}
		output.push(obj);
	}
	return output;
}



let concerts = {% include metadata/concerts.json %};
concerts.ID  = "ID";
concerts.title = "Program Title";
concerts.ensemble = "Ensemble/Larger Org.";
concerts.location = "Location Coordinates";
concerts.date = "Date";
concerts.year = "Year";
concerts.month = "Month";
concerts.day = "Day";
let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];


for (let i=0; i<concerts.length; i++){
	console.warn("concerts", concerts[i][concerts.ID]);
}

let OptsDE = {
	name: "map",
	view: [50, 12],
	zoom: 4,
	zoomMin: 4,
	zoomMax: 19
};

let OptsUS = {
	name: "map2",
	view: [37, -95],
	zoom: 3,
	zoomMin: 3,
	zoomMax: 19
};


//////////////////////////////
//
// doMapSetups -- Set up all maps on the page
//

function doMapSetups() {
	doMapSetup(OptsDE);
	doMapSetup(OptsUS);
}


//////////////////////////////
//
// doMapSetup -- Add a particular map to the page.
//

function doMapSetup(opts) {
	if (typeof opts === "undefined") {
		console.error("doMapSetups input parameter is undefined");
		return;
	}
	if (typeof opts.name === "undefined") {
		console.error("doMapSetups name parameter is undefined");
		return;
	}
	if (typeof opts.view === "undefined") {
		console.error("view option is not specified");
		return;
	}
	if (typeof opts.zoom === "undefined") {
		console.warn("zoom option is not specified, setting to 4");
		opts.zoom = 4;
	}
	if (typeof opts.zoomMin === "undefined") {
		console.warn("zoomMin option is not specified, setting to zoom");
		opts.zoomMin = opts.zoom;
		return;
	}
	if (typeof opts.zoomMax === "undefined") {
		console.warn("zoomMax option is not specified, setting to 19");
		opts.zoomMax = 19;
	}

	let map = L.map(opts.name).setView(opts.view, opts.zoom);
	map.options.minZoom = opts.zoomMin;

	let mapImage = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
	let attribution = "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
	L.tileLayer(mapImage,
		{
			maxZoom: opts.zoomMax,
			attribution: attribution
		}
	).addTo(map);

	for (let i=0; i<concerts.length; i++) {
		let date = prepareDate(concerts[i][concerts.date]);
		let concertMonth = concerts[i][concerts.month];
		let concertMonthstring = monthNames[concertMonth-1];
		let concertYear = concerts[i][concerts.year];
		let concertDay = concerts[i][concerts.day];
		let processeddate = "";
		if (concertMonth && concertDay) {
			processeddate += `${date}`;
		} else if (concertMonth) {
			processeddate += `${concertMonthstring} ${concertYear}`;
		} else if (concertYear){
			processeddate += `${concertYear}`;
		}
		let loc = "";
		if (concerts[i][concerts.location]) {
			loc = concerts[i][concerts.location].split(/,?\s+,?/);
		}	
		if (concerts[i][concerts.title]) {
			name = concerts[i][concerts.title];
		} else {
			name = concerts[i][concerts.ensemble];
		}
		if (loc && name) {
			L.marker(loc)
				.addTo(map)
				.bindPopup(`${processeddate}: ${name}`);
		}
	}
}


//////////////////////////////
//
// prepareDate -- convert YYYY-M-D to D MMM YYYY
//

function prepareDate(inputDateString) {
	if (!inputDateString) {
		return "";
	}
	let parsedDate = new Date(inputDateString.replace(/-/g, "/"));
	let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	let day = parsedDate.getDate();
	let month = monthNames[parsedDate.getMonth()];
	let year = parsedDate.getFullYear();
	let formattedDate = "";
	if (day && month && year) {
		formattedDate = `${parsedDate.getDate()} ${monthNames[parsedDate.getMonth()]} ${parsedDate.getFullYear()}`;
	} else if (month && year) {
		formattedDate = `${monthNames[parsedDate.getMonth()]} ${parsedDate.getFullYear()}`;
	} else {
		formattedDate = `${parsedDate.getFullYear()}`;
	}
	return formattedDate;
}

</script>