By: Aurellia Christie · May 30, 2024
streamlit
and altair
streamlit
, an open-source Python app framework that’s incredibly easy to use and perfect for beginners. With streamlit
, you can create beautiful, interactive web applications with just a few lines of Python code. It’s designed to let you focus on your data and insights without needing extensive web development experience, making it ideal for data scientists, analysts, and developers.
For the visualizations, we’ll use altair
, a powerful and user-friendly Python library. altair
works seamlessly with streamlit
, allowing you to create stunning, interactive charts and graphs. Even if you’re new to Python, the simplicity of streamlit
combined with the intuitive design of altair
will help you get started quickly. Rest assured, you’ll get along just fine with this recipe!
Note: If you want to first get familiar with altair
, you can self-enroll in the Data Visualization with Altair course offered by Supertype Fellowship.
streamlit v.1.35.0
package installed, by running the following code:
pandas
, requests
, and altair
, will also be installed.
.ipynb
notebook in your IDE to follow along and experiment with the data. We’ll start by getting familiar with the data and creating some insightful visualizations.
Alright, first things first. Please make sure you already have your API key from your Sectors App. And since we’ll be calling some endpoints from the Sectors Financial API, let’s create a simple function to handle this. This will make our next steps much easier:
sectors
.
subsector
data to filter our data later on, we’ll create a list contains of the subsector data only:
total_market_cap
, quarterly_market_cap
, and monthly_performance
into three pandas
data frames:
mc_curr
to store the total market cap:
Sector | Total Market Cap | |
---|---|---|
0 | Financing Service | 4.676535e+13 |
mc_hist
to store the quarterly market cap:
First let’s test how the data frame would look like if we try to create one from quarterly_market_cap
:
2022.Q2 | 2022.Q3 | 2022.Q4 | 2023.Q1 | |
---|---|---|---|---|
quarter | 39870000000000 | 41848000000000 | 43047000000000 | 49290000000000 |
wide
to long
using pd.melt()
function, then add the Sector
column:
Sector | Quarter | Market Cap | |
---|---|---|---|
0 | Financing Service | 2022.Q2 | 39870000000000 |
1 | Financing Service | 2022.Q3 | 41848000000000 |
2 | Financing Service | 2022.Q4 | 43047000000000 |
3 | Financing Service | 2023.Q1 | 49290000000000 |
quarterly_market_cap
that we want to use: prev_ttm_mcap
and current_ttm_mcap
, we can use looping to create the final mc_hist
:
pd.concat()
there is working to combine the data frame of prev_ttm_mcap
and current_ttm_mcap
into one data frame.
mc_change
to store the monthly performance
Similar as mc_hist
, we will use pd.melt()
to create an easier-to-be-visualized data frame:
Sector | Date | Market Cap Change | |
---|---|---|---|
0 | Financing Service | 2023-06-30 | 1.601451e-01 |
1 | Financing Service | 2023-07-31 | -7.817735e-04 |
2 | Financing Service | 2023-08-31 | -7.589136e-02 |
… | … | … | … |
df_mc_curr
with the IDX market cap data that we can obtain using the following endpoint:
idx_mc
:
df_mc_curr
to meet our needs for the visualization:
Sector | Total Market Cap | % Market Cap | Market Cap (Trillion IDR) | |
---|---|---|---|---|
0 | Financing Service | 4.676535e+13 | 0.381127 | 46.765350 |
1 | Insurance | 3.975552e+13 | 0.323999 | 39.755524 |
2 | Retailing | 1.141295e+14 | 0.930130 | 114.129518 |
3 | Others | 1.206962e+16 | 98.364744 | 12069.621623 |
altair
to do it:
alt.Chart()
function initializes the chart, .mark_arc()
defines that the chart should use arcs to represent the data, .encode()
maps the data columns to visual properties of the chart including the theta (% Market Cap
), color (Sector
), & tooltip (Sector
, % Market Cap
, Market Cap (Trillion IDR)
) and .properties()
sets additional properties of the chart including the title and width.
Notice that I use :Q
and :N
behind the column names, these are used to specify the data type, with Q
stands for quantitative, and N
stands for nominal.
You should have a pie chart looks like the followings:
df_mc_hist
. We only need to slightly modify the data frame to include the market cap in trillion IDR, using the following code:
Sector | Quarter | Market Cap | Market Cap (Trillion IDR) | |
---|---|---|---|---|
0 | Financing Service | 2022.Q2 | 39870000000000 | 39.870 |
1 | Financing Service | 2022.Q3 | 41848000000000 | 41.848 |
2 | Financing Service | 2022.Q4 | 43047000000000 | 43.047 |
… | … | … | … | … |
.mark_line()
:
df_mc_change
. Let’s first change the format of the change from decimal to percentage:
Sector | Date | Market Cap Change | Market Cap Change (%) | |
---|---|---|---|---|
0 | Financing Service | 2023-06-30 | 1.601451e-01 | 1.601451e+01 |
1 | Financing Service | 2023-07-31 | -7.817735e-04 | -7.817735e-02 |
2 | Financing Service | 2023-08-31 | -7.589136e-02 | -7.589136e+00 |
… | … | … | … | … |
df_mc_hist
we’ll use line chart to visualize it:
historical_valuation
into pandas
data frame using the following function,
Price/Book Ratio | Price/Earning Ratio | Price/Sales Ratio | Price/Cash Flow Ratio | Year | Sector | |
---|---|---|---|---|---|---|
0 | 1.128118 | 15.226366 | 3.407392 | 1.866339 | 2020 | Financing Service |
1 | 1.708792 | 15.256327 | 5.972283 | 2.288791 | 2021 | Financing Service |
2 | 1.322785 | 11.479534 | 5.640499 | -4.803930 | 2022 | Financing Service |
… | … | … | … | … | … | … |
Price/Book Ratio
in the code above with the metric: Price/Earning Ratio
, Price/Sales Ratio
, or Price/Cash Flow Ratio
, and you should get a similar visualization as above but with the chosen metric value.
top_companies
key into four different data frames:
df_top_mc
before it’s ready to be visualized:
.mark_bar()
) to visualize the df_top_mc
: