Uno por uno, así votaron los diputados la Ley Garrahan

Advertisement

Advertisement

`
: `

Advertisement

`
}

${bloque}

`;
targetContainer.appendChild(card);
}

function createHemicicleSmall(nAfirmativo, nNegativo, nAbstencion, nAusente) {
const hemicycle = document.querySelector(‘.votos-diputados__hemiciclo.small’);
hemicycle.innerHTML = »; // Clear previous content.

const centerX = 300;
const baseY = 450;
const numberOfRows = 10;
// Array of seats per row (from outer to inner)
const seatsPerRow = [38, 36, 33, 30, 27, 24, 21, 19, 16, 13];
const verticalOffset = 2;
const totalSeats = seatsPerRow.reduce((a, b) => a + b, 0);
const totalVotes = nAfirmativo + nNegativo + nAbstencion + nAusente;

// Instead of percentage-based rounding, we’ll compute a per-row distribution
// using floor() and then distribute any remaining seats based on the remainders.
let rowSeatCounts = seatsPerRow.map((seatsInRow) => {
// Compute the exact (floating point) allocation for each category.
const exactAfirmativo = (nAfirmativo * seatsInRow) / totalSeats;
const exactNegativo = (nNegativo * seatsInRow) / totalSeats;
const exactAbstencion = (nAbstencion * seatsInRow) / totalSeats;
const exactAusente = (nAusente * seatsInRow) / totalSeats;
// Take floor values.
let rowAfirmativo = Math.floor(exactAfirmativo);
let rowNegativo = Math.floor(exactNegativo);
let rowAbstencion = Math.floor(exactAbstencion);
let rowAusente = Math.floor(exactAusente);
let assigned = rowAfirmativo + rowNegativo + rowAbstencion + rowAusente;
let diff = seatsInRow – assigned;
// Create an array of remainders along with category identifiers.
let remainders = [{
cat: «afirmativo»,
remainder: exactAfirmativo – rowAfirmativo
},
{
cat: «negativo»,
remainder: exactNegativo – rowNegativo
},
{
cat: «abstencion»,
remainder: exactAbstencion – rowAbstencion
},
{
cat: «ausente»,
remainder: exactAusente – rowAusente
}
];
// Sort descending by remainder.
remainders.sort((a, b) => b.remainder – a.remainder);
// Distribute the remaining seats one by one to the categories with the highest remainders.
while (diff > 0) {
for (let r of remainders) {
if (diff <= 0) break;
switch (r.cat) {
case «afirmativo»:
rowAfirmativo++;
break;
case «negativo»:
rowNegativo++;
break;
case «abstencion»:
rowAbstencion++;
break;
case «ausente»:
rowAusente++;
break;
}
diff–;
}
}
return {
afirmativo: rowAfirmativo,
negativo: rowNegativo,
abstencion: rowAbstencion,
ausente: rowAusente
};
});

// Now, using your inverted loop order (columns first, then rows)
const maxSeatsInRow = seatsPerRow[0]; // maximum seats in the outer row

// For each seat position (by column, then row), assign the color based on that row’s distribution.
for (let col = 0; col < maxSeatsInRow; col++) {
for (let row = 0; row < numberOfRows; row++) {
if (col < seatsPerRow[row]) { // only if this row has a seat at this column
const seatsInThisRow = seatsPerRow[row];
const radius = 170 – row * (16 – verticalOffset);
const angleRange = Math.PI; // semicircle
const angleStep = (seatsInThisRow > 1) ? angleRange / (seatsInThisRow – 1) : 0;
const angle = (Math.PI – angleRange) / 2 + col * angleStep;
const x = centerX + radius * Math.cos(angle);
const y = baseY – radius * Math.sin(angle);

// For this row, assign colors in order:
// First use available «afirmativo», then «negativo», then «abstencion», then «ausente»
let colorClass=»color-empty»;
if (rowSeatCounts[row].afirmativo > 0) {
colorClass=»color-afirmativo»;
rowSeatCounts[row].afirmativo–;
} else if (rowSeatCounts[row].negativo > 0) {
colorClass=»color-negativo»;
rowSeatCounts[row].negativo–;
} else if (rowSeatCounts[row].abstencion > 0) {
colorClass=»color-abstencion»;
rowSeatCounts[row].abstencion–;
} else if (rowSeatCounts[row].ausente > 0) {
colorClass=»color-ausente»;
rowSeatCounts[row].ausente–;
}
const seat = document.createElement(‘div’);
seat.classList.add(‘seat’, colorClass);
seat.style.left = `${x}px`;
seat.style.top = `${y}px`;
hemicycle.appendChild(seat);
}
}
}

// Set the legend text.
const leyText = nAfirmativo > nNegativo ? ‘Ley Aprobada’ : ‘Ley no aprobada’;
document.querySelector(‘#voto-summary’).innerHTML = `

Afirmativo: ${nAfirmativo} |
Negativo: ${nNegativo}
Abstención: ${nAbstencion} |
Ausente: ${nAusente}

` + ‘

‘ + leyText + ‘

‘;
}

// Creates the big hemiciclo visualization.
function createHemicicleBig(nAfirmativo, nNegativo, nAbstencion, nAusente) {
const hemicycle = document.querySelector(‘.votos-diputados__hemiciclo.big’);
hemicycle.innerHTML = »; // Clear previous content.

const centerX = 300;
const baseY = 450;
const numberOfRows = 10;
// Array of seats per row (outer to inner; total should be 257)
const seatsPerRow = [38, 36, 33, 30, 27, 24, 21, 19, 16, 13];
const verticalOffset = 2;
const totalSeats = seatsPerRow.reduce((a, b) => a + b, 0);

// Raw vote counts must sum to totalSeats (257)
const totalVotes = nAfirmativo + nNegativo + nAbstencion + nAusente;
if (totalVotes !== totalSeats) {
console.warn(«Total votes (» + totalVotes + «) do not equal total seats (» + totalSeats + «).»);
}

// — Per-Row Distribution Using Absolute Counts —
// For each row, compute the exact allocation for each vote category based on its fraction of the total seats.
let rowSeatCounts = seatsPerRow.map(seatsInRow => {
const exactA = (nAfirmativo / totalSeats) * seatsInRow;
const exactN = (nNegativo / totalSeats) * seatsInRow;
const exactAb = (nAbstencion / totalSeats) * seatsInRow;
const exactAu = (nAusente / totalSeats) * seatsInRow;

let rowA = Math.floor(exactA);
let rowN = Math.floor(exactN);
let rowAb = Math.floor(exactAb);
let rowAu = Math.floor(exactAu);

let assigned = rowA + rowN + rowAb + rowAu;
let diff = seatsInRow – assigned;

// Create an array of remainders for each category.
let remainders = [{
cat: «afirmativo»,
rem: exactA – rowA
},
{
cat: «negativo»,
rem: exactN – rowN
},
{
cat: «abstencion»,
rem: exactAb – rowAb
},
{
cat: «ausente»,
rem: exactAu – rowAu
}
];
// Sort the remainders in descending order.
remainders.sort((a, b) => b.rem – a.rem);

// Distribute any leftover seats one by one.
while (diff > 0) {
for (let r of remainders) {
if (diff <= 0) break;
switch (r.cat) {
case «afirmativo»:
rowA++;
break;
case «negativo»:
rowN++;
break;
case «abstencion»:
rowAb++;
break;
case «ausente»:
rowAu++;
break;
}
diff–;
}
}
return {
afirmativo: rowA,
negativo: rowN,
abstencion: rowAb,
ausente: rowAu
};
});

// — Global Correction —
// Sum the allocated seats for each category across all rows.
let globalA = rowSeatCounts.reduce((sum, row) => sum + row.afirmativo, 0);
let globalN = rowSeatCounts.reduce((sum, row) => sum + row.negativo, 0);
let globalAb = rowSeatCounts.reduce((sum, row) => sum + row.abstencion, 0);
let globalAu = rowSeatCounts.reduce((sum, row) => sum + row.ausente, 0);

// For each category, if the global total is less than the raw count, add the missing seats to the outer row (row 0).
if (globalA < nAfirmativo) {
rowSeatCounts[0].afirmativo += (nAfirmativo – globalA);
}
if (globalN < nNegativo) {
rowSeatCounts[0].negativo += (nNegativo – globalN);
}
if (globalAb < nAbstencion) {
rowSeatCounts[0].abstencion += (nAbstencion – globalAb);
}
if (globalAu < nAusente) {
rowSeatCounts[0].ausente += (nAusente – globalAu);
}

// — Seat Placement Using Inverted Loop Order —
const maxSeatsInRow = seatsPerRow[0];
for (let col = 0; col < maxSeatsInRow; col++) {
for (let row = 0; row < numberOfRows; row++) {
if (col < seatsPerRow[row]) { // Only process if this row has a seat at the current column.
const seatsInThisRow = seatsPerRow[row];
const radius = 300 – row * (30 – verticalOffset);
const angleRange = Math.PI; // semicircle
const angleStep = (seatsInThisRow > 1) ? angleRange / (seatsInThisRow – 1) : 0;
const angle = (Math.PI – angleRange) / 2 + col * angleStep;
const x = centerX + radius * Math.cos(angle);
const y = baseY – radius * Math.sin(angle);

// For the current row, assign the color in order: afirmativo, then negativo, then abstencion, then ausente.
let colorClass=»color-empty»;
if (rowSeatCounts[row].afirmativo > 0) {
colorClass=»color-afirmativo»;
rowSeatCounts[row].afirmativo–;
} else if (rowSeatCounts[row].negativo > 0) {
colorClass=»color-negativo»;
rowSeatCounts[row].negativo–;
} else if (rowSeatCounts[row].abstencion > 0) {
colorClass=»color-abstencion»;
rowSeatCounts[row].abstencion–;
} else if (rowSeatCounts[row].ausente > 0) {
colorClass=»color-ausente»;
rowSeatCounts[row].ausente–;
}

const seat = document.createElement(‘div’);
seat.classList.add(‘seat’, colorClass);
seat.style.left = `${x}px`;
seat.style.top = `${y}px`;
hemicycle.appendChild(seat);
}
}
}

/* // — Update Legend —
const leyText = nAfirmativo > nNegativo ? «Ley Aprobada» : «Ley no aprobada»;
const resultsText=»shshs»;
document.querySelector(«#voto-summary»).innerHTML = leyText + resultsText; */
}

// Go-to-top button functionality.
document.addEventListener(‘DOMContentLoaded’, function() {
const goToTopButton = document.querySelector(‘.votos-diputados__go-to-top’);
const targetElement = document.querySelector(‘.votos-diputados’);

goToTopButton.addEventListener(‘click’, function() {
targetElement.scrollIntoView({
behavior: ‘smooth’
});
});
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
goToTopButton.style.display = entry.isIntersecting ? ‘block’ : ‘none’;
});
}, {
root: null,
rootMargin: ‘0px’,
threshold: 0.1
});
observer.observe(targetElement);

// Attach the toggle listener to each vote button.
const toggleBtns = document.getElementsByClassName(‘votos-diputados__voto-btn’);
for (let i = 0; i < toggleBtns.length; i++) {
toggleBtns[i].addEventListener(‘click’, function() {
this.classList.toggle(‘active’);
const panel = this.nextElementSibling;
panel.style.maxHeight = panel.style.maxHeight ? null : ‘14000px’;
});
}

// Now simulate a click on each button from within DOMContentLoaded.
// This will trigger the listener and expand each panel on load.
for (let i = 0; i < toggleBtns.length; i++) {
toggleBtns[i].click();
}

});