Show a plot

app.py

@@ -1,9 +1,61 @@
 import streamlit as st
 import pandas as pd
 import numpy as np
+import plotly.express as px
 
-chart_data = pd.DataFrame(
-    np.random.randn(20, 3),
-    columns=["a", "b", "c"])
+# Set the page configuration to wide layout
+st.set_page_config(layout="wide")
 
-st.bar_chart(chart_data)
+data = pd.read_csv("encodings_2.csv")
+
+# Select only the 'token' and 'count' columns
+token_count_data = data[['token', 'count']]
+
+# Set the 'token' column as the index
+token_count_data = token_count_data.set_index('token')
+
+# Sort the data by 'count' in descending order
+token_count_data = token_count_data.sort_values('count', ascending=False)
+
+# Add sliders with floating-point values
+slider1 = st.slider('Select lower percentage', min_value=0.0,
+                    max_value=100.0, value=0.0, step=0.1)
+slider2 = st.slider('Select upper percentage', min_value=0.0,
+                    max_value=100.0, value=1.0, step=0.1)
+
+if slider1 > slider2:
+    st.warning(
+        "Lower percentage should be less than or equal to upper percentage.")
+else:
+    # Calculate the number of rows to display based on the selected percentage range
+    total_rows = len(token_count_data)
+    lower_index = int(total_rows * slider1 / 100)
+    upper_index = int(total_rows * slider2 / 100)
+
+    # Filter the data based on the selected range and sort by 'count' in ascending order
+    filtered_data = token_count_data.iloc[lower_index:upper_index].sort_values(
+        'count', ascending=True)
+
+    # Create a bar chart using Plotly with all labels
+    fig = px.bar(filtered_data, x='count',
+                 y=filtered_data.index, text=filtered_data.index)
+    fig.update_yaxes(type='category', tickmode='array',
+                     tickvals=filtered_data.index)
+    fig.update_layout(height=5000)
+
+    # Display the bar chart using Streamlit
+    st.plotly_chart(fig, use_container_width=True)
+
+    # Set the chart width to a percentage of the container width
+    width_percentage = 90
+    html_code = f"""
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {{
+            var chart = document.getElementsByClassName('js-plotly-plot')[0];
+            if (chart) {{
+                chart.style.width = '{width_percentage}%';
+            }}
+        }});
+    </script>
+    """
+    st.markdown(html_code, unsafe_allow_html=True)

encodings_2.csv

@@ -1,5 +1,4 @@
 index,count,token
-49406,512446141,<|startoftext|>
 2423,53313,victor
 22698,49071,inox 
 1711,123951,spec
@@ -11,7 +10,6 @@ index,count,token
 10382,110000,expand
 863,1624373,able 
 29924,138157,spinner 
-49407,512446141,<|endoftext|>
 5853,925296,makeup 
 21550,120228,brushes 
 268,250036789,-