Black Lives Matter. Please consider donating to Black Girls Code today.

How to display groupy.size() data in bar plot from Pandas dataframe

Hi,

Not sure if I need the plotly package or Cufflinks for this, but the examples that I have seen from both Dash and Plotly, it is not clear to me how to display groupy data as bar chart.

My code is as follows:

import pandas as pd
df = pd.read_excel(‘test.xlsx’,sheet_name=‘Sheet1’)
dfstate = df.groupby(‘State’)
df3 = dfstate.size()

my df3 data looks like this:
State
Done 3
Plot Phase 4
Script Phase 2
TRS Phase 2
TRS Review Phase 3

So I want to display the data above as a bar chart. So not sure how df3 in ‘data’ need to be presented in figure. Maybe I am overcomplicating this and the answer is right in front of me based on other examples.

dcc.Graph(id=‘plot1’,
figure = {
‘data’ : df3 , ‘layout’ : {
‘title’ : ‘TestState’,
‘xaxis’: {‘title’: ‘Review States’}, ‘yaxis’ :
{‘title’ : ‘Completion status’}
}}}

Your ‘data’ key under figure should include a list of plotly.graph_objs. Your layout elements should go under a ‘layout’ key, which should also be a plotly.graph_objs, go.Layout in this case.

So, in your case it should be something like this:

import plotly.graph_objs as go
dcc.Graph(id='plot1',
          figure={
               'data': [go.Bar(x=df3['column_for_x_axis'], 
                               y=df3['column_for_y_axis'])], 
               'layout': go.Layout(title='Review States',
                                   yaxis={'title': 'Completion Status'})}

Hope this helps!

Elias, thanks for replying and sharing that code. Since typing my post, I massaged my data further and I figured out a different way to plot the bar chart, which is as follows:

dff_data = [{‘x’: dff.State, ‘y’: dff.status, ‘type’: ‘bar’, ‘name’: ‘PFOD E’}]
dcc.Graph(id=‘plot2’,
figure = {
‘data’ : plotly_fig, ‘layout’ : {
‘title’ : ‘CIVF PFOD F Test Case Review State’,
‘xaxis’: {‘title’: ‘Review States’}, ‘yaxis’ :
{‘title’ : ‘Completion status’}
}})

So I have another two question;

  1. I plot your plot and my plot together and they look exactly the same, but is there any advantage to using go.Bar vs the basic way as I have shown?

  2. The examples from the Dash website; https://dash.plot.ly/getting-started, for the bar chart, blue is used followed by orange. Also for the scatter plot, multiple colours are used. The colours that are used, are they all default values from the Style property in HTML. Do i need to look up the api documentation so customize the colours that I want to use?

Regards,
Gus

Hi Gus,

  1. I don’t think there is an advantage in using one way or the other. At the end, they are both represented as one data structure. You can use go.Bar or you can provide a dictionary that has type: 'bar'. That’s my understanding at least. Sorry if it sounded like it was the only way.

  2. The colors used are default colors which you can get from plotly.colors.DEFAULT_PLOTLY_COLORS. Markers are colored in the order that they appear in this list.

Colors can also be set manually with the ‘marker’ dictionary in your definition of the plot.

For example:

{'data': [go.Bar(x=[1, 2, 3], y=[4, 2, 3], marker={'color': '#123456'})

This would color all the bars with the color ‘#123456’.

Alternatively, if you want to color each marker separately with a different color, you can supply a list where each color would correspond to a marker:

[go.Bar(x=[1, 2, 3], y=[4, 2, 3], marker={'color': ['#111111', '#ff0000', '#00ff00']})]

1 Like

Elias,
Last two questions.

  1. Marker refers to the colour that fills the each bar plot, correct?

  2. Do you have a website link to all the colour codes? Or are these color codes standing to all programming libraries. For example, how do I find the colour codes for like orange, green and yellow.

I’m thinking that the colour codes are referenced somewhere in the Python documentation. I went here
https://plot.ly/python/ and then clicked on Custom Text Color and Styling, but it returned an error: page not found.

Regards,
Gus

“Marker” is any graphic symbol that is used in the plot. It could be a point, a line, a bar, a letter, anything used to indicate the location of data on the plot.

For colors, this tools might help if you want to convert a color to it hex code, RGB, or name.

https://www.w3schools.com/colors/colors_picker.asp

Hope this is what you are looking for!

Good luck.

Thank you again Elias!

1 Like