Last active
October 22, 2016 07:43
-
-
Save ginseng666/1b950542b04bdf91d55a846b633bb77b to your computer and use it in GitHub Desktop.
Tutorial Balkendiagramm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <title>ein Balkendiagramm</title> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| var ergebnis = [ | |
| {"name":"Griss", "wert":18.94, "farbe":"#91678A"}, | |
| {"name":"Hofer", "wert":35.05, "farbe":"#356F7F"}, | |
| {"name":"Hundstorfer", "wert":11.28, "farbe":"#B7615A"}, | |
| {"name":"Khol", "wert":11.12, "farbe":"#000000"}, | |
| {"name":"Lugner", "wert":2.26, "farbe":"#E2E062"}, | |
| {"name":"Van der Bellen", "wert":21.34, "farbe":"#437C4F"}, | |
| ]; | |
| ergebnis.sort(function(a, b) { return a.wert < b.wert; }); | |
| var width = window.innerWidth * 0.95; | |
| var height = window.innerHeight * 0.95; | |
| var abstand = 10; | |
| var balken_breite = width / ergebnis.length - abstand; | |
| var max_hoehe = height; | |
| var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); | |
| svg.selectAll("rect") | |
| .data(ergebnis) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d, i) { return balken_breite * i + abstand * i; }) | |
| .attr("y", max_hoehe) | |
| .attr("width", balken_breite) | |
| .attr("height", 0) | |
| .style("fill", function(d) { return d.farbe; }) | |
| .on("mouseover", function(d, i) { | |
| svg.append("text") | |
| .attr("x", balken_breite * i + abstand * i + balken_breite / 2) | |
| .attr("y", max_hoehe - max_hoehe * d.wert / 100 - 5) | |
| .style("fill", d.farbe) | |
| .style("text-anchor", "middle") | |
| .style("font-size", "36px") | |
| .text(d.wert); | |
| }) | |
| .on("mouseout", function() { | |
| svg.selectAll("text").remove(); | |
| }); | |
| svg.selectAll("rect") | |
| .transition() | |
| .delay(function(d, i) { return 250 * i; }) | |
| .duration(1000) | |
| .attr("y", function(d) { return max_hoehe - max_hoehe * d.wert / 100; }) | |
| .attr("height", function(d) { return max_hoehe * d.wert / 100; }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Beispiel für ein Balkendiagramm (Daten zur Bundespräsidentenwahl 2016 in Österreich, erster Wahlgang)