My name is Wendyanto, and I’m an Intern Front-End Developer at Bukit Vista. This is my second month working here, and I’m excited to share my experience developing a data visualization dashboard called Atlas.
My journey as a front-end developer at Bukit Vista led me to a fascinating project that pushed my boundaries and expanded my skill set. In the midst of September, I embarked on a mission to develop a data visualization dashboard, which would later be known as ‘Atlas.’ Working in tandem with Felix Ivander Ganumba, our data scientist, I was responsible for the front end while he managed the back end. The primary objective of this project was to visualize crucial data, with a focus on “Pricing Decision” data.
The Birth of ‘Atlas’
Our project started its life under the name ‘Promenade.’ But, like a phoenix, it transformed into ‘Atlas,’ a name inspired by the mythological Titan who bore the weight of the heavens on his shoulders for eternity (Wikipedia). Similarly, our dashboard would carry the weight of data and deliver insights.
Plotly Dash and Friends
Atlas came to life using a potent mix of technology. Plotly Dash was our choice for data visualization, while Ag-Grid took charge of displaying data in structured tables. We also enlisted the aid of libraries like pandas for handling the data and Flask for building web applications with Python. This posed an exciting challenge for me, as I’m more accustomed to developing websites with JavaScript. Venturing into the world of Python was like exploring uncharted territory. However, I saw this challenge as an opportunity to diversify my skill set and grow as a developer.
One remarkable aspect of Plotly Dash is its foundation on React.js, a JavaScript library renowned for building web components. As a front-end developer accustomed to working with React.js, this made the transition smoother. To adapt quickly to this new technology, I made it a habit to dive deep into the documentation, an invaluable skill for any developer.
The Puzzle of Callback Function
One of the early puzzles I encountered was the “Callback Function.” This function allows you to trigger an event based on an “Input” from a component. The rule of thumb is that the component should have a unique identity defined by the “Id” props. Understanding the intricacies of this feature was crucial to the project’s success.
A Boon: Dash Bootstrap Component
Another great asset offered by Plotly Dash is its own Bootstrap component library, aptly named “dash-bootstrap-component.” This library not only ensured a consistent look and feel for our web page layout but also simplified the development process significantly. However, Plotly Dash also boasts its built-in component, Dash Core Component, adding to the flexibility and customizability of the dashboard.
Conclusion
In the end, the journey of developing ‘Atlas’ was an enlightening experience. It showcased the power of adaptation, the thrill of learning, and the importance of diving deep into technology documentation. This tech innovation story is a testament to how challenges can turn into opportunities and how the unexplored can lead to new horizons. ‘Atlas’ stands as a symbol of our efforts and determination in the realm of data visualization, holding its own in the vast tech landscape.