diff --git a/render.py b/render.py index 8f2dc57..18b0067 100644 --- a/render.py +++ b/render.py @@ -11,6 +11,8 @@ import subprocess import base64 import hashlib +import io +from PIL import Image logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s') @@ -24,7 +26,7 @@ "plotnine": "plotnine", "lets-plot": "lets-plot", "plotly": "plotly", - "hvplot": "hvplot (Bokeh)", + "hvplot": "hvPlot (Bokeh)", "altair": "Altair", "ggplot": "ggplot2 (R)", } @@ -49,18 +51,29 @@ intro = f.read() +WEBP_QUALITY = 85 + + def image_from_cell(cell): + """Save the cell's PNG output as WebP and return its path and pixel size. + + The filename stays the MD5 of the base64 PNG, so a plot that hasn't changed + keeps its URL. The pixel size lets the template declare width/height, which + reserves layout space for the lazily loaded images. + """ try: for c in cell['outputs']: if 'data' in c and 'image/png' in c['data']: base64_img = c['data']['image/png'].replace("\n", "").strip() filename = hashlib.md5() filename.update(base64_img.encode('ascii')) - web_path = "/img/plots/{}.png".format(filename.hexdigest()) + web_path = "/img/plots/{}.webp".format(filename.hexdigest()) full_path = "web" + web_path - with open(full_path, "wb") as fh: - fh.write(base64.b64decode(base64_img)) - return web_path + image = Image.open(io.BytesIO(base64.b64decode(base64_img))) + if image.mode not in ("RGB", "RGBA"): + image = image.convert("RGBA") + image.save(full_path, "WEBP", quality=WEBP_QUALITY, method=6) + return {"path": web_path, "width": image.width, "height": image.height} except KeyError as e: logging.error("Can't find image in cell: %s", cell['source']) raise e @@ -145,7 +158,9 @@ def extract_cells(path): "cell_num": cell_num, "package": packages.get(tags["package"], tags["package"]), "package-slug": tags['package'], - "image": image, + "image": image["path"], + "image-width": image["width"], + "image-height": image["height"], "content": source, "comment": md.convert(comment) or None, }) diff --git a/templates/t_index.html b/templates/t_index.html index f1aa2a6..0b65080 100644 --- a/templates/t_index.html +++ b/templates/t_index.html @@ -4,20 +4,28 @@ - + Python Plotting for Exploratory Analysis + + - - + + + + - + content="Side-by-side comparison of Python plotting libraries for exploratory data analysis: pandas, Matplotlib, Seaborn, plotnine, Lets-Plot, plotly, hvPlot, and Altair, with R's ggplot2 for reference." /> + + + + @@ -74,7 +82,7 @@
-
+

Python Plotting for Exploratory Data Analysis

@@ -96,7 +104,7 @@

Contents

-
+
{% for name, table in data.items() %}
{{ name }}
@@ -105,17 +113,17 @@
{{ name }}
-
+
{% for (name, slug), items in plots.items() %} + {% set outer_loop = loop %}
-

{{ name }}

-
    +

    {{ name }}#

    + @@ -124,17 +132,21 @@

    {% for plot in items %} + {% set eager = outer_loop.first and loop.first %}
    -
    +
    - + {{ name }} drawn with {{ plot['package'] }}
    -
    -
    Code:
    - {% if plot['package'] == "ggplot" %} +
    +
    +
    Code:
    + +
    + {% if plot['package-slug'] == "ggplot" %} {% highlight 'R' %}{{ plot['content'] }}{% endhighlight %} {% else %} {% highlight 'python' %}{{ plot['content'] }}{% endhighlight %} @@ -179,7 +191,30 @@
    Note:
    event.preventDefault(); $(this).ekkoLightbox({alwaysShowClose: true}); }); - $.bigfoot(); + + + diff --git a/web/css/custom.css b/web/css/custom.css index 4e16bcd..e8e565b 100644 --- a/web/css/custom.css +++ b/web/css/custom.css @@ -27,6 +27,83 @@ table { font-family: monospace; } +/* Subtle deep-link anchor next to each plot heading. */ +.anchor-link { + color: #adb5bd; + font-weight: 400; + margin-left: .4rem; + opacity: .45; + text-decoration: none; +} + +.anchor-link:hover, +.anchor-link:focus { + color: #495057; + opacity: 1; + text-decoration: none; +} + +/* Library selector: compact chips that wrap neatly instead of ragged folder tabs. */ +.library-pills { + gap: .25rem; + margin-left: 0; + margin-right: 0; + margin-top: .35rem; +} + +.library-pills .nav-item { + margin: 0; +} + +.library-pills .nav-link { + background-color: #fff; + border: 1px solid #e0e2e5; + border-radius: 50rem; + color: #495057; + font-size: .85rem; + line-height: 1.3; + padding: .2rem .6rem; + transition: background-color .12s ease, border-color .12s ease, color .12s ease; + white-space: nowrap; +} + +.library-pills .nav-link:hover, +.library-pills .nav-link:focus { + background-color: #eceef0; + border-color: #cfd3d7; + color: #212529; + text-decoration: none; +} + +.library-pills .nav-link.active, +.library-pills .nav-link.active:hover, +.library-pills .nav-link.active:focus { + background-color: #202020; + border-color: #202020; + color: #fff; +} + +/* Copy button sitting in the dark code panel header. */ +.copy-btn { + background: transparent; + border: 1px solid #4a4a4a; + border-radius: 3px; + color: #9a9a9a; + cursor: pointer; + font-size: .75rem; + line-height: 1.2; + min-width: 4.5rem; + padding: .15rem .5rem; + transition: color .15s ease, border-color .15s ease; +} + +.copy-btn:hover, +.copy-btn:focus { + border-color: #7a7a7a; + color: #e6e6e6; + outline: none; +} + @media (min-width: 1600px) { .container { width: 1440px;