Northeastern University Sustainability Data

Website Design | Research | Coding

The sustainable management of universities is key for ensuring clean air, water, food, and soil in local ecosystems, supporting the growth of all life and biodiversity, promoting health and human wellbeing, and creating thriving and abundant creative communities. For this project, Northeastern’s Sustainability Office has granted us permission to use their recent data to explore and create a meaningful set of visualizations for communicating key sustainability data.

The development of the Northeastern University Sustainability Hub website was a collaborative effort aimed at creating an intuitive and informative platform for incoming students to explore sustainability initiatives on campus.

Northeastern University’s campus is huge and right in the middle of the city, isn’t it great?
But is this campus with a relatively old architecture and design even SUSTAINABLE?? But is this campus with a relatively old architecture and design even SUSTAINABLE??
Even I want to understand how does such a big campus maintain sustainability. But where do a find this data?
But is this campus with a relatively old architecture and design even SUSTAINABLE?? But is this campus with a relatively old architecture and design even SUSTAINABLE??
Oh my God!! Its so difficult to understand this data. I wish there was a simpler way of understanding this……
So the aim of this website is collect the data and make it simple and understandable in order to spread awareness among the incoming students……

Northeastern University’s campus is huge and right in the middle of the city, isn’t it great?

But is this campus with a relatively old architecture and design even SUSTAINABLE??

But is this campus with a relatively old architecture and design even SUSTAINABLE??

Even I want to understand how does such a big campus maintain sustainability. But where do a find this data?
I think we can find the data on Northeastern University’s sustainability website….

Oh my God!! Its so difficult to understand this data. I wish there was a simpler way of understanding this……

So the aim of this website is collect the data and make it simple and understandable in order to spread awareness among the incoming students……

Research and Data Collection

Data for this project was primarily sourced from Northeastern University’s sustainability website and additional university-provided resources. Through rigorous analysis of this data, we experimented with various design approaches to present the information in an engaging and informative manner. This iterative process allowed us to create a user-centric and visually appealing representation of the data.

To effectively communicate insights derived from the diverse datasets, a comprehensive data visualization strategy was employed. Leveraging the capabilities of R, a variety of static and interactive visualizations were created through experimentation with different chart types and aesthetics. From simple bar charts and line graphs to more complex scatter plots and heatmaps, the goal was to select visualizations that accurately represented the data while maintaining clarity and accessibility for the target audience. Interactive elements were incorporated to allow users to explore the data at multiple levels of detail, fostering deeper engagement and understanding.

Buildings with Highest KgCO2e Emission Rate

Circular bar graph:

This graph represents building emission values for a campus, displaying the environmental impact of various campus buildings in terms of their KgCO2e rates.The radial plot provides a visual overview of these emissions, where each bar corresponds to a building, and the height of the bar represents the KgCO2e rate.The graph highlights the buildings with the highest emissions by labelling the top five buildings with the darkest colors, making them easily identifiable.

This visual emphasis draws attention to the specific buildings that have the greatest impact on emissions within the campus. Overall, this graph allows viewers to quickly identify the buildings with the highest emission values, making it a useful tool for assessing and addressing environmental concerns within the campus infrastructure.

Emissions from 2005 to 2022:

The scatter plot depicts the total CO2 emissions for a campus over the years 2005 to 2022. Each point on the plot represents the total CO2 emissions for a specific year.

The y-axis shows the total CO2 emissions, and the x-axis represents the years. As the years progress from left to right, the plot illustrates a clear decline in emissions, demonstrating the campus’s commitment to reducing its carbon footprint. Overall, the graph provides a visual representation of the reduction in CO2 emissions over the years, signalling an environmentally responsible approach and a move toward sustainability.

Emissions from 2005 to 2022:

Buildings with Highest KgCO2e Emission Rate

Circular bar graph:

This graph represents building emission values for a campus, displaying the environmental impact of various campus buildings in terms of their KgCO2e rates.The radial plot provides a visual overview of these emissions, where each bar corresponds to a building, and the height of the bar represents the KgCO2e rate.The graph highlights the buildings with the highest emissions by labelling the top five buildings with the darkest colors, making them easily identifiable.

This visual emphasis draws attention to the specific buildings that have the greatest impact on emissions within the campus. Overall, this graph allows viewers to quickly identify the buildings with the highest emission values, making it a useful tool for assessing and addressing environmental concerns within the campus infrastructure.

Buildings with Highest KgCO2e Emission Rate

The primary design and development of this project was done using Figma, facilitating collaboration, iteration, and efficiency. It helped in creation of visually compelling and user-centric layouts, incorporating a harmonious blend of typography, imagery, and data visualization elements.


Subsequently, the Figma designs were translated into HTML and CSS code to bring the website to life. This process involved attention to detail, ensuring pixel-perfect implementation of the design while optimizing for performance and responsiveness across different devices.

Scroll to Top