Skip to content

Commit

Permalink
UI changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@JamesRv21
JamesRv21 committed Apr 10, 2024
1 parent afd7d36 commit 42069dd
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 22 deletions.
148 changes: 127 additions & 21 deletions pabutools/visualisation/templates/mes_round_analysis_template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@
.chord-wrapper {
height: 100%;
}

.sankey-wrapper {
height: 100%;
padding-top: 80px;
}

#myChordChart {
height: 100%;
Expand All @@ -73,14 +78,65 @@
text-align: center;
}

header, nav {
z-index: 9999;
}


main {
padding-top: 100px;
padding-top: 100px; /* Adjust based on the actual height of your header */
}

.info-button {
margin-top: 25px;
/* padding-top: 100px; */
}

.text-container {
max-height: 50px;
overflow: hidden;
}

.text-expanded {
max-height: none;
}

#toggleButton {
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
padding: 5px 15px; /* Smaller padding */
font-size: 14px; /* Smaller font size */
}

#toggleButton:hover {
background-color: #0056b3;
}

#toggleButtonChord {
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
padding: 5px 15px; /* Smaller padding */
font-size: 14px; /* Smaller font size */
}

#toggleButtonChord:hover {
background-color: #0056b3;
}

.button-container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically if needed */
margin-top: 10px; /* Add space between the text and the button */
}
</style>
<script>
window.addEventListener('load', (event) => {
Expand Down Expand Up @@ -129,7 +185,6 @@ <h1>
<p>
This is the round-by-round explanations for the results of this participatory budgeting election decided by the Method of Equal Shares (MES). For each round,
we provide visualisations to help you understand why each particular project was selected or not. The visualisations include effective vote counts, voter flows, and pie charts.
If you hover over the 'i' buttons, you will see more detailed explanations of each visualisation.
</p>
</div>
</div>
Expand Down Expand Up @@ -206,7 +261,6 @@ <h2 class="featurette-heading">Effective Vote Count</h2>
</div>
<div class="col-7" style="min-height: 400px;">
<div id="BarChart" style="height: 100%; width: 100%;">
<button class = "info-button" style = "position: absolute; z-index: 2000; right: 50px;" data-tippy-content= "<b>Effective Vote Count:</b><br> For a vote to count towards a project, the person who made the vote must have some of their budget remaining so they can contribute towards the project. Say Project A has 20 voters, but 5 of those 20 have already spent their entire budget on previous projects, the effective vote count will be 15. This graph shows the effective vote counts for all projects.">i</button>
</div>
</div>
</div>
Expand All @@ -221,31 +275,45 @@ <h5 style="text-align: center; font-weight: bold;">Voter Flows</h5>
<p>The following graphs demonstrate how voters of '<span class="project_name"></span>' voted for other projects, highlighting where funding may be lost for certain projects in future rounds as voters funds have been allocated to '<span class="project_name"></span>'. </p>
</div>
<div class="row">
<div class="col-5" style="display: grid;">
<div class="col-5 sankey-wrapper">
<div class="d-flex align-items-center justify-content-center">
<button class = "info-button" style = "position: absolute; z-index: 2000; left: 10px; top: 30px" data-tippy-content="<b>Sankey Diagram</b><br>The provided Sankey diagram offers a visual representation of voting patterns among a set of participants with the option to vote for multiple projects. The individual bands flowing from this singular left bar to various bars on the right-hand side illustrate the distribution of voters who have also voted for other projects. Each band's thickness corresponds to the number of voters who voted for both the project on the left and the project on the right. The graph is designed to show the overlap in voting behaviour, making it clear which projects share a common voter base with the project displayed on the right-hand side.">i</button>
<div id="SankeyChart">

</div>
</div>
<div id="textContainer" class="text-container">
<p id="text" class="text">
The provided Sankey diagram offers a visual representation of voting patterns among a set of participants with the option to vote for multiple projects. The individual bands flowing from this singular left bar to various bars on the right-hand side illustrate the distribution of voters who have also voted for other projects. Each band's thickness corresponds to the number of voters who voted for both the project on the left and the project on the right. The graph is designed to show the overlap in voting behaviour, making it clear which projects share a common voter base with the project displayed on the right-hand side.
</p>
</div>
<div class="button-container">
<button id="toggleButton" onclick="toggleText()">Show More</button>
</div>
</div>

<div class="col-2"></div>
<div class="col-5 chord-wrapper">
<button class = "info-button" style = "position: absolute; z-index: 2000; right: 10px; top: 30px" data-tippy-content="<b>Chord Diagram:</b><br> The chord diagram shows the voter flows between the project selected this round. Due to the nature of MES, if a project is selected, the voters who voted for it will have a reduction in their budget. Therefore, showing how voters’ voted shows which other projects will have had their support cut.">i</button>
<div id='ChordChart'></div>

<div id="textContainerChord" class="text-container">
<p id="text" class="text">
The chord diagram shows the voter flows between the project selected this round. Due to the nature of MES, if a project is selected, the voters who voted for it will have a reduction in their budget. Therefore, showing how voters’ voted shows which other projects will have had their support cut.
</p>
</div>
<div class="button-container">
<button id="toggleButtonChord" onclick="toggleTextChord()">Show More</button>
</div>
</div>
</div>
<div class="spacer-1"></div>
<hr>
<div class="spacer-1"></div>

<div class="row" style="display: grid;">
<h5 style="text-align: center; font-weight: bold;">Proportion of voters from other projects</h5>
<p>The pie charts represent how voters of other projects voted for '<span class="project_name"></span>', highlighting how the average in voters budget is affected for each project. </p>
</div>
<!-- Pie Charts Carousels -->
<div id="secondCarousel" style="height: 500px; width: 100%;" class="carousel slide" data-ride="carousel" data-interval="false">
<button class = "info-button" style = "position: absolute; z-index: 2000; right: 30px; top: 30px" data-tippy-content="<b>Pie Chart:</b><br> TODO">i</button>

<div id="pieChartsCarousel" class="carousel-inner" style="height: 500px; width: calc(100% - 40px);" >

<div id="pieChartsCarousel" class="carousel-inner" style="height: 500px; width: 100%; padding: 0px" >
</div>

<a class="carousel-control-prev" href="#secondCarousel" role="button" data-slide="prev">
Expand All @@ -268,14 +336,19 @@ <h5 style="text-align: center; font-weight: bold;">Voter Flows</h5>
<div class="row featurette">
<div class="col-5">
<h2 class="featurette-heading">Reduced Effective Vote Count</h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<p class="lead">This graph visualises the current effective vote count after some of the voters' budgets have already been allocated against original vote count for the project.</p>
</div>
<div class="col-7" style="min-height: 400px;">
<div id="StackedBarChart" style="height: 100%; width: 100%;" >
<button class = "info-button" style = "position: absolute; z-index: 2000; right: 50px;" data-tippy-content= "<b>Reduced Effective Vote Count</b><br>Voters who still have money left but not enough money to pay for the project when its cost is equally divided will count as a fraction. We do not count voters if they have already spent their entire budget share. This graph visualises the current vote count after some of the voters' budgets have already been allocated against original vote count for the project.">i</button>
</div>
</div>
</div>
<p>

<a href="#" class="btn btn-secondary my-2" onclick="renderRoundPrev()">Previous Round</a>
<a href="#" class="btn btn-primary my-2" onclick="renderRoundNext()">Next Round</a>

</p>
</section>
</div>

Expand Down Expand Up @@ -483,8 +556,8 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
"type": "hbar",
"title": {
"text": "Effective Vote Count",
"fontSize": 16,
"adjustLayout": true
"fontSize": 16, // Smaller font size to ensure it fits
// "adjustLayout": true // ZingChart will try to adjust the layout
},
"plotarea": {
"marginLeft":'dynamic',
Expand Down Expand Up @@ -670,6 +743,7 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows(rows);
// Instantiates and draws our chart, passing in some options.
chart.draw(data, options);
}

Expand Down Expand Up @@ -716,7 +790,7 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
"legend":{
"toggle-action":"remove",
"toggle-action":"remove",
"layout":"x2",
// "layout":"x2",
"align":"center",
"vertical-align":"bottom"
},
Expand All @@ -726,7 +800,7 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
"type":"all",
"placement":"in",
"text":"%v",
"fontSize":10
"fontSize":10 // Adjust font size as needed
},
"animation":{
"effect":"ANIMATION_EXPAND_VERTICAL",
Expand All @@ -753,7 +827,7 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
});
}

async function addPieChartsToCarousel(pie_chart_triplets) {
async function addPieChartsToCarousel(pie_chart_triplets, project_name) {
pie_chart_data_for_render = [];
let carouselElement = document.getElementById("pieChartsCarousel");
carouselElement.innerHTML = "";
Expand Down Expand Up @@ -781,10 +855,11 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
pieChart.style.width = "100%";
div.appendChild(pieChart);
pie_chart_data_for_render.push([pieChart.id, data.title, data.values_1, data.text_1, data.values_2, data.text_2])
// renderPieChart(pieChart.id, data.title, data.values_1, data.text_1, data.values_2, data.text_2);
col.appendChild(div);
let pieChartText = document.createElement("div");
pieChartText.className = "pie-chart-text";
pieChartText.innerHTML = "This resulted in an average reduction of " + data.reduction +" {{ currency }} per voter for the '" + data.project_name + "' voters who also voted for '" + data.round_name + "'.";
pieChartText.innerHTML = data.values_1 + " out of the " + (+data.values_1 + +data.values_2) + " voters who voted for '" + data.project_name + "' also voted for " + project_name + ". Resulting in an average reduction of $ per voter for the '" + data.project_name + "' voters who also voted for '" + data.round_name + "'.";
col.appendChild(pieChartText);
row.appendChild(col);
});
Expand All @@ -804,8 +879,9 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
element.classList.add('active');
document.getElementById('projectDropdown').innerText = element.innerText;
let round_data = rounds_data[roundId];

roundNum = round_data.roundNum
pie_chart_data_for_render = await addPieChartsToCarousel(round_data.pie_chart_triplets);
pie_chart_data_for_render = await addPieChartsToCarousel(round_data.pie_chart_triplets, round_data.intro.project_name);
updateBarChart(round_data.effective_vote_count_bar_chart.x_labels, round_data.effective_vote_count_bar_chart.values);
updateStackedBarChart(round_data.effective_vote_count_stacked_bar_chart.x_labels, round_data.effective_vote_count_stacked_bar_chart.initial_values, round_data.effective_vote_count_stacked_bar_chart.reduced_values);
updateSankeyChart(round_data.sankey_chart.rows);
Expand Down Expand Up @@ -848,6 +924,36 @@ <h2 class="featurette-heading">Reduced Effective Vote Count</h2>
document.getElementById("dropdown-container").classList.add('active');
document.getElementById("dropdown-container").style.display = 'flex';
}

function toggleText() {
var container = document.getElementById("textContainer");
var button = document.getElementById("toggleButton");

if (container.classList.contains("text-expanded")) {
// If the text is expanded, collapse it
container.classList.remove("text-expanded");
button.innerHTML = "Show More";
} else {
// If the text is collapsed, expand it
container.classList.add("text-expanded");
button.innerHTML = "Show Less";
}
}

function toggleTextChord() {
var container = document.getElementById("textContainerChord");
var button = document.getElementById("toggleButtonChord");

if (container.classList.contains("text-expanded")) {
// If the text is expanded, collapse it
container.classList.remove("text-expanded");
button.innerHTML = "Show More";
} else {
// If the text is collapsed, expand it
container.classList.add("text-expanded");
button.innerHTML = "Show Less";
}
}
</script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
Expand Down
2 changes: 1 addition & 1 deletion pabutools/visualisation/visualisation.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,4 +425,4 @@ def render(self, outcome, output_folder_path):
os.makedirs(output_folder_path)
with open(f"{output_folder_path}/round_analysis.html", "w", encoding="utf-8") as o:
o.write(round_analysis_page_output)

0 comments on commit 42069dd

Please sign in to comment.