MW3000/README.md

## README.md

      
    Raw
  

              README.md
            
          
    D3 interactive histogram

Das Diagramm zeigt das Tweetaufkommen zum Hashtag #Landesverrat am 31. Juli 2015 von 9:30 Uhr bis 15:30 Uhr.
Ein Klick auf ein Portrait zeigt das Tweetaufkommen in Verbindung mit dem Namen des jeweiligen Akteurs.
Bildrechte


Demo-Schild #Landesverrat: Markus Winkler, CC BY 2.0
Portrait Heiko Maas: © Raimond Spekking, CC BY-SA 4.0 (via Wikimedia Commons)
Portrait Hans-Georg Maaßen: Bundesministerium des Innern/Sandy Thieme, CC BY-SA 3.0 DE (via Wikimedia Commons)
Portrait Harald Range: www.generalbundesanwalt.de


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
	display: block;
	margin: auto;
	fill: black;
	font-family: Verdena, Helvetica, sans-serif;
	font-size: 16px;
}

</style>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div><svg class="chart"></svg></div>

<div style="width: 320px;margin: 0 auto;padding-top: 10px">
	<img id="landesverrat" src="landesverrat.png" alt="Landesverrat" title="Landesverrat" width="76" height="76">
	<img id="maas" src="maas.png" alt="Heiko Maas" title="Heiko Maas" width="76" height="76">
	<img id="maassen" src="maassen.png" alt="Hans-Georg Maaßen" title="Hans-Georg Maaßen" width="76" height="76">
	<img id="range" src="range.png" alt="Harald Range" title="Harald Range" width="76" height="76">
</div>

<script>
// Data
var landesverrat = [1098, 1551, 1632, 1709, 1610, 1421, 1538, 1954, 1988, 1923, 1959, 1617];
var maas = [8, 56, 58, 144, 172, 104, 72, 109, 132, 85, 59, 45];
var maassen = [14, 33, 85, 78, 61, 54, 21, 32, 106, 66, 61, 39];
var range = [27, 69, 59, 41, 22, 23, 14, 36, 49, 144, 302, 97];

// Formatters for counts and times (converting numbers to Dates).
var formatTime = d3.time.format("%H:%M h"), formatMinutes = function(d) { return formatTime(new Date(d)); };

// Width and height
var margin = {top: 50, right: 0, bottom: 30, left: 0};
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

// Scales
var xScale = d3.scale.ordinal()
				.domain(d3.range(landesverrat.length))
				.rangeRoundBands([0, width], 0.05);

var yScale = d3.scale.linear()
				.domain([0, d3.max(landesverrat)])
				.range([0, height]);

var xAxisScale = d3.scale.linear()
				.domain([new Date(2015, 07, 31, 9, 30, 0), new Date(2015, 07, 31, 15, 30, 0)])
				.range([7, width - 7]);

// Axis
var xAxis = d3.svg.axis()
	.scale(xAxisScale)
	.orient("bottom")
	.tickFormat(formatMinutes)
	.tickValues([new Date(2015, 07, 31, 10, 0, 0), new Date(2015, 07, 31, 11, 0, 0), new Date(2015, 07, 31, 12, 0, 0), new Date(2015, 07, 31, 13, 0, 0), new Date(2015, 07, 31, 14, 0, 0), new Date(2015, 07, 31, 15, 0, 0)]);

// Create SVG element
var svg = d3.select(".chart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Create bars
svg.selectAll("rect")
	.data(landesverrat)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
			return xScale(i);
	})
	.attr("y", function(d) {
			return height - yScale(d);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) {
			return yScale(d);
	})
	.attr("fill", function(d) {
		return "rgb(49, 130, " + (d + 100) + ")";
	});

// Create labels
svg.selectAll("text")
	.data(landesverrat)
	.enter()
	.append("text")
	.text(function(d) {
			return d;
	})
	.attr("text-anchor", "middle")
	.attr("x", function(d, i) {
			return xScale(i) + xScale.rangeBand() / 2;
	})
	.attr("y", function(d) {
			return height - yScale(d) + 12;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "white");

// Add axis
svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

// Add legend
svg.append("text")
	.attr("class", "legend")
	.attr("transform", "translate(0,-20)")
	.text("Landesverrat");

// On click, update with new data
d3.select("#landesverrat")
	.on("click", function() {
		// Update graph
		update(landesverrat);

		// Update legend
		svg.select(".legend")
			.text("Landesverrat");
	});

// On click, update with new data
d3.select("#maas")
	.on("click", function() {
		// Update graph
		update(maas);

		// Update legend
		svg.select(".legend")
			.text("Landesverrat + Heiko Maas");
	});

// On click, update with new data
d3.select("#maassen")
	.on("click", function() {
		// Update graph
		update(maassen);

		// Update legend
		svg.select(".legend")
			.text("Landesverrat + Hans-Georg Maaßen");
	});

// On click, update with new data
d3.select("#range")
	.on("click", function() {
		// Update graph
		update(range);

		// Update legend
	 	svg.select(".legend")
			.text("Landesverrat + Harald Range");
	});

function update(dataset) {
		// Update scale domain
		// Recalibrate the scale domain, given the new max value in dataset
		yScale.domain([0, d3.max(dataset)]);

		// Update all rects
		svg.selectAll("rect")
			.data(dataset)
			.transition()
			.duration(5000)
			.attr("y", function(d) {
					return height - yScale(d);
			})
			.attr("height", function(d) {
					return yScale(d);
			})
			.attr("fill", function(d) {
				return "rgb(49, 130, " + (d + 100) + ")";
			});

		// Update all labels
		svg.selectAll("text")
			.data(dataset)
			.transition()
			.duration(5000)
			.text(function(d) {
					return d;
			})
			.attr("x", function(d, i) {
					return xScale(i) + xScale.rangeBand() / 2;
			})
			.attr("y", function(d) {
					return height - yScale(d) + 12;
			});
}
</script>

## landesverrat.png

      
    Raw
  

              landesverrat.png
            
          
## maas.png

      
    Raw
  

              maas.png
            
          
## maassen.png

      
    Raw
  

              maassen.png
            
          
## range.png

      
    Raw
  

              range.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	svg {
	display: block;
	margin: auto;
	fill: black;
	font-family: Verdena, Helvetica, sans-serif;
	font-size: 16px;
	}

	</style>

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<div><svg class="chart"></svg></div>

	<div style="width: 320px;margin: 0 auto;padding-top: 10px">
	<img id="landesverrat" src="landesverrat.png" alt="Landesverrat" title="Landesverrat" width="76" height="76">
	<img id="maas" src="maas.png" alt="Heiko Maas" title="Heiko Maas" width="76" height="76">
	<img id="maassen" src="maassen.png" alt="Hans-Georg Maaßen" title="Hans-Georg Maaßen" width="76" height="76">
	<img id="range" src="range.png" alt="Harald Range" title="Harald Range" width="76" height="76">
	</div>

	<script>
	// Data
	var landesverrat = [1098, 1551, 1632, 1709, 1610, 1421, 1538, 1954, 1988, 1923, 1959, 1617];
	var maas = [8, 56, 58, 144, 172, 104, 72, 109, 132, 85, 59, 45];
	var maassen = [14, 33, 85, 78, 61, 54, 21, 32, 106, 66, 61, 39];
	var range = [27, 69, 59, 41, 22, 23, 14, 36, 49, 144, 302, 97];

	// Formatters for counts and times (converting numbers to Dates).
	var formatTime = d3.time.format("%H:%M h"), formatMinutes = function(d) { return formatTime(new Date(d)); };

	// Width and height
	var margin = {top: 50, right: 0, bottom: 30, left: 0};
	var width = 600 - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

	// Scales
	var xScale = d3.scale.ordinal()
	.domain(d3.range(landesverrat.length))
	.rangeRoundBands([0, width], 0.05);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(landesverrat)])
	.range([0, height]);

	var xAxisScale = d3.scale.linear()
	.domain([new Date(2015, 07, 31, 9, 30, 0), new Date(2015, 07, 31, 15, 30, 0)])
	.range([7, width - 7]);

	// Axis
	var xAxis = d3.svg.axis()
	.scale(xAxisScale)
	.orient("bottom")
	.tickFormat(formatMinutes)
	.tickValues([new Date(2015, 07, 31, 10, 0, 0), new Date(2015, 07, 31, 11, 0, 0), new Date(2015, 07, 31, 12, 0, 0), new Date(2015, 07, 31, 13, 0, 0), new Date(2015, 07, 31, 14, 0, 0), new Date(2015, 07, 31, 15, 0, 0)]);

	// Create SVG element
	var svg = d3.select(".chart")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// Create bars
	svg.selectAll("rect")
	.data(landesverrat)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
	return xScale(i);
	})
	.attr("y", function(d) {
	return height - yScale(d);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d) {
	return yScale(d);
	})
	.attr("fill", function(d) {
	return "rgb(49, 130, " + (d + 100) + ")";
	});

	// Create labels
	svg.selectAll("text")
	.data(landesverrat)
	.enter()
	.append("text")
	.text(function(d) {
	return d;
	})
	.attr("text-anchor", "middle")
	.attr("x", function(d, i) {
	return xScale(i) + xScale.rangeBand() / 2;
	})
	.attr("y", function(d) {
	return height - yScale(d) + 12;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "white");

	// Add axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add legend
	svg.append("text")
	.attr("class", "legend")
	.attr("transform", "translate(0,-20)")
	.text("Landesverrat");

	// On click, update with new data
	d3.select("#landesverrat")
	.on("click", function() {
	// Update graph
	update(landesverrat);

	// Update legend
	svg.select(".legend")
	.text("Landesverrat");
	});

	// On click, update with new data
	d3.select("#maas")
	.on("click", function() {
	// Update graph
	update(maas);

	// Update legend
	svg.select(".legend")
	.text("Landesverrat + Heiko Maas");
	});

	// On click, update with new data
	d3.select("#maassen")
	.on("click", function() {
	// Update graph
	update(maassen);

	// Update legend
	svg.select(".legend")
	.text("Landesverrat + Hans-Georg Maaßen");
	});

	// On click, update with new data
	d3.select("#range")
	.on("click", function() {
	// Update graph
	update(range);

	// Update legend
	svg.select(".legend")
	.text("Landesverrat + Harald Range");
	});

	function update(dataset) {
	// Update scale domain
	// Recalibrate the scale domain, given the new max value in dataset
	yScale.domain([0, d3.max(dataset)]);

	// Update all rects
	svg.selectAll("rect")
	.data(dataset)
	.transition()
	.duration(5000)
	.attr("y", function(d) {
	return height - yScale(d);
	})
	.attr("height", function(d) {
	return yScale(d);
	})
	.attr("fill", function(d) {
	return "rgb(49, 130, " + (d + 100) + ")";
	});

	// Update all labels
	svg.selectAll("text")
	.data(dataset)
	.transition()
	.duration(5000)
	.text(function(d) {
	return d;
	})
	.attr("x", function(d, i) {
	return xScale(i) + xScale.rangeBand() / 2;
	})
	.attr("y", function(d) {
	return height - yScale(d) + 12;
	});
	}
	</script>