Inspiration
The inspiration behind the project was to create a simple and visually appealing data visualization that showcases the average temperatures of different cities. We wanted to use an animation to make the bars grow, creating an engaging effect.
What it does
The "Average City Temperatures Visualization" project is a web-based data visualization that displays the average temperatures of five different cities using a bar chart. The bars representing each city's average temperature grow in height with an animation effect. The visualization also includes temperature labels below each bar and city labels above each bar.
How we built it
The project was built using HTML, CSS, and JavaScript. We used HTML to structure the web page, CSS to style the elements and create the layout, and JavaScript to handle the data and implement the animation for the bar chart.
Challenges we ran into
One of the main challenges was aligning the temperature and city labels correctly with the bars. We had to adjust the CSS and layout to ensure proper alignment. Additionally, creating a smooth and visually appealing animation required some experimentation and fine-tuning.
Accomplishments that we're proud of
We're proud of successfully implementing the data visualization with an animation that makes the bars grow. The final visualization effectively presents the average temperatures of different cities in an engaging manner.
What we learned
During the project, we learned how to use HTML, CSS, and JavaScript together to create interactive and dynamic data visualizations. We gained experience in handling data, manipulating DOM elements, and using CSS for responsive design.
What's next for Average City Temperatures Visualization
In the future, we can expand the project by incorporating real-time temperature data using APIs. This would make the visualization more dynamic and useful for users who want to see up-to-date temperature information. Additionally, we could explore other types of data visualizations or interactive features to enhance user engagement.
Log in or sign up for Devpost to join the conversation.