I. Introduction
The project aims to design data visualizations for the web with animated support. The goal is to answer the question: “How to design relevant data visualizations that align with a communication objective?” The main steps include data selection, analysis, and processing, creating visual assets for the web, implementing animated supports, and creating responsive web pages with rich interactions.
II. Data Selection, Analysis, and Processing
- Selection of data on life expectancy in the European Union and other relevant data such as GDP, HDI, and sanitation.
- Use of the World Bank’s XML format for data structure and order.
- Use of a Python script to sort and format XML data.
III. Definition and Creation of Visual Assets for the Web
- Reflection on suitable types of charts for the data, including maps, bar charts, and curves.
- Creation of a color palette with two main colors: pink and green.
IV. Implementation of Animated Visualization Supports
- Creation of a Node.js API to convert XML data to JSON.
- Use of the Apache Echarts library to create charts, including a map of the European Union.
- Formatting, structuring, and sorting data in JavaScript for optimal use by Echarts.
- Configuration of data for dynamic charts.
V. Production of Responsive Web Pages with Rich Interactions
- Management of universal animations between charts for smooth transitions.
- Use of React.js state variables to trigger chart updates when scrolling through the page.
- Addition of interactive animations, such as the disappearance of countries during interaction with a gradient.
- Responsiveness management with percentages and media queries in CSS.
VI. Site Hosting
- Use of Vercel, a popular host for Next.js applications, to host the site.
VII. Conclusion
The project covered data selection, processing, visual asset creation, animated support implementation, animation, interactivity, responsiveness, and hosting.
The project is accessible here.