Styling Tables

Styling DataFrames to make them more readable and skannable with heatmaps, bar charts, categorical colors, and plain text.

source

style_table

def style_table(
    df,
    column_types,
    column_widths:NoneType=None,
    title:NoneType=None,
    precision:int=1,
    width:NoneType=None,
    height:NoneType=None,
    theme:str='plotly_white',
    font_size:NoneType=None,
    title_font_size:NoneType=None
):

Convert a DataFrame to multiple charts (one for each column).

	Type	Default	Details
df			Any DataFrame, but typically a small one, to display as a report.
column_types			A list of types, one for each column. Possible values are “bar”, “heatmap”, “category”, and “text”.
column_widths	NoneType	None	A list of fractions that should add up to 1. Each fraction corresponds to a column.
title	NoneType	None	The title of the chart.
precision	int	1	How many decimals of precision to display in numeric columns. This affects all numeric columns.
width	NoneType	None	The width of the entire chart in pixels.
height	NoneType	None	The height of the entire chart in pixels.
theme	str	plotly_white	The theme used for styling the entire chart.
font_size	NoneType	None	The size of font of text and number on the chart in points.
title_font_size	NoneType	None	The size of font of the title of the chart in points.

Getting started - a simple table

df = pd.DataFrame({
    'text': ['one', 'two', 'three', 'four', 'five'],
    'category': ['odd', 'even', 'odd', 'even', 'odd'],
    'heatmap': [10, 20, 30, 40, 70],
    'bar': [18, 17, 12, 10, 5]
})

df

	text	category	heatmap	bar
0	one	odd	10	18
1	two	even	20	17
2	three	odd	30	12
3	four	even	40	10
4	five	odd	70	5

style_table(
    df,
    column_types=['text', 'category', 'heatmap', 'bar'])

Modify look and feel

style_table(
    df,
    column_types=['text', 'category', 'heatmap', 'bar'],
    column_widths=[0.15, 0.25, 0.2, 0.4],
    title='Styling tables with <b>adviz',
    theme='plotly_dark',
    precision=0,
    width=600,
    height=400,
    font_size=14,
    title_font_size=25)

Styling multiple columns with multiple chart types

First set the categorical order so we can sort medals by rank: bronze < silver < gold.

medals = px.data.medals_long()[['medal', 'nation', 'count']]
medals['medal'] = (medals['medal']
                   .astype('category')
                   .cat.reorder_categories(['bronze', 'silver', 'gold']))
medals = medals.sort_values(['medal', 'count'], ascending=False)
medals

	medal	nation	count
0	gold	South Korea	24
1	gold	China	10
2	gold	Canada	9
4	silver	China	15
3	silver	South Korea	13
5	silver	Canada	12
8	bronze	Canada	12
6	bronze	South Korea	11
7	bronze	China	8

Since each column contains a different type of data, we want to set the types of chart we want ot use to visualize them:

medal: category
nation: category
count: bar

Note that when you have two categorical columns, different color scales are used to avoid confusion.

style_table(
    medals,
    column_types=['category', 'category', 'bar'],
    title='Olympic Medals',
    theme='none',
    precision=0,
    width=800,
    height=500)

You can also use “heatmap” for numeric columns, and it depends on how you want to display it.

style_table(
    medals,
    column_types=['category', 'category', 'heatmap'],
    title='Olympic Medals',
    theme='none',
    precision=0,
    width=800,
    height=400)

Styling many columns with multiple chart types

election = px.data.election().iloc[:, :-1]
election.head()

	district	Coderre	Bergeron	Joly	total	winner	result
0	101-Bois-de-Liesse	2481	1829	3024	7334	Joly	plurality
1	102-Cap-Saint-Jacques	2525	1163	2675	6363	Joly	plurality
2	11-Sault-au-Récollet	3348	2770	2532	8650	Coderre	plurality
3	111-Mile-End	1734	4782	2514	9030	Bergeron	majority
4	112-DeLorimier	1770	5933	3044	10747	Bergeron	majority

Using column_widths we can set the relative widths of each chart as appropriate. This can be set as any fraction between [0, 1]. The columns that contain a lot of data (like text for example) can be given a larger share of the chart, and you can interactively modify the widths using a list.

style_table(
    election.sort_values('total', ascending=False).head(20),
    column_types=['text', 'heatmap', 'heatmap', 'heatmap', 'bar', 'category', 'category'],
    column_widths=[.3, 0.12, 0.12, 0.12, 0.12, 0.12, 0.12 ],
    precision=0,
    theme='plotly_dark',
    title='Election Results – Top 20',
    height=750,
)

Producing more detailed and readable tables

With large tables and many values, it’s good to filter and display the subset that you want, as we do here with the gapminder dataset. We first sort values by year and gdpPercap, and then get the top five countries for each year. Then we rename the columns to give them a nicer look.

top5_gdp_percap = (px.data
                   .gapminder()
                   .sort_values(['year', 'gdpPercap'],
                                ascending=[True, False])
                   .groupby('year').head().iloc[:, :-2]
                   [['country', 'continent', 'year', 'gdpPercap', 'lifeExp', 'pop']]
                   .rename(columns={
                       'gdpPercap': 'GDP per capita',
                       'lifeExp': 'Life expectancy',
                       'pop': 'population'}))
top5_gdp_percap.head()

	country	continent	year	GDP per capita	Life expectancy	population
852	Kuwait	Asia	1952	108382.35290	55.565	160000
1476	Switzerland	Europe	1952	14734.23275	69.620	4815000
1608	United States	Americas	1952	13990.48208	68.440	157553000
240	Canada	Americas	1952	11367.16112	68.750	14785584
1092	New Zealand	Oceania	1952	10556.57566	69.390	1994794

top5_gdp_percap

	country	continent	year	GDP per capita	Life expectancy	population
852	Kuwait	Asia	1952	108382.35290	55.565	160000
1476	Switzerland	Europe	1952	14734.23275	69.620	4815000
1608	United States	Americas	1952	13990.48208	68.440	157553000
240	Canada	Americas	1952	11367.16112	68.750	14785584
1092	New Zealand	Oceania	1952	10556.57566	69.390	1994794
853	Kuwait	Asia	1957	113523.13290	58.033	212846
1477	Switzerland	Europe	1957	17909.48973	70.560	5126000
1609	United States	Americas	1957	14847.12712	69.490	171984000
241	Canada	Americas	1957	12489.95006	69.960	17010154
1093	New Zealand	Oceania	1957	12247.39532	70.260	2229407
854	Kuwait	Asia	1962	95458.11176	60.470	358266
1478	Switzerland	Europe	1962	20431.09270	71.320	5666000
1610	United States	Americas	1962	16173.14586	70.210	186538000
410	Denmark	Europe	1962	13583.31351	72.350	4646899
242	Canada	Americas	1962	13462.48555	71.300	18985849
855	Kuwait	Asia	1967	80894.88326	64.624	575003
1479	Switzerland	Europe	1967	22966.14432	72.770	6063000
1611	United States	Americas	1967	19530.36557	70.760	198712000
903	Libya	Africa	1967	18772.75169	50.227	1759224
1311	Saudi Arabia	Asia	1967	16903.04886	49.901	5618198
856	Kuwait	Asia	1972	109347.86700	67.712	841934
1480	Switzerland	Europe	1972	27195.11304	73.780	6401400
1312	Saudi Arabia	Asia	1972	24837.42865	53.886	6472756
1612	United States	Americas	1972	21806.03594	71.340	209896000
904	Libya	Africa	1972	21011.49721	52.773	2183877
857	Kuwait	Asia	1977	59265.47714	69.343	1140357
1313	Saudi Arabia	Asia	1977	34167.76260	58.690	8128505
1481	Switzerland	Europe	1977	26982.29052	75.390	6316424
1613	United States	Americas	1977	24072.63213	73.380	220239000
1145	Norway	Europe	1977	23311.34939	75.370	4043205
1314	Saudi Arabia	Asia	1982	33693.17525	63.012	11254672
858	Kuwait	Asia	1982	31354.03573	71.309	1497494
1482	Switzerland	Europe	1982	28397.71512	76.210	6468126
1146	Norway	Europe	1982	26298.63531	75.970	4114787
1614	United States	Americas	1982	25009.55914	74.650	232187835
1147	Norway	Europe	1987	31540.97480	75.890	4186147
1483	Switzerland	Europe	1987	30281.70459	77.410	6649942
1615	United States	Americas	1987	29884.35041	75.020	242803533
859	Kuwait	Asia	1987	28118.42998	74.174	1891487
691	Iceland	Europe	1987	26923.20628	77.230	244676
860	Kuwait	Asia	1992	34932.91959	75.190	1418095
1148	Norway	Europe	1992	33965.66115	77.320	4286357
1616	United States	Americas	1992	32003.93224	76.090	256894189
1484	Switzerland	Europe	1992	31871.53030	78.030	6995447
80	Austria	Europe	1992	27042.01868	76.040	7914969
1149	Norway	Europe	1997	41283.16433	78.320	4405672
861	Kuwait	Asia	1997	40300.61996	76.156	1765345
1617	United States	Americas	1997	35767.43303	76.810	272911760
1365	Singapore	Asia	1997	33519.47660	77.158	3802309
1485	Switzerland	Europe	1997	32135.32301	79.370	7193761
1150	Norway	Europe	2002	44683.97525	79.050	4535591
1618	United States	Americas	2002	39097.09955	77.310	287675526
1366	Singapore	Asia	2002	36023.10540	78.770	4197776
862	Kuwait	Asia	2002	35110.10566	76.904	2111561
1486	Switzerland	Europe	2002	34480.95771	80.620	7361757
1151	Norway	Europe	2007	49357.19017	80.196	4627926
863	Kuwait	Asia	2007	47306.98978	77.588	2505559
1367	Singapore	Asia	2007	47143.17964	79.972	4553009
1619	United States	Americas	2007	42951.65309	78.242	301139947
755	Ireland	Europe	2007	40675.99635	78.885	4109086

style_table(
    top5_gdp_percap,
    ['text', 'category', 'category', 'bar', 'heatmap', 'heatmap'],
    column_widths=[.1, .07, .05, .12, .12, .12, ],
    theme='seaborn',
    precision=0,
    title="Top 5 countries per year – GDP per capita",
    height=1300)

Visualizing hierarchicacal data

See also: the adviz.status_codes chart.

status_codes = pd.read_csv('data/status_codes.csv')
status_codes['category'] = status_codes['status'].round(-2)
status_codes

	status	category
0	200	200
1	200	200
2	200	200
3	200	200
4	200	200
...	...	...
414398	200	200
414399	200	200
414400	200	200
414401	200	200
414402	200	200

414403 rows × 2 columns

style_table(
    status_codes[['category', 'status']].value_counts().reset_index().sort_values(['category', 'count'], ascending=[True, False]),
    column_types=['category', 'text', 'bar'],
    column_widths=[.2, .2, .6],
    precision=0,
    theme='none',
    title='Status Codes',
    height=600, width=700)