Plotly JS woking with business data

plotly.js
1

I have been learning and working with Dash and Plotly for Python. I see use-cases for each. And I love them.

I am now trying to learn Plotly JS, and it seemed straightforward until now. I am trying to use business type data consisting of csv files with State, City, Month, Sales. I am having trouble figuring out how to pass data frames built to be used by javascript. I think I need to convert the data frames into javascript arrays, but I am not sure.

With Dash and Plotly for \Python, I use Pandas to group, filter,remove columns, and in general build the data frame I need for a particular chart. For example, a common function my clients want is drill down. It works like this:

  1. load the csv table I mentioned above with four columns
  2. group sales data by State on one bar chart (remove City or Month columns)
  3. allow the user to click on a State bar, which acts as a selector
  4. the selector is used as a callback to filter a City bar chart to just the cities in the State clicked on.
  5. this City bar chart uses a data frame that has sales grouped by city. It has the columns State, City, Sales, and I filter it by the State value clicked on from the first bar chart.

In Python, I can use Pandas to prepare a State, Sales data frame and a State, City, Sales data frame.

What is the best way to do this in javascript for use by Plotly JS?

Realizing that Python is working on the server and javascript is working on the client, do I create two dataframes in Python on the server for:

  • States, Sales
  • State, City, Sales

then pass these to javascript and filter the second data frame, i.e. State, City, by the state I have clicked?

Or is there a different method anyone has found to be more efficient?

And does anyone have any good resources on the web for working with byusiness data, i.e. SQL tables, csv files, etc. so that I can mimic Pandas if I need to?

Thanks for any help.

James