Development

AGENTS.md

@@ -66,6 +66,7 @@ Always use `uv` and/or `just` for running commands:
 - `findBars(svg, axes_class)` - Select bar chart elements
 - `findPoints(svg, axes_class, tooltip_groups)` - Select scatter points
 - `findLines(svg, axes_class)` - Select line chart elements
+- `findPies(svg, axes_class)` - Select pie chart elements
 - `findAreas(svg, axes_class)` - Select filled area elements
 - `nearestElementFromMouse(mouseX, mouseY, elements)` - Hover nearest detection
 - `setHoverEffect(...)` - Attach mouseover handlers, show tooltips

README.md

@@ -96,3 +96,9 @@ Learn more in the [Q&A](https://y-sunflower.github.io/plotjs/#qa).
 - [Embedding in Quarto, marimo, or websites](https://y-sunflower.github.io/plotjs/guides/embed-graphs/)
 - [Troubleshooting](https://y-sunflower.github.io/plotjs/guides/troubleshooting/)
 - [Developer architecture overview](https://y-sunflower.github.io/plotjs/developers/overview)
+
+<br>
+
+## Contribution
+
+Looking to contribute? Check out the [contributing guide](https://y-sunflower.github.io/plotjs/developers/contributing/). You can get an overview of how the project works [here](https://y-sunflower.github.io/plotjs/developers/overview/), and in the [AGENTS.md file](https://github.com/y-sunflower/plotjs/blob/main/AGENTS.md).

docs/developers/svg-parser-reference.md

@@ -27,6 +27,12 @@ Provides basic DOM manipulation methods for working with SVG elements.</p>
 Handles both <code>&lt;use&gt;</code> and <code>&lt;path&gt;</code> fallback cases,
 and assigns <code>data-group</code> attributes based on tooltip groups.</p>
 </dd>
+<dt><a href="#findRectangles">findRectangles(svg, axes_class)</a> ⇒ <code><a href="#Selection">Selection</a></code></dt>
+<dd><p>Find rectangle elements inside a given axes.</p>
+</dd>
+<dt><a href="#findPies">findPies(svg, axes_class)</a> ⇒ <code><a href="#Selection">Selection</a></code></dt>
+<dd><p>Find pie elements (<code>patch</code> paths) inside a given axes.</p>
+</dd>
 <dt><a href="#findLines">findLines(svg, axes_class)</a> ⇒ <code><a href="#Selection">Selection</a></code></dt>
 <dd><p>Find line elements (<code>line2d</code> paths) inside a given axes,
 excluding axis grid lines.</p>
@@ -120,6 +126,32 @@ and assigns `data-group` attributes based on tooltip groups.
 | axes_class | <code>string</code> | ID of the axes group (e.g. "axes_1"). |
 | tooltip_groups | <code>Array.&lt;string&gt;</code> | Group identifiers for tooltips, parallel to points. |
 
+<a name="findRectangles"></a>
+
+## findRectangles(svg, axes_class) ⇒ [<code>Selection</code>](#Selection)
+Find rectangle elements inside a given axes.
+
+**Kind**: global function
+**Returns**: [<code>Selection</code>](#Selection) - Selection of rectangle elements.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| svg | [<code>Selection</code>](#Selection) | Selection of the SVG element. |
+| axes_class | <code>string</code> | ID of the axes group (e.g. "axes_1"). |
+
+<a name="findPies"></a>
+
+## findPies(svg, axes_class) ⇒ [<code>Selection</code>](#Selection)
+Find pie elements (`patch` paths) inside a given axes.
+
+**Kind**: global function
+**Returns**: [<code>Selection</code>](#Selection) - Selection of pie elements.
+
+| Param | Type | Description |
+| --- | --- | --- |
+| svg | [<code>Selection</code>](#Selection) | Selection of the SVG element. |
+| axes_class | <code>string</code> | ID of the axes group. |
+
 <a name="findLines"></a>
 
 ## findLines(svg, axes_class) ⇒ [<code>Selection</code>](#Selection)

docs/gallery/index.md

@@ -54,10 +54,22 @@ This page contains all the `plotjs` examples from this website.
 
 <div style="display: flex;">
 
+<iframe width="100%" height="300" src="../iframes/quickstart12.html" style="flex: 1; border: none;">
+
+</iframe>
+
 <iframe width="100%" height="300" src="../iframes/javascript.html" style="flex: 1; border: none;">
 
 </iframe>
 
+</div>
+
+<div style="display: flex;">
+
+<iframe width="100%" height="300" src="../iframes/quickstart13.html" style="flex: 1; border: none;">
+
+</iframe>
+
 <iframe width="100%" height="300" src="../iframes/quickstart3.html" style="flex: 1; border: none;">
 
 </iframe>
@@ -66,19 +78,19 @@ This page contains all the `plotjs` examples from this website.
 
 <div style="display: flex;">
 
-<iframe width="100%" height="300" src="../iframes/quickstart10.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/energy-consumption-france.html" style="flex: 1; border: none;">
 
 </iframe>
 
-<iframe width="100%" height="300" src="../iframes/quickstart11.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart10.html" style="flex: 1; border: none;">
 
 </iframe>
 
 </div>
 
 <div style="display: flex;">
 
-<iframe width="100%" height="300" src="../iframes/random-walk-1.html" style="flex: 1; border: none;">
+<iframe width="100%" height="300" src="../iframes/quickstart11.html" style="flex: 1; border: none;">
 
 </iframe>
 

docs/guides/advanced/advanced.py

@@ -6,6 +6,8 @@
 from highlight_text import fig_text, ax_text
 from pyfonts import load_google_font
 from drawarrow import ax_arrow
+import matplotlib.colors as mcolors
+import seaborn as sns
 
 url = "https://raw.githubusercontent.com/holtzy/The-Python-Graph-Gallery/master/static/data/disaster-events.csv"
 df = pd.read_csv(url)
@@ -192,85 +194,69 @@ def remove_agg_rows(entity: str):
     )
 ).add_tooltip(labels=columns).save("docs/iframes/area-natural-disasters.html")
 
-#####################################################
+##########################################################################@
 
+path = "https://raw.githubusercontent.com/holtzy/The-Python-Graph-Gallery/master/static/data/heatmap_data_norm.csv"
+heatmap_data_norm = pd.read_csv(path, index_col=0)
 
-size = 10000
+cmap = mcolors.LinearSegmentedColormap.from_list("", ["#2a9d8f", "#e9c46a", "#e76f51"])
 
-labels = ["S&P500", "CAC40", "Bitcoin", "Livret A", "Default"]
-groups = ["safe", "safe", "safe", "not safe", "not safe"]
+fig, ax = plt.subplots(figsize=(10, 10))
+sns.heatmap(heatmap_data_norm, ax=ax, cmap=cmap, cbar=False)
+ax.set_axis_off()
+for j, region in enumerate(heatmap_data_norm.index):
+    ax.text(
+        0.4,  # x axis position
+        j + 0.5,  # y axis position
+        f"{region}",  # text
+        ha="left",
+        va="center",
+        fontsize=17,
+        fontweight="light",
+    )
 
-fig, axs = plt.subplots(figsize=(10, 10), nrows=2)
-axs[0].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#264653",
-    label=labels[0],
-)
-axs[0].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#2a9d8f",
-    label=labels[1],
-)
-axs[0].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#e9c46a",
-    label=labels[2],
-)
-axs[0].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#0077b6",
-    label=labels[3],
-)
-axs[0].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#14213d",
-    label=labels[4],
+ax.text(
+    0,
+    12.4,
+    "Consommation d'énergie par habitant",
+    ha="left",
+    va="center",
+    fontsize=12,
+    fontweight="light",
 )
-axs[0].legend()
 
-axs[1].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#264653",
-    label=labels[0],
-)
-axs[1].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#2a9d8f",
-    label=labels[1],
-)
-axs[1].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#e9c46a",
-    label=labels[2],
-)
-axs[1].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#0077b6",
-    label=labels[3],
+ax.text(
+    0,
+    -0.2,
+    "2011",
+    ha="left",
+    va="center",
+    fontsize=12,
+    fontweight="light",
 )
-axs[1].plot(
-    np.cumsum(np.random.choice([-1, 1], size=size)),
-    linewidth=5,
-    color="#14213d",
-    label=labels[4],
+ax.text(
+    10,
+    -0.2,
+    "2021",
+    ha="left",
+    va="center",
+    fontsize=12,
+    fontweight="light",
 )
-axs[1].legend()
-
 
+labels = [
+    f"{val:.1f} MWh/hab - {region} en {i + 2011}"
+    for region, row in heatmap_data_norm.iterrows()
+    for i, val in enumerate(row)
+]
 (
     PlotJS(fig=fig)
-    .add_tooltip(labels=labels, groups=labels, ax=axs[0])
-    .add_tooltip(labels=labels, groups=labels, ax=axs[1])
-    .save("docs/iframes/random-walk-1.html")
+    .add_tooltip(labels=labels)
+    .add_css(
+        from_dict={
+            ".tooltip": {"font-size": "1.2em"},
+            ".plot-element.not-hovered": {"opacity": 0.8},
+        }
+    )
+    .save("docs/iframes/energy-consumption-france.html")
 )
-
-##########################################