Skip to content

Instantly share code, notes, and snippets.

@MW3000
Last active February 20, 2016 18:45
Show Gist options
  • Save MW3000/3f34dd7fbe3197ce1fa6 to your computer and use it in GitHub Desktop.
Save MW3000/3f34dd7fbe3197ce1fa6 to your computer and use it in GitHub Desktop.
D3 interactive histogram

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

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment