plotjs 0.0.3__tar.gz → 0.0.4__tar.gz

{plotjs-0.0.3 → plotjs-0.0.4}/.github/workflows/tests.yaml

@@ -1,4 +1,4 @@
-name: Unit tests
+name: Tests (Python + JS)
 
 on:
   pull_request:
@@ -24,5 +24,8 @@ jobs:
       - name: Install the project
         run: uv sync --all-groups
 
+      - name: Install npm dependencies
+        run: npm install
+
       - name: Run tests
-        run: uv run pytest
+        run: make test

{plotjs-0.0.3 → plotjs-0.0.4}/.gitignore

@@ -32,3 +32,5 @@ sandbox/
 scripts/release.sh
 
 /.quarto/
+
+node_modules

{plotjs-0.0.3 → plotjs-0.0.4}/Makefile

@@ -1,4 +1,4 @@
-.PHONY: all examples coverage
+.PHONY: all examples gallery
 
 examples:
 	quarto render docs/index.qmd
@@ -17,4 +17,5 @@ coverage:
 	rm coverage.xml
 
 test:
-	uv run pytest
+	uv run pytest    # run python tests
+	npm test         # run javascript tests

{plotjs-0.0.3/plotjs.egg-info → plotjs-0.0.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: plotjs
-Version: 0.0.3
+Version: 0.0.4
 Summary: Turn static matplotlib charts into interactive web visualizations
 Author-email: Joseph Barbier <joseph.barbierdarnal@mail.com>
 License-Expression: MIT

{plotjs-0.0.3 → plotjs-0.0.4}/coverage-badge.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="114" height="20" role="img" aria-label="coverage: 92.19%"><title>coverage: 92.19%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="114" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="53" height="20" fill="#4c1"/><rect width="114" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="315" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="510">coverage</text><text x="315" y="140" transform="scale(.1)" fill="#fff" textLength="510">coverage</text><text aria-hidden="true" x="865" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">92.19%</text><text x="865" y="140" transform="scale(.1)" fill="#fff" textLength="430">92.19%</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="114" height="20" role="img" aria-label="coverage: 93.02%"><title>coverage: 93.02%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="114" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="53" height="20" fill="#4c1"/><rect width="114" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="315" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="510">coverage</text><text x="315" y="140" transform="scale(.1)" fill="#fff" textLength="510">coverage</text><text aria-hidden="true" x="865" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">93.02%</text><text x="865" y="140" transform="scale(.1)" fill="#fff" textLength="430">93.02%</text></g></svg>

{plotjs-0.0.3 → plotjs-0.0.4}/docs/gallery/index.md

@@ -18,11 +18,11 @@ This page contains all the `plotjs` examples from this website.
 
 <div style="display: flex;">
 
-<iframe width="100%" height="300" src="../iframes/quickstart4.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/area-natural-disasters.html" style="flex: 1; border: none;">
 
 </iframe>
 
-<iframe width="100%" height="300" src="../iframes/quickstart5.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart4.html" style="flex: 1; border: none;">
 
 </iframe>
 
@@ -30,11 +30,11 @@ This page contains all the `plotjs` examples from this website.
 
 <div style="display: flex;">
 
-<iframe width="100%" height="300" src="../iframes/quickstart9.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart5.html" style="flex: 1; border: none;">
 
 </iframe>
 
-<iframe width="100%" height="300" src="../iframes/CSS.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart9.html" style="flex: 1; border: none;">
 
 </iframe>
 
@@ -42,19 +42,31 @@ This page contains all the `plotjs` examples from this website.
 
 <div style="display: flex;">
 
+<iframe width="100%" height="300" src="../iframes/CSS.html" style="flex: 1; border: none;">
+
+</iframe>
+
 <iframe width="100%" height="300" src="../iframes/quickstart2.html" style="flex: 1; border: none;">
 
 </iframe>
 
+</div>
+
+<div style="display: flex;">
+
 <iframe width="100%" height="300" src="../iframes/javascript.html" style="flex: 1; border: none;">
 
 </iframe>
 
+<iframe width="100%" height="300" src="../iframes/quickstart3.html" style="flex: 1; border: none;">
+
+</iframe>
+
 </div>
 
 <div style="display: flex;">
 
-<iframe width="100%" height="300" src="../iframes/quickstart3.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart10.html" style="flex: 1; border: none;">
 
 </iframe>
 

plotjs-0.0.4/docs/guides/advanced/advanced.py

@@ -0,0 +1,213 @@
+from plotjs import MagicPlot, css
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+from pypalettes import load_cmap
+from highlight_text import fig_text, ax_text
+from pyfonts import load_google_font
+from drawarrow import ax_arrow
+
+url = "https://raw.githubusercontent.com/holtzy/The-Python-Graph-Gallery/master/static/data/disaster-events.csv"
+df = pd.read_csv(url)
+
+
+def remove_agg_rows(entity: str):
+    if entity.lower().startswith("all disasters"):
+        return False
+    else:
+        return True
+
+
+df = df.replace("Dry mass movement", "Drought")
+df = df[df["Entity"].apply(remove_agg_rows)]
+df = df[~df["Entity"].isin(["Fog", "Glacial lake outburst flood"])]
+df = df.pivot_table(index="Entity", columns="Year", values="Disasters").T
+df.loc[1900, :] = df.loc[1900, :].fillna(0)
+df = df[df.index >= 1960]
+df = df[df.index <= 2023]
+df = df.interpolate(axis=1)
+df.head()
+
+# set up the font properties
+font = load_google_font("Bebas Neue")
+other_font = load_google_font("Fira Sans", weight="light")
+other_bold_font = load_google_font("Fira Sans", weight="medium")
+
+# initialize the figure
+fig, ax = plt.subplots(figsize=(14, 7), dpi=300)
+ax.set_axis_off()
+
+# define the x-axis variable and order the columns
+columns = df.sum().sort_values().index.to_list()
+x = df.index
+
+# defines color map and mapping with columns
+colors = load_cmap("Dali").colors
+color_mapping = {
+    "Flood": colors[4],
+    "Volcanic activity": colors[0],
+    "Wildfire": colors[6],
+    "Drought": colors[7],
+    "Extreme temperature": colors[5],
+    "Wet mass movement": colors[3],
+    "Earthquake": colors[2],
+    "Extreme weather": colors[1],
+}
+colors = [color_mapping[col] for col in columns]
+
+# create the stacked area plot
+areas = np.stack(df[columns].values, axis=-1)
+ax.stackplot(x, areas, colors=colors)
+
+# add label for the x-axis
+for year in range(1960, 2030, 10):
+    ax_text(
+        x=year,
+        y=-10,
+        s=f"{year}",
+        va="top",
+        ha="left",
+        fontsize=13,
+        font=font,
+        color="grey",
+    )
+
+# add label for the y-axis
+for value in range(100, 400, 100):
+    ax_text(
+        x=1960,
+        y=value,
+        s=f"{value}",
+        va="center",
+        ha="left",
+        fontsize=13,
+        font=font,
+        color="grey",
+    )
+    ax.plot([1963, 2023], [value, value], color="grey", lw=0.1)
+
+# add title
+fig_text(
+    s="More than 1 natural disaster occurs\n<every day> since the 21st century",
+    x=0.16,
+    y=0.83,
+    fontsize=24,
+    ha="left",
+    va="top",
+    color="black",
+    font=other_font,
+    fig=fig,
+    highlight_textprops=[{"font": other_bold_font}],
+)
+
+# source and credit
+text = """
+<Design>: barbierjoseph.com
+<Data>: EM-DAT, CRED / UCLouvain (2024)
+"""
+fig_text(
+    s=text,
+    x=0.16,
+    y=0.05,
+    fontsize=10,
+    ha="left",
+    va="top",
+    color="black",
+    fontproperties=other_font,
+    highlight_textprops=[{"font": other_bold_font}, {"font": other_bold_font}],
+)
+
+# add inline labels
+y_pos = [330, 220, 180, 100, 70, 30, -10, -30]
+for i in range(len(y_pos)):
+    country = columns[::-1][i]
+    val_2023 = int(df.loc[2023, country])
+    ax_text(
+        x=2030,
+        y=y_pos[i],
+        s=f"{country.upper()} - {val_2023} disasters in 2023",
+        va="center",
+        ha="left",
+        font=other_bold_font,
+        fontsize=12,
+        color=colors[7 - i],
+    )
+
+# add inflexion arrows
+x_axis_start = 2023
+x_axis_end = 2030
+radius = 10
+arrow_props = {"clip_on": False, "color": "black", "fill_head": False}
+ax_arrow(
+    tail_position=(x_axis_start, 330), head_position=(x_axis_end, 330), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 220), head_position=(x_axis_end, 220), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 90),
+    head_position=(x_axis_end, 180),
+    inflection_position=(2040, 180),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 60),
+    head_position=(x_axis_end, 100),
+    inflection_position=(2040, 100),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 45),
+    head_position=(x_axis_end, 70),
+    inflection_position=(2040, 70),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 30), head_position=(x_axis_end, 30), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 20),
+    head_position=(x_axis_end, -10),
+    inflection_position=(2040, -10),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 4),
+    head_position=(x_axis_end, -30),
+    inflection_position=(2040, -30),
+    **arrow_props,
+)
+plt.savefig("debug.svg")
+
+MagicPlot(fig, bbox_inches="tight").add_css(
+    css.from_dict(
+        {
+            ".tooltip": {
+                "width": "180px",
+                "text-align": "center",
+                "font-size": "1.2em",
+                "background": "#000814",
+            }
+        }
+    )
+).add_tooltip(labels=columns).save("docs/iframes/area-natural-disasters.html")
+
+#####################################################
+
+
+(
+    MagicPlot(fig)
+    .add_css(
+        css.from_dict(
+            {
+                ".tooltip": {
+                    "width": "180px",
+                    "text-align": "center",
+                    "font-size": "1.2em",
+                    "background": "#000814",
+                }
+            }
+        )
+    )
+    .add_tooltip(labels=columns)
+)

plotjs-0.0.4/docs/guides/advanced/index.md

@@ -0,0 +1,201 @@
+# TODO: find cool examples to showcase here
+
+## Natural disasters
+
+```py
+from plotjs import MagicPlot, css
+import pandas as pd
+import numpy as np
+import matplotlib.pyplot as plt
+from pypalettes import load_cmap
+from highlight_text import fig_text, ax_text
+from pyfonts import load_google_font
+from drawarrow import ax_arrow
+
+url = "https://raw.githubusercontent.com/holtzy/The-Python-Graph-Gallery/master/static/data/disaster-events.csv"
+df = pd.read_csv(url)
+
+
+def remove_agg_rows(entity: str):
+    if entity.lower().startswith("all disasters"):
+        return False
+    else:
+        return True
+
+
+df = df.replace("Dry mass movement", "Drought")
+df = df[df["Entity"].apply(remove_agg_rows)]
+df = df[~df["Entity"].isin(["Fog", "Glacial lake outburst flood"])]
+df = df.pivot_table(index="Entity", columns="Year", values="Disasters").T
+df.loc[1900, :] = df.loc[1900, :].fillna(0)
+df = df[df.index >= 1960]
+df = df[df.index <= 2023]
+df = df.interpolate(axis=1)
+df.head()
+
+# set up the font properties
+font = load_google_font("Bebas Neue")
+other_font = load_google_font("Fira Sans", weight="light")
+other_bold_font = load_google_font("Fira Sans", weight="medium")
+
+# initialize the figure
+fig, ax = plt.subplots(figsize=(14, 7), dpi=300)
+ax.set_axis_off()
+
+# define the x-axis variable and order the columns
+columns = df.sum().sort_values().index.to_list()
+x = df.index
+
+# defines color map and mapping with columns
+colors = load_cmap("Dali").colors
+color_mapping = {
+    "Flood": colors[4],
+    "Volcanic activity": colors[0],
+    "Wildfire": colors[6],
+    "Drought": colors[7],
+    "Extreme temperature": colors[5],
+    "Wet mass movement": colors[3],
+    "Earthquake": colors[2],
+    "Extreme weather": colors[1],
+}
+colors = [color_mapping[col] for col in columns]
+
+# create the stacked area plot
+areas = np.stack(df[columns].values, axis=-1)
+ax.stackplot(x, areas, colors=colors)
+
+# add label for the x-axis
+for year in range(1960, 2030, 10):
+    ax_text(
+        x=year,
+        y=-10,
+        s=f"{year}",
+        va="top",
+        ha="left",
+        fontsize=13,
+        font=font,
+        color="grey",
+    )
+
+# add label for the y-axis
+for value in range(100, 400, 100):
+    ax_text(
+        x=1960,
+        y=value,
+        s=f"{value}",
+        va="center",
+        ha="left",
+        fontsize=13,
+        font=font,
+        color="grey",
+    )
+    ax.plot([1963, 2023], [value, value], color="grey", lw=0.1)
+
+# add title
+fig_text(
+    s="More than 1 natural disaster occurs\n<every day> since the 21st century",
+    x=0.16,
+    y=0.83,
+    fontsize=24,
+    ha="left",
+    va="top",
+    color="black",
+    font=other_font,
+    fig=fig,
+    highlight_textprops=[{"font": other_bold_font}],
+)
+
+# source and credit
+text = """
+<Design>: barbierjoseph.com
+<Data>: EM-DAT, CRED / UCLouvain (2024)
+"""
+fig_text(
+    s=text,
+    x=0.16,
+    y=0.05,
+    fontsize=10,
+    ha="left",
+    va="top",
+    color="black",
+    fontproperties=other_font,
+    highlight_textprops=[{"font": other_bold_font}, {"font": other_bold_font}],
+)
+
+# add inline labels
+y_pos = [330, 220, 180, 100, 70, 30, -10, -30]
+for i in range(len(y_pos)):
+    country = columns[::-1][i]
+    val_2023 = int(df.loc[2023, country])
+    ax_text(
+        x=2030,
+        y=y_pos[i],
+        s=f"{country.upper()} - {val_2023} disasters in 2023",
+        va="center",
+        ha="left",
+        font=other_bold_font,
+        fontsize=12,
+        color=colors[7 - i],
+    )
+
+# add inflexion arrows
+x_axis_start = 2023
+x_axis_end = 2030
+radius = 10
+arrow_props = {"clip_on": False, "color": "black", "fill_head": False}
+ax_arrow(
+    tail_position=(x_axis_start, 330), head_position=(x_axis_end, 330), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 220), head_position=(x_axis_end, 220), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 90),
+    head_position=(x_axis_end, 180),
+    inflection_position=(2040, 180),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 60),
+    head_position=(x_axis_end, 100),
+    inflection_position=(2040, 100),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 45),
+    head_position=(x_axis_end, 70),
+    inflection_position=(2040, 70),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 30), head_position=(x_axis_end, 30), **arrow_props
+)
+ax_arrow(
+    tail_position=(x_axis_start, 20),
+    head_position=(x_axis_end, -10),
+    inflection_position=(2040, -10),
+    **arrow_props,
+)
+ax_arrow(
+    tail_position=(x_axis_start, 4),
+    head_position=(x_axis_end, -30),
+    inflection_position=(2040, -30),
+    **arrow_props,
+)
+plt.savefig("debug.svg")
+
+MagicPlot(fig, bbox_inches="tight").add_css(
+    css.from_dict(
+        {
+            ".tooltip": {
+                "width": "180px",
+                "text-align": "center",
+                "font-size": "1.2em",
+                "background": "#000814",
+            }
+        }
+    )
+).add_tooltip(labels=columns).save("docs/iframes/area-natural-disasters.html")
+```
+
+<iframe width="1000" height="400" src="../../iframes/area-natural-disasters.html" style="border:none;"></iframe>