|
<!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> |
