Fork me on GitHub

Project Team #8: Renewable Energy in Comparison with Electricity Access and GDP per Capita, COSI 116A F23

Maya Bock, Zen Edwards, Madeline Gorey, Rowan Scassellati

Project-long Course Project as part of COSI 116A: Information Visualization, taught by Prof. Dylan Cashman, Brandeis University.

Motivation

From reusing to recycling, when considering the state of the world and how important it is to take care of it, there are many ways in which countries can make a global impact on the harmful effects of climate change. We currently lack a system to easily look at the comparison between renewable energy usage and a country's GDP per capita and electricity access. These comparison points are integral for the understanding of how a country contributes to climate issues and conversely the fight to combat climate change. Understanding the relationship between different countries and highlighting countries which seem to be succeeding and which are struggling allows for decisions to be made based on data driven findings, and give world leaders a better chance to fight this crisis. Creating this visualization aims to give world leaders and interested parties alike the chance to better understand this situation by providing in depth visualizations to give a detailed report of where different countries stand as of 2021, the most recent year data has been collected and published. This depiction should give users the opportunity to get a clear picture on which countries have high amounts of usage of renewable energy, and, when comparing this to GDP per capita and electricity access, which countries stand out, and what trends exist.

Visualization

Interactive Pie Chart

Regional Renewable Energy Insights

Energy Distribution for World

Renewable Energy Technology

  • Hydropower
  • Solar
  • Wind
  • Bioenergy
  • Electricty access
  • Energy that comes from renewable sources

Demo Video

Visualization explanation

Map and Pie Chart Scatter and Bar Chart

Design Justification: In looking at the comparison of three data sets, with renewable energy usage being the primary focus, and electricity access and GDP per capita being the comparison points which support the findings, we found that having the central map portray the percent of total energy that comes from renewable sources as a color gradient was integral. Next, the scatter plot below shows the comparison between the percent of total energy that comes from renewable sources and the percent of the population with access to electricity. This gives a great visual representation of that relationship, and the addition of sizing of the circular marks adds the layer of GDP per capita, which can then also be used in the user’s findings. These two large-scale visualizations full of data are then refined and honed with the addition of the pie chart and bar chart to the right. The pie chart gives a comprehensive view of the split of the types of renewable energy sources used globally, and when a country is selected on the map or the scatter plot, it is updated to show the specific data for the selected country, giving the user a deeper look into the details. The bar chart allows wonderfully for direct country comparisons. As a user selects countries on the scatter plot or map, the bar chart adds the selected countries to the chart, comparing all of their electricity access percentages and simultaneously comparing their percentages of total energy that comes from renewable energy sources. This four view visualization gives the user a comprehensive view of the data and allows them to dig further into it, or understand it on a larger level. It is well suited for exploring the dataset and finding out more about the relations.

UI Walk-Through: Before any country is clicked or the user interacts with a part of the visualization, the bar chart and pie chart show data for the world as whole. As the user begins with the map in the visualization, as they hover over a country, the outline of the country becomes bold and pink, a tooltip will pop up with information about the country’s: name, percent of total energy that comes from renewable sources, percent of total energy that comes from renewable sources, and GDP per capita. When a country is clicked on the map, the outline becomes bold and red. The associated point on the scatter plot will become opaque, the pie chart will update its data to represent that of the selected country, and the data of the selected country will be added to the bar chart as well. When a selected country is clicked again, it becomes unselected for both the map and scatter plot, and the bar chart no longer shows its data. Continuing on to the scatter plot, each circle is associated with a country, and as they hover over a country, the outline of the country becomes bold and pink, a tooltip will pop up with information about the country’s: name, percent of total energy that comes from renewable sources, percent of total energy that comes from renewable sources, and GDP per capita. As the user clicks on a circle it will go opaque and the associated outline of the country on the map will become bold and red. The pie chart will update its data to represent that of the selected country, and the data of the selected country will be added to the bar chart as well. When a selected country is clicked again, it becomes unselected for both the map and scatter plot, and the bar chart no longer shows its data. If the user clicks on the scatter plot, but not on a circle, the entire visualization resets to its default and original state.

Linked Presentation Slides

Data Analysis

For the map we used world_countries.json from Aaron Williams’ world map code repository to render the map. We used the UNSDG’s statistics division data on Renewable Energy and Electricity Access (EG_FEC_RNEW: Indicator 7.2.1 : Renewable energy share in the total final energy consumption (%), EG_ACS_ELEC: Indicator 7.1.1, Series : Proportion of population with access to electricity, by urban/rural (%)), and used GDP per Capita data from the UN Data site. The EG_ACS_ELEC dataset was cleaned to not include the urban/rural split, and all three were cleaned so that countries were only referred to by one name across all three, and all the data was from 2021. These three datasets were then converged and converted into an xlsx, simplifiedData2021.xlsx, which was then converted into a json, simplifiedData2021.json, to be used by the scatterplot, and a tsv, world_rnew.tsv, to be used by the map. The map used the renewable energy data for the map and correct color scale, and the rest was used for tooltips. The scatter plot used the renewable energy and electricity access data to scale the scatter plot and place points, and the GDP per capita data was used to size the points. The three were also used for tooltips on the scatter plot. The bar chart used the UNSDG’s statistics division data on Renewable Energy and Electricity Access (EG_FEC_RNEW: Indicator 7.2.1 : Renewable energy share in the total final energy consumption (%), EG_ACS_ELEC: Indicator 7.1.1, Series : Proportion of population with access to electricity, by urban/rural (%)). These two were combined on a spreadsheet and inconsistencies in naming conventions were cleaned. It was then converted into a csv, full_file.csv, which is used by the bar chart to create a bar for each type of data as countries are selected. The pie chart used the UNSDG’s statistics division data on types of renewable energy (EG_EGY_RNEW: Indicator 7.b.1, 12.a.1, Series : Installed renewable electricity-generating capacity (watts per capita)), which was cleaned to include only relevant information (countries, watts/capita, renewable energy types). We further edited the names of countries to accurately match those of the data set used for the map, and downloaded it as a json file, Processed_Renewable_Energy.json. This information was used to create the pie chart renewable energy type split, and to create a tooltip for the pie chart when it is hovered over.

Task Analysis

Based on the work done by our team through early interviews and research, there were three main tasks that we hoped to be able to address through our visualizations. The first task, and the one that we determined was most important, was: based on a country's GDP and electricity access, how does their renewable energy usage compare? This task is best addressed through the scatter plot, allowing users to compare different points, explore different facets about the data, and discover insights. Another task that we determined was critical was: for countries who are expanding their electricity access recently and mainly through renewable energy, are they hitting a plateau in their capability for electricity access? This domain task revolved around the idea that users needed to be able to identify and locate a possible plateau, considering both the relationship between electricity access and renewable energy. This task is addressed through a number of the different views, including the map which allows users to easily distinguish between different regions and analyze possible correlation and trends, while also being able to use the pie chart to notice possible shortfalls depending on the different kinds of renewable energy that are being used by different countries. Our final task was to be able to easily compare a few select countries, allowing users to look up and present differences in countries when considering both their renewable energy and electricity access. This task is addressed through the bar chart, which allows for countries to be selected in other graphs and then are highlighted in a way that is efficient and easily understood by people such that it allows for presentation features from these visualizations as well.

Design Process

Vis1
Vis2
Vis3

Our design process emphasizes modularity, interactivity, and data-driven visualizations to deliver meaningful insights into renewable energy distribution and other datasets. We continuously refined our code, adjusting our project with updates such as changing visualization colors and optimizing data storage to load information asynchronously from a JSON file. We also implemented unique linking approaches, like sending data between files for smoother task transitions. This iterative mindset guided our design choices. For example, using D3.js, we created a map visualization that integrates country-level energy metrics, including renewable energy data, electricity consumption, and GDP, ensuring seamless alignment with geographic features. The pie chart complements this by visualizing energy distribution within selected regions, dynamically updating with CSS conic-gradient for smooth transitions and gradient stops that reflect proportional energy types. Interactivity features, such as hover effects, tooltips, and real-time updates based on selected countries, significantly enhance the user experience. Feedback from usability testing was crucial in refining these visualizations. Users appreciated these interactive elements, which made the data more accessible and engaging. Our bar chart and scatter plot also benefited from iterative improvements and user feedback. The bar chart uses linear and band scales for its axes, updating smoothly with transitions to reflect filtered or user-selected data. Titles and labels were added to improve context, while an update function ensures dynamic responsiveness to new inputs. The scatter plot incorporates linear scales for dimensions like GDP, population, and renewable energy, with visual encodings like color and size to convey categorical and numerical attributes. Interactivity features, including brushing, tooltips, and linked updates across visualizations, allow users to explore data subsets and uncover trends. This cohesive design prioritizes modularity, reusability, and synchronization, ensuring an engaging user experience across all visualizations.

Conclusion

The project outlines a comprehensive plan for visualizing energy-related data using maps, scatter plots, pie charts, and bar charts, each assigned to a specific team member. Madeline's map displays renewable energy percentages by color, Rowan's scatter plot shows renewable energy per capita versus electricity access, Zen's pie chart illustrates types of renewable energy for selected countries, and Maya's bar chart compares statistics between countries. Interactive components include pop-ups with detailed statistics when clicking on a country in the map or scatter plot, while the pie chart updates to show averages for selected countries. The bar chart dynamically updates with country-specific bars alongside a global average. By default, global averages are displayed in the pie and bar charts, allowing users to compare selected countries against these averages. Planned extra features/ areas of improvement include incorporating contextual information, such as regional comparisons or trends over time, to add depth to the analysis and make it more scalable to handle various inputs of large data. These improvements aim to enhance user engagement and provide a more comprehensive understanding of the data.

Acknowledgments

List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.