Data Visualizations with Plotly.js

Abstract particles render on dark background, graphic and motion concept

Data Visualizations are not an unexplored territory at Artasce Creative. We have built a variety of them with a variety of tools and languages but this particular category of software is unique experience.

Now working on creating a full set of charting possibilities with Plotly.js to create a showcase library to deeply integrate within a Vue Dashboard Design System.

The Dashboard Design System will be built with Nuxt 3 implementation and also have a parallel repository to backward compatibility of the components, animations, UI Interactions, etc. The idea of course being that although we have a few customized dashboard projects, each was uniquely branded, this will be focused on the seed starter that can feature any data frame, any branding, and have a core set of out of the box features to make managing any digital cloud data and infrastructure.

Plotly JavaScript Open Source Graphing Library

Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

Initial Observations

One of the first things you discover with Plotly is that it is a lot more than Plotly.js, there are a wide range of Plotly implementations and tools to utilize on top of the plethora of chart types. Additionally, they have a variety of mixed sub libraries that make up this array of implementations. For example, the first few that are listed below are our current interest but there’s more. It truly is a robust graphing solution.

  • Python
  • Javascript
  • Dash*

Then, documenting that as well as the alternative in Vue 3 with the Composition API

Lastly, upon wiring to the open resources available, the next stage would be to then implement the dashboard on customized and curated data with a tailored set of micro services with Dart, Python, Java, Node, and PHP backends. But that’s after a full UI mastery with the features and possibilities with Plotly.js