A naukri.com initiative
Dev
1w
355
Image Credit: Dev
CodePen #Challenge: Visualizing McDonald’s Menu with Free Pivot Grid Library 👩🏼💻📊🍔
- A Software Engineering student and beginner developer created a blog to share their learning journey and participation in #CodePenChallenges.
- CodePen Challenges provide a platform to experiment with new technologies and develop professional skills by creating animations, webpages, mini games, etc.
- The student participated in a recent challenge focused on food and decided to visualize data from the McDonald's Menu - Comparative Nutrition Values dataset.
- WebDataRocks, a free pivot grid library, was used as the main tool to create interactive pivot tables with customization options.
- The student shared their workflow for the challenge, starting with loading the dataset and filtering selected categories in the JavaScript pivot grid.
- By filtering the dataset before loading, only specific categories like Breakfast, Beef & Pork, and Chicken & Fish were displayed.
- The student customized the layout of the pivot table to show sub-levels of hierarchies in separate columns, resembling Excel.
- In terms of styling, the student imported the 'Quicksand' font and added burger emojis as the background for better visual appeal.
- WebDataRocks offers built-in themes, and the student used the orange theme to enhance the appearance of the pivot table.
- The student shared the demo of their pivot table example resulting from the challenge for others to try out and evaluate.
- Feedback and questions regarding adding a JS pivot table to web applications are welcomed by the student.
Read Full Article
21 Likes
For uninterrupted reading, download the app