incorporate plotly

main.py

@@ -1,9 +1,13 @@
 from fasthtml.common import *
 from fasthtml.components import *
 from fasthtml.components import D_title, D_article, D_front_matter, D_contents, D_byline
+from plotly import graph_objects as go
+from fh_plotly import plotly2fasthtml
+import pandas as pd
+import json
 
 
-app, rt = fast_app(live=True)
+app, rt = fast_app(debug=True)
 
 
 @app.get("/")
@@ -12,9 +16,10 @@ def main():
         Head(
             Meta(charset="UTF-8"),
             Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
-            Link(rel="stylesheet", href="style.css"),
             Script(src="https://distill.pub/template.v2.js"),
             Script(src="https://unpkg.com/htmx.org@next/dist/htmx.min.js"),
+            Script(src="https://cdn.plot.ly/plotly-latest.min.js"),
+            Link(rel="stylesheet", href="style.css"),
         ),
         Body(
             D_title(
@@ -76,12 +81,24 @@ def main():
                         ),
                         Div(
                             A("Web Data", href="#inner-text"),
-                            hx_get="/web_data",
+                            hx_get="/webdata",
+                            hx_target="#inner-text",
+                        ),
+                        Div(
+                            A("Curated Sources", href="#inner-text"),
+                            hx_get="/curated",
+                            hx_target="#inner-text",
+                        ),
+                        Div(
+                            A("Common Steps", href="#inner-text"),
+                            hx_get="/common",
+                            hx_target="#inner-text",
+                        ),
+                        Div(
+                            A("TxT360 Results", href="#inner-text"),
+                            hx_get="/results",
                             hx_target="#inner-text",
                         ),
-                        Div(A("Curated Sources")),
-                        Div(A("Common Steps")),
-                        Div(A("TxT360 Results")),
                         role="navigation",
                         cls="l-text figcaption",
                     ),
@@ -235,9 +252,73 @@ def intro():
     )
 
 
-@app.get("/web_data")
+@app.get("/webdata")
 def web_data():
     return Div(Section(H2(P("Web Data")), id="inner-text"))
 
 
+def get_chart_28168342():
+    fig = go.Figure()
+    filter_names = [
+        "Download",
+        "Language",
+        "Min word count",
+        "Title Abstract",
+        "Majority language",
+        "Paragraph count",
+        "Frequency",
+        "Unigram log probability",
+        "Local dedup",
+    ]
+
+    data_sources = [
+        ("Wikipedia", [100, 90, 80, 70, 60, 50, 40, 30, 20]),
+        ("Freelaw", [100, 90, 80, 70, 60, 50, 40, 20, 20]),
+        ("DM Maths", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("USPTO", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PG19", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Hackernews", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Ubuntu IRC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Europarl", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("StackExchange", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("Arxiv", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("S2ORC", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("S2ORC Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PubMed Central", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PubMed Central Abstract", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+        ("PhilPapers", [100, 90, 80, 70, 60, 40, 40, 30, 20]),
+    ]
+
+    for name, x_values in data_sources:
+        fig.add_trace(
+            go.Funnel(
+                name=name,
+                orientation="h",
+                y=filter_names,
+                x=x_values,
+                textinfo="value+percent total",
+                textposition="inside",
+            )
+        )
+
+    # Serialize the Plotly figure to JSON
+    fig_json = fig.to_json()
+    return fig
+
+
+@app.get("/curated")
+def curated():
+    return Div(plotly2fasthtml(get_chart_28168342()), id="inner-text")
+
+
+@app.get("/common")
+def common_steps():
+    return Div(Section(H2(P("Common Steps")), id="inner-text"))
+
+
+@app.get("/results")
+def results():
+    return Div(Section(H2(P("Results")), id="inner-text"))
+
+
 serve()

style.css

@@ -63,6 +63,7 @@
     gap: 10px;
 }
 
+
 .plotly_slider > input[type="range"] {
     -webkit-appearance: none;
     height: 2px;
@@ -138,6 +139,7 @@ d-byline .byline {
   line-height: 1.8em;
 }
 
+
 @media (min-width: 768px) {
   d-byline .byline {
     grid-template-columns: 5fr 1fr 1fr;
@@ -173,10 +175,11 @@ d-contents a:hover {
 }
 
 
-@media (min-width: 1200px) {
+@media (min-width: 1100px) {
     d-article {
         /* Ensure d-article does not prevent sticky positioning */
-        overflow-x: visible !important;
+        overflow-x: visible;
+        grid-template-columns: [page-start] 1fr [page-start kicker-start] 1fr [middle-start] 1fr [text-start kicker-end] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end gutter-start] 1fr [middle-end] 0fr [page-end gutter-end] 1fr [screen-end];
     }
 
     d-contents {