[PARSEHTML]
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
.parliament_holder > * {
width: 100%;
}
.parliament_faction:hover > circle {
filter: brightness(0.7);
transition: all 0.35s ease;
}
.parliament_faction_name {
fill: #00CD00;
opacity: 0;
}
.parliament_faction:hover > .parliament_faction_name {
opacity: 0.5;
transition: all 0.35s ease;
}
</style>
<script>
function drawParliament(composition, party_data, script_tag) {
// console.log(composition);
// console.log(party_data);
// console.log(script_tag);
// Calculate parameters
let total_seats = 0;
for (let party of Object.keys(composition)) {
total_seats += composition[party];
}
console.log(total_seats);
let SEAT_RADIUS = 10;
let CIRCLE_DIFFERENCE = 3;
let BENCH_SKIP = 25;
let EXTRA_NUMBER_SPACE = 70;
let PARTY_LEGEND = 20;
let PARTY_LEGEND_SKIP = 10;
let total_rows = 0;
let total_placed_seats = 0;
while (total_placed_seats < total_seats) {
total_rows++;
total_placed_seats = 0;
EXTRA_NUMBER_SPACE += Math.PI / 10;
let total_bench_skip = (total_rows - 1) * BENCH_SKIP;
let smallest_radius = total_bench_skip / (CIRCLE_DIFFERENCE - 1) + EXTRA_NUMBER_SPACE;
for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
total_placed_seats += Math.ceil(Math.PI * (smallest_radius + current_bench * BENCH_SKIP) / BENCH_SKIP);
}
// console.log(total_rows + ": " + total_placed_seats);
}
let total_bench_skip = (total_rows - 1) * BENCH_SKIP;
let smallest_radius = total_bench_skip / (CIRCLE_DIFFERENCE - 1) + EXTRA_NUMBER_SPACE;
let hskip_l = BENCH_SKIP;
let hskip_r = 1e18;
for (let iter = 0; iter < 100; iter += 1) {
let hskip_mid = (hskip_l + hskip_r) / 2;
total_placed_seats = 0;
for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
total_placed_seats += Math.ceil(Math.PI * (smallest_radius + current_bench * BENCH_SKIP) / hskip_mid);
}
// console.log(hskip_mid + " == " + total_placed_seats);
if (total_placed_seats < total_seats) {
hskip_r = hskip_mid;
}
else {
hskip_l = hskip_mid;
}
}
let total_w = 2 * EXTRA_NUMBER_SPACE + 2 * BENCH_SKIP * (total_rows - 1) * CIRCLE_DIFFERENCE / (CIRCLE_DIFFERENCE - 1) + 2 * SEAT_RADIUS;
let total_h = EXTRA_NUMBER_SPACE + BENCH_SKIP * (total_rows - 1) * CIRCLE_DIFFERENCE / (CIRCLE_DIFFERENCE - 1) + 2 * SEAT_RADIUS;
let draw = SVG().addTo(script_tag);
draw.viewbox(0, 0, total_w, total_h + 2 * PARTY_LEGEND_SKIP + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * Object.keys(composition).length);
let circles = []
for (let current_bench = 0; current_bench < total_rows; current_bench += 1) {
let current_radius = smallest_radius + current_bench * BENCH_SKIP;
let bench_seats = Math.ceil(Math.PI * current_radius / hskip_l);
if (bench_seats == 1) {
let circle = draw.circle(SEAT_RADIUS);
circle.move(total_w / 2.0 - SEAT_RADIUS, total_h - current_radius - 2 * SEAT_RADIUS);
circles.push([circle, current_bench, Math.PI / 2.0]);
}
else {
for (let idx = 0; idx < bench_seats; idx++) {
let angle_loc = Math.PI * idx / (bench_seats - 1);
let circle = draw.circle(2 * SEAT_RADIUS);
circle.move(total_w / 2.0 - SEAT_RADIUS + current_radius * Math.cos(angle_loc), total_h - current_radius * Math.sin(angle_loc) - 2 * SEAT_RADIUS);
circles.push([circle, current_bench, angle_loc]);
}
}
}
circles.sort(function (a, b) {
if (a[2] < b[2] - 1e-6) { return 1; }
if (a[2] > b[2] + 1e-6) { return -1; }
if (a[1] < b[1]) { return -1; }
if (a[1] > b[1]) { return 1; }
return 0;
});
// console.log(circles);
let parties = [];
for (let party of Object.keys(composition)) {
parties.push([party, party_data[party].spectrum]);
}
parties.sort(function (a, b) {
if (a[1] < b[1]) { return -1; }
if (a[1] > b[1]) { return 1; }
return 0;
});
console.log(parties);
total_placed_seats = 0;
let parties_drawn = 0;
for (let party of parties) {
let group = draw.group();
group.addClass('parliament_faction');
for (let idx = 0; idx < composition[party[0]]; idx += 1) {
circles[total_placed_seats][0].fill(party_data[party[0]].color);
group.add(circles[total_placed_seats][0]);
total_placed_seats += 1;
}
let title = draw.element('title').words(party_data[party[0]].name);
group.add(title);
let rect = draw.rect(PARTY_LEGEND * 0.8, PARTY_LEGEND * 0.8);
rect.fill(party_data[party[0]].color);
rect.stroke({ color: '#000000', width: PARTY_LEGEND * 0.1 });
rect.x(PARTY_LEGEND_SKIP);
rect.y(total_h + 2 * PARTY_LEGEND_SKIP + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
group.add(rect);
let party_name = draw.text(party_data[party[0]].name);
party_name.css('font-family', 'Bahnschrift');
party_name.css('font-size', PARTY_LEGEND);
party_name.css('margin', '0');
party_name.y(total_h + 2 * PARTY_LEGEND_SKIP + PARTY_LEGEND * 0.9 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
party_name.x(PARTY_LEGEND + PARTY_LEGEND_SKIP * 2);
party_name.children()[0].dy(0)
group.add(party_name);
let party_places = draw.text(composition[party[0]] + "");
party_places.css('font-family', 'Bahnschrift');
party_places.css('font-size', PARTY_LEGEND);
party_places.css('margin', '0');
party_places.css('text-anchor', 'end');
party_places.y(total_h + 2 * PARTY_LEGEND_SKIP + PARTY_LEGEND * 0.9 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
party_places.x(total_w - PARTY_LEGEND_SKIP - party_places.bbox().width);
party_places.children()[0].dy(0)
group.add(party_places);
/* let underscore = draw.line(party_name.bbox().x2 + PARTY_LEGEND_SKIP / 2.0, party_name.bbox().y2, party_places.bbox().x - PARTY_LEGEND_SKIP / 2.0, party_name.bbox().y2);
underscore.stroke({ color: '#000000', width: PARTY_LEGEND * 0.05 });
group.add(underscore); */
let bounding_rect = draw.rect(total_w - PARTY_LEGEND_SKIP * 1.6, PARTY_LEGEND + PARTY_LEGEND_SKIP * 0.4);
bounding_rect.x(PARTY_LEGEND_SKIP * 0.8);
bounding_rect.y(total_h + 2 * PARTY_LEGEND_SKIP * 0.8 + (PARTY_LEGEND + PARTY_LEGEND_SKIP) * parties_drawn);
bounding_rect.addClass('parliament_faction_name');
group.add(bounding_rect);
bounding_rect.back();
parties_drawn += 1;
}
let text = draw.text(total_seats + "");
text.css('font-family', 'Ubuntu');
text.css('font-size', 2.0 * (smallest_radius - SEAT_RADIUS) / (total_seats + "").length);
text.css('margin', '0');
text.css('text-anchor', 'middle');
text.cy(total_h - smallest_radius * 1.0 / 3.0);
text.cx(total_w / 2);
text.children()[0].dy(0)
}
</script>
<div style="display: flex; flex-direction: row; justify-content: center" class="parliament_holder">
<script id="current_script">
current_script = document.currentScript.parentElement;
if (!current_script.classList.contains('parliament_holder')) {
if (document.getElementsByClassName("xfPreview").length > 0) {
current_script = document.getElementsByClassName("xfPreview")[0].getElementsByClassName("parliament_holder")[0];
}
}
setTimeout(drawParliament,
100,
{
"CDU-Antonio": 116,
"CDU-Palpatine": 117,
"CDU-Romanoff": 117,
"Volt-Aushtraf": 175,
"Volt-Герман": 175
},
{
"CDU-Antonio": {
"color": "#c4181b",
"name": "Antonio",
"spectrum": -5
},
"CDU-Palpatine": {
"color": "#c4181b",
"name": "Palpatine",
"spectrum": -5
},
"CDU-Romanoff": {
"color": "#c4181b",
"name": "Romanoff",
"spectrum": -5
},
"Volt-Aushtraf": {
"color": "#4b7be5",
"name": "Konstantin Aushtraf",
"spectrum": 5
},
"Volt-Герман": {
"color": "#4b7be5",
"name": "Герман фон Эльбарзен",
"spectrum": 5
}
},
current_script
);
</script>
</div>
[/PARSEHTML]