Politik Halbkreis selber erstellen? Welche(s) Programm(iersprache)?
Ich bin sehr Politik interessiert und vor allem Sitzverteilungen und Koalitionen interessieren mich.
Ich versuche seit Ewigkeiten immer wieder so einen Halbkreis zu machen - siehe Bild (hier Österreich als Bsp.)
Habe es schon mit HTML und CSS probiert, bin aber an der Form gescheitert und um das alles (Code und Webseite) zu verbinden.
Weiß da jemand mehr bzw. kann mir jemand helfen und mich glücklich machen?
egal ob YT Video, oder sonst was.
Danke schonmal im Voraus
3 Antworten
Du kannst solche Kreis- und Halbkreis-Diagramme relativ einfach mit PowerPoint und Co. erstellen. Wenn du es jedoch selber programmieren möchtest, wäre das z.B. mithilfe eines <canvas> Element und JavaScript möglich. Es ginge sogar gänzlich ohne Programmierung mit HTML, CSS und darin mit der Eigenschaft clip-path →.
HTML:
<canvas id="diagram-1" width="400" height="200"></canvas>
JavaScript:
const diagram = (data, canvasId) => {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext('2d');
const radius = Math.min(canvas.width / 2, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height;
let startAngle = Math.PI;
data.forEach(item => {
const endAngle = startAngle + (item.share / 100) * Math.PI;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = item.color;
ctx.fill();
startAngle = endAngle;
});
ctx.beginPath();
ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI);
ctx.stroke();
}
const parties = [
// Shares in total = 100 %
{ name: 'SPD', share: 16, color: 'red' },
{ name: 'CDU', share: 31, color: 'black' },
{ name: 'Grüne', share: 14, color: 'green' },
{ name: 'FDP', share: 6, color: 'yellow' },
{ name: 'AfD', share: 15, color: 'blue' },
{ name: 'BSW', share: 5, color: 'darkred' },
{ name: 'Sonstige', share: 13, color: 'grey' }
];
diagram(parties, 'diagram-1');
LG medmonk
Und vielleicht auch die Sitze (und oder Anzahl) dann selber bestimmen können
Und die Namen der Parteien wären auch schön (so wie bspw. im Bild oben (mit der Sitzanzahl))
Ja, das kann man alles umsetzen. Du kannst das gezeigte Bespiel als Grundlage nehmen und halt durch weitere Funktionen erweiterst. Im Grunde sind es nur unterschiedliche Berechnungen samt Rückgabe von Elementen und Werten.
In der Variable „parties” stecken die jeweiligen Daten und diese auch anderweitig ausgeben kannst. Wenn du es selber programmieren möchtest, solltest du dich z.B. mich JavaScript auseinandersetzen und wenigsten die Grundlagen lernen.
const createListOfData = (objects) => {
const list = document.createElement('ul');
objects.forEach(obj => {
const listItem = document.createElement('li');
listItem.textContent = `${obj.name}: ${obj.share}%`;
listItem.style.color = obj.color;
list.appendChild(listItem);
});
return list;
}
document.body.appendChild(createListOfData(parties));
LG medmonk
Würde es was bringen, das Wikipedia Team zu fragen, wie genau das gemacht wurde? Bspw. mit der Email Adresse? : info-de@wikimedia.org
Email Adresse ist gedacht für allgemeine Anfragen
Quelle: https://de.wikipedia.org/wiki/Wikipedia:E-Mail-Kontakt
Oder hast du selber eine Idee, wie das genau gemacht wurde, oder ein anderer, der mir da weiterhelfen könnte
Eher nicht und man ggf. lediglich auf entsprechende Programmiersprachen verweist. Wie es umgesetzt wird resp. umgesetzt werden kann, habe ich dir ja bereits anhand von zwei Beispielen gezeigt. Es gibt darüber hinaus auch fertige Bibliotheken sowie Plugins für z.B. WordPress, die du nutzen könntest.
Im Grunde ist es lediglich eine Visualisierung von Datensätzen, die dann in Diagrammen, Charts oder ähnlichem ausgegeben werden. Welche Bibliothek ich ganz gut finde und bereits einige male verwendet habe, wäre Chart.js → . Die Bibliothek ist Open-Source, kostenlos, gut dokumentiert und lässt sich leicht einbinden.
Das schöne ist, dass viele Dinge bereits enthalten sind. Einerseits unterschiedliche Charts, Animationen und sich relativ einfach in eigene Projekte einbinden lassen.
Oder hast du selber eine Idee, wie das genau gemacht wurde, oder ein anderer, der mir da weiterhelfen könnte
Es gehört zu meinem Beruf, derlei Dinge umzusetzen. ;) Trotzdem das Rad nicht ständig neu erfinde, sondern auf gute, fertige Bibliotheken zurückgreife.
Microsoft --> Excel
Open Office --> Calc.
LibreOffice --> Calc.
Google --> Tabellen
WPS Office -->Spreadsheets
Eines davon.
Die schaue ich mir mal an, vielleicht kannst du mir gleich ein Paar Tipps geben.
Ich will die die Werte (Prozent oder Sitze) auch immer wieder verändern können
Die Grafik beruht auf einem Diagramm. Dieses Diagramm wiederum stütz sich auf eine Tabelle mit Zahlenwerten. Wird die Zahlentabelle verändert ändert sich automatisch auch das Diagramm.
Im Netz gibt es dazu genügend Tutorials. "Excel-Diagramme erstellen" einfach mal etwas umschauen.
Wenn du das längerfristig machen willst empfehle ich
z.B. eine Excel-Schulung . Online oder alt bewehrt an der VHS.
Grund- und erweiterte Kenntnisse in Microsoft Office (Word, Excel, PowerPoint) sind im beruflichen Umfeld immer von Vorteil.
Würde es was bringen, das Wikipedia Team zu fragen, wie genau das gemacht wurde? Bspw. mit der Email Adresse? : info-de@wikimedia.org
Email Adresse ist gedacht für allgemeine Anfragen
Quelle: https://de.wikipedia.org/wiki/Wikipedia:E-Mail-Kontakt
Oder hast du selber eine Idee, wie das genau gemacht wurde, oder ein anderer, der mir da weiterhelfen könnte
Dazu gibt es bestimmt Videos. Du müsstest nur mal herausfinden wie man diese Art von Diagramm nennt und wie das dann auf englisch heißt
Danke erstmal, hat mir schon sehr geholfen.
Aber hätte da noch ein paar Fragen.
Wie kann man für bspw. Deutschland die Sitze auf 630 Sitze anzeigen lassen?
Kann man sich mögliche Koalitionsoptionen "ausrechnen" lassen? Und die 50% besser anzeigen lassen (bezüglich Koalitionsoptionen)
Außerdem hätte ich die "Halbkreise" gerne mittig (im Browser dann)