<div style="overflow-x: auto; overflow-y: hidden;" id="graphdiv">
<svg id="graph" style="width: 63946px; height: 700px;"></svg>
</div>

<script src="https://d3js.org/d3.v4.js"></script>

<script type="text/javascript">

var colorMapping = {"Other" : "black", "svn": "red", "ita" : "purple", "fra": "lightblue", "deu" : "green", "che" : "gold", "aut" : "darkblue", "lie": "orange"}

jQuery(function (){
	jQuery("#graphdiv").scrollLeft(63946);

	jQuery("#page").css("max-width", "95%");
	jQuery("#colophon").css("max-width", "95%");

	var countries = Object.keys(CS_DATA[0]).filter(function (e){
		return e.startsWith("COUNT_");
	});

	//Add empty days
	var CS_DATA_NEW = [];
	var currDate = new Date(2017, 1, 10);
	var stopDate = new Date(2023, 10, 01);
	var csIndex = 0;
	var repIndex = 0;

	while(currDate < stopDate){
		if(repIndex < REPORTS.length && new Date(REPORTS[repIndex]["Datum"]).toDateString() == currDate.toDateString()){
			var report = REPORTS[repIndex++]["Bericht"];
		}
		else {
			var report = null;
		}

		if(csIndex < CS_DATA.length && new Date(CS_DATA[csIndex]["Date"]).toDateString() == currDate.toDateString()){
			CS_DATA_NEW.push(Object.assign(CS_DATA[csIndex++], {Report : report}));
		}
		else {
			CS_DATA_NEW.push({Day : currDate.toDateString(), Personen : 0, Report : report});
		}
		currDate.setDate(currDate.getDate() + 1);
	}
	
	var svg = d3.select("#graph"),
	    margin = {top: 50, right: 50, bottom: 100, left: 40},
	    width = parseInt(svg.style("width"), 10) - margin.left - margin.right,
	    height = parseInt(svg.style("height"), 10) - margin.top - margin.bottom;
	
	var x = d3.scaleBand()
		.rangeRound([0, 26 * CS_DATA_NEW.length])
		.paddingInner(0.1)
		.domain(CS_DATA_NEW.map(function(d) { return d["Day"]; }));

	var y = d3.scaleLinear()
		.rangeRound([height, 0])
		.domain([0, d3.max(CS_DATA_NEW, function(d) { return d["Gesamt"] * 1; })]);
	
	var z = d3.scaleOrdinal()
		.range(["black", "red", "orange", "purple", "lightblue", "green", "gold", "darkblue"])
		.domain(countries);
	
	var g = svg.append("g")
	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	
	g.append("g")
	    .attr("class", "axis axis--x")
	    .attr("transform", "translate(0," + height + ")")
	    .call(d3.axisBottom(x))
	    .selectAll("text")
	    	.attr("y", x.bandwidth() / 2)
	    	.attr("x", 7)
	    	.attr("transform", "rotate(45)")
	    	.attr("text-anchor", "start")
	    	.attr("fill", function (d){
				if(d.startsWith("Sun") || d.startsWith("Sat")){
					return "red";
				}
				else {
					return "blue";
				}
	    	})
	    	.attr("font-family", "open sans")
	    	.attr("font-size", 10);
	
	g.append("g")
	    .attr("class", "axis axis--y")
	    .call(d3.axisLeft(y));

	g.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(" + width + " ,0)")
    .call(d3.axisRight(y))

	// Balken
	g.append("g")
	  .attr("id", "ggraph")
	  .selectAll("g")
	  .data(d3.stack().keys(countries)(CS_DATA_NEW))
	  .enter().append("g")
	  	.attr("fill", function (d) { return z(d.key); })
	  .selectAll("rect")
	  .data(function(d) { return d; })
	  .enter().append("rect")
	  	.attr("data-comm", function(d) { return commWindow(d.data["Gemeinden"]); })
	    .attr("x", function(d) { return x(d.data["Day"]); })
	    .attr("y", function(d) { return isNaN(d[1])? 0 : y(d[1]); })
	    .attr("width", x.bandwidth())
	    .attr("height", function(d) { return isNaN(d[1])? 0:  y(d[0]) - y(d[1]); });

	// Anzahl Nutzer
    d3.selectAll("#ggraph").each(function (){
		d3.select(this.lastChild)
			.selectAll("text")
			.data(CS_DATA_NEW)
			.enter().append("text")
			.attr("x", function (d) {return x(d["Day"]) + (x.bandwidth() / 2);})
			.attr("y", function (d) {return isNaN(d["Gesamt"])? 0 : y(d["Gesamt"]) - 5;})
			.attr("width", x.bandwidth())
			.text(function (d) {return d["Personen"] != 0 ? d["Personen"] : "";})
			.attr("font-family", "sans-serif")
			.attr("text-anchor", "middle")
	    	.attr("font-size", 10)
    		.attr("fill", "olive")
    		.attr("font-weight", "bold");
    });
	
	// Berichte
	g.append("g")
	  .selectAll("g")
	  .data(CS_DATA_NEW)
	  .enter().append("rect")
	    .attr("x", function(d) {return x(d["Day"]); })
	    .attr("y", height - 200)
	    .attr("width", function (d){return d["Report"] == null? 0 : 1;})
	    .attr("height", 200);
		
	var texts = 
	g.append("g")
	  .attr("transform", "translate(0, " + (height - 205) + ")")
	  .selectAll("g")
	  .data(CS_DATA_NEW)
	  .enter().append("g")
	    .attr("transform", function(d) {return "translate(" + x(d["Day"]) + ",0)"; });

	texts.append("rect");
	    
	texts.append("text")
		.attr("y", 0)
		.attr("x", 0)
		.text(function (d){return d["Report"];})
		.attr("transform", "rotate(45)")
		.attr("font-family", "open sans")
		.attr("font-size", 11)
		.attr("text-anchor", "end");

	var i = 0;
	texts.selectAll("text").each (function (d){
		CS_DATA_NEW[i++].bb = this.getBBox();
	});

	texts.selectAll("rect")
		.attr("x", function(d) {return d.bb.x;})
		.attr("y", function(d) {return d.bb.y;})
		.attr("width", function(d) {return d.bb.width;})
		.attr("height", function(d) {return d.bb.height;})
		.style("fill", "white")
		.attr("transform", "rotate(45)");


	//Legende
	var legend = g.append("g")
	    .attr("font-family", "sans-serif")
	    .attr("font-size", 10)
	    .attr("text-anchor", "end")
	    .attr("id", "glegend")
	    .attr("transform", "translate(" + 63746 + ",0)")
	  .selectAll("g")
	  .data(countries.slice().reverse())
	  .enter().append("g")
	    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
	
	legend.append("rect")
	    .attr("x", 50)
	    .attr("y", - 30)
	    .attr("width", 19)
	    .attr("height", 19)
	    .attr("fill", function (d){ 
			if(d.startsWith("_____"))
				return "white";
		    return z(d);});
	
	legend.append("text")
	    .attr("x", 40)
	    .attr("y", -20.5)
	    .attr("dy", "0.32em")
	    .text(function(d) { return d.substring(6); });

    var le = d3.select("#glegend").append("g");

    le.append("text")
    	.text("1 - n")
    	.attr("x", 60)
    	.attr("y", (countries.length + 1) * 19 - 30)
    	.attr("dy", "0.32em")
    	.attr("font-weight", "bold")
    	.attr("font-size", 12)
    	.attr("fill", "olive")
    	.attr("text-anchor", "middle")
    
    le.append("text")
    	.text("Number of distinct users")
    	.attr("x", 40)
    	.attr("y", (countries.length + 1) * 19 - 30)
    	.attr("dy", "0.32em");

    jQuery("rect").qtip({
		"content" : {
			"attr" : "data-comm",
			title: {
				button: true // Close button
			}
		},
		"show": {
			event: "mousedown",
			solo: true
		},
		"events": {
			render:	function(event, api) {
				api.elements.target.bind('click', function() {
					api.set('hide.event', false);
				});
			}
		},
		"position" : {
	        target: 'mouse',
	        adjust: { mouse: false }
	    }
    });
});

function commWindow (str){
	if(!str)
		return "";
	
	var comms = str.split(",").map(x => x.split(":"));
	var sum = 0;
	
	var result = "<div><table style='border: 1px solid black; border-collapse: separate;'>";
	for (var i = 0; i < comms.length; i++){
		var col = colorMapping[comms[i][1]];
		result += "<tr style='background: " + col + "; padding: 3px; color: " + (col == "gold"? "black": "white") + ";'><td style='padding: 3px;'>" + comms[i][0] + "</td><td style='padding: 3px;'>" + comms[i][2] + "</td></tr>";
		sum += (comms[i][2] * 1);
	}

	result += "<tr><td style='border-top: 1px solid black; padding: 3px;'></td><td style='border-top: 1px solid black; padding: 3px;'>" + sum + "</td></tr>";
		
	return result + "</table></div>";
}
</script>

<br />
<br />

Total entries: 33179<br />
<br />
<div class="entry-content">
	<ul>
	<li>aut: 3456</li><li>che: 4484</li><li>deu: 6235</li><li>fra: 360</li><li>ita: 17737</li><li>lie: 290</li><li>svn: 617</li>	</ul>
Number of informants: 2475</div>
				<script type="text/javascript">
					jQuery(document).ready(function() {
						addBiblioQTips(jQuery(".entry-content"));
					});
				</script> 
							<script type="text/javascript">
					jQuery(document).ready(function() {
						addBiblioQTips(jQuery(".entry-content"));
					});
				</script> 
			{"id":4629,"date":"2017-03-24T15:45:17","date_gmt":"2017-03-24T13:45:17","guid":{"rendered":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/?page_id=4629"},"modified":"2021-08-06T15:03:51","modified_gmt":"2021-08-06T13:03:51","slug":"csgraph","status":"publish","type":"page","link":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/?page_id=4629&db=232","title":{"rendered":"Live Statistik der Crowdsourcing-Aktivit\u00e4t"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":187,"menu_order":919,"comment_status":"closed","ping_status":"closed","template":"template_empty.php","meta":{"_acf_changed":false,"footnotes":""},"coauthors":[],"class_list":["post-4629","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/pages\/4629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4629"}],"version-history":[{"count":1,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/pages\/4629\/revisions"}],"predecessor-version":[{"id":12486,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/pages\/4629\/revisions\/12486"}],"up":[{"embeddable":true,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=\/wp\/v2\/pages\/187"}],"wp:attachment":[{"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4629"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.verba-alpina.gwi.uni-muenchen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcoauthors&post=4629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}