Visual data exploration with Walmart data and Vue DeckGL

Setting up a framework to explore how weather correlates to sales

Data science and analytics is an exciting and very wide topic with lots of different solutions, workflows, and processes. An important piece of that process is when doing initial discovery and identifying relationships within a large dataset, it helps to start with visual exploration. Through visual exploratory data analysis, the eye is going to help you catch certain relationships that may not have been apparent. That same analysis can also disprove relationships you thought existed. In this post, we will explore a tool that can help with visual data exploration: Vue DeckGL.

Vue DeckGL is an open source project built by the engineering team here at Lofty that provides open source bindings for Uber’s DeckGL Library in the Vue.js framework. This implementation of DeckGL can be used in a way that cooperates with existing Vue paradigms. Typical 2D visualizations can suffice for a lot of datasets, but it is often found that when viewing large datasets of geospatial data, another solution is needed. That’s where DeckGL comes into play. Uber describes as "a WebGL-powered framework for visual exploratory data analysis of large datasets." Combining the power of DeckGL with the simplicity and elegance of Vue, certain pieces of DeckGL can be abstracted to quickly stand up production ready data applications using Vue DeckGL. This can be demonstrated by looking at some data from Walmart.

Using a Kaggle dataset, we can take Walmart sales data on a certain day along with weather data, all being geolocated, and render that onto a map provided via Mapbox. Vue DeckGL provides abstractions for this using DeckGL’s existing efficient dataset processing and Layer system to render data onto the map. In the interactive example provided, the data can be visualized a couple different ways. The time can be controlled by a slider, the sales data increase/decrease in height, and the weather feature can be changed to show if the weather feature is below/above(red/yellow) the average of the dataset during that time.


While this type of data analysis is very elementary and the types of features that are being explored are few, it’s meant to provide a brief example of how quickly a production tool can be stood up to support a workflow of visual exploratory analysis. The sky's the limit for the type of analysis or the features that can be added on to this! Need an idea to spark your imagination?

  1. Build an API integration to future weather predictions to begin forecasting sales or inventory in particular regions
  2. With more granular data, start drilling in to see how certain items perform under certain weather conditions
  3. Create automated snapshots and reporting to provide to stakeholders based on the visualizations rendered here
  4. Plug this tool into existing retail/supply chain BI solutions and data warehouses to retrieve live results.
  5. Do analysis on the impact of dangerous weather systems and what type of inventory levels are needed to meet demand

All of this and more can be built and iterated on using Vue DeckGL.

If you'd like to play with this example, check out the demo here:


In a follow up post, we will be exploring a detailed tutorial on how to implement this.

No time to wait and want a general tutorial on how to start utilizing Vue DeckGL?

Want to help contribute to the Vue DeckGL project?

Connect with Lofty

Did you know? Lofty builds data-driven applications for disruptive companies.