plotjs 0.0.2__py3-none-any.whl

plotjs/static/default.css

@@ -0,0 +1,40 @@
+:root {
+  --default-opacity: 1;
+  --default-not-hovered-opacity: 0.2;
+  --default-transition: opacity 0.1s ease;
+}
+
+svg {
+  width: 100%;
+  height: auto;
+}
+
+.tooltip {
+  position: absolute;
+  background: #001d3d;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 14px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  display: none;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+}
+
+.plot-element {
+  opacity: var(--default-opacity);
+  transition: var(--default-transition);
+}
+
+.plot-element:hover {
+  opacity: var(--default-opacity);
+}
+
+.plot-element.not-hovered {
+  opacity: var(--default-not-hovered-opacity);
+}
+
+.plot-element.hovered {
+  opacity: var(--default-opacity);
+}

plotjs/static/main.js

@@ -0,0 +1,143 @@
+(function () {
+  class PlotSVGParser {
+    constructor(
+      svg,
+      tooltip,
+      tooltip_labels,
+      tooltip_groups,
+      show_tooltip,
+      tooltip_x_shift,
+      tooltip_y_shift
+    ) {
+      this.svg = svg;
+      this.tooltip = tooltip;
+      this.tooltip_labels = tooltip_labels;
+      this.tooltip_groups = tooltip_groups;
+      this.show_tooltip = show_tooltip;
+      this.tooltip_x_shift = tooltip_x_shift;
+      this.tooltip_y_shift = tooltip_y_shift;
+    }
+
+    find_bars(svg) {
+      // select all #patch
+      const bars = svg.selectAll('g[id^="patch"]').filter(function () {
+        const path = d3.select(this).select("path");
+
+        // that have a clip-path attribute
+        const clip = path.attr("clip-path");
+
+        // starting with "url("
+        return clip && clip.startsWith("url(");
+      });
+
+      bars.attr("class", "bar plot-element");
+      this.bars = bars;
+      return bars;
+    }
+
+    find_points(svg) {
+      const self = this;
+      // select all <use> in #PathCollection_1
+      const points = svg.selectAll('g[id^="PathCollection"] use');
+
+      points.attr("class", "point plot-element").each(function (_, i) {
+        d3.select(this).attr("data-group", self.tooltip_groups[i]);
+      });
+      this.points = points;
+      return points;
+    }
+
+    find_lines(svg) {
+      // select all <path> of Line2D elements
+      const lines = svg.selectAll('g[id^="line2d"] path').filter(function () {
+        return !this.closest('g[id^="matplotlib.axis"]');
+      });
+
+      lines.attr("class", "line plot-element");
+      this.lines = lines;
+      return lines;
+    }
+
+    find_areas(svg) {
+      // select all <path> of FillBetweenPolyCollection elements
+      const areas = svg.selectAll('g[id^="FillBetweenPolyCollection"] path');
+
+      areas.attr("class", "area plot-element");
+      this.areas = areas;
+      return areas;
+    }
+
+    setHoverEffect(plot_element) {
+      const self = this;
+      plot_element
+        .on("mouseover", function (event, d) {
+          const nodes = plot_element.nodes();
+          let i = nodes.indexOf(this);
+
+          const hovered_group = self.tooltip_groups[i];
+          plot_element.classed("not-hovered", true);
+          plot_element
+            .filter((_, j) => {
+              return self.tooltip_groups[j] === hovered_group;
+            })
+            .classed("not-hovered", false)
+            .classed("hovered", true);
+
+          tooltip
+            .style("display", self.show_tooltip)
+            .style("left", event.pageX + self.tooltip_x_shift + "px")
+            .style("top", event.pageY + self.tooltip_y_shift + "px")
+            .html(self.tooltip_labels[i]);
+        })
+        .on("mouseout", function () {
+          plot_element.classed("not-hovered", false).classed("hovered", false);
+          self.tooltip.style("display", "none");
+        });
+    }
+  }
+
+  const container = document.getElementById("{{ chart_id }}");
+  if (!container) return;
+
+  const tooltip = d3.select("#tooltip-{{ uuid }}");
+  const svg = d3.select(container).select("svg");
+
+  const plot_data = JSON.parse(`{{ plot_data_json | tojson | safe }}`);
+  const tooltip_labels = plot_data["tooltip_labels"];
+  const tooltip_groups = plot_data["tooltip_groups"];
+  const tooltip_x_shift = plot_data["tooltip_x_shift"];
+  const tooltip_y_shift = -plot_data["tooltip_y_shift"];
+
+  // no tooltip? no problem
+  if (tooltip_labels.length === 0 && tooltip_groups.length === 0) {
+    return; // Exit early
+  }
+  let show_tooltip;
+  if (tooltip_labels.length === 0 && tooltip_groups.length > 0) {
+    show_tooltip = "none";
+  } else {
+    show_tooltip = "block";
+  }
+
+  plotParser = new PlotSVGParser(
+    svg,
+    tooltip,
+    tooltip_labels,
+    tooltip_groups,
+    show_tooltip,
+    tooltip_x_shift,
+    tooltip_y_shift
+  );
+
+  // find all core plot elements
+  lines = plotParser.find_lines(svg);
+  bars = plotParser.find_bars(svg);
+  points = plotParser.find_points(svg);
+  areas = plotParser.find_areas(svg);
+
+  // give them the hover effect
+  plotParser.setHoverEffect(points);
+  plotParser.setHoverEffect(lines);
+  plotParser.setHoverEffect(bars);
+  plotParser.setHoverEffect(areas);
+})();

plotjs/static/template.html

@@ -0,0 +1,163 @@
+{% set chart_id = "plot-container-" + uuid %}
+
+<div id="{{ chart_id }}">
+  <style>
+    {{ default_css | safe }}
+    {{ additional_css | safe }}
+  </style>
+
+  {{ svg | safe }}
+  <div class="tooltip" id="tooltip-{{ uuid }}"></div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
+<script>
+  (function () {
+    class PlotSVGParser {
+      constructor(
+        svg,
+        tooltip,
+        tooltip_labels,
+        tooltip_groups,
+        show_tooltip,
+        tooltip_x_shift,
+        tooltip_y_shift
+      ) {
+        this.svg = svg;
+        this.tooltip = tooltip;
+        this.tooltip_labels = tooltip_labels;
+        this.tooltip_groups = tooltip_groups;
+        this.show_tooltip = show_tooltip;
+        this.tooltip_x_shift = tooltip_x_shift;
+        this.tooltip_y_shift = tooltip_y_shift;
+      }
+
+      find_bars(svg) {
+        // select all #patch
+        const bars = svg.selectAll('g[id^="patch"]').filter(function () {
+          const path = d3.select(this).select("path");
+
+          // that have a clip-path attribute
+          const clip = path.attr("clip-path");
+
+          // starting with "url("
+          return clip && clip.startsWith("url(");
+        });
+
+        bars.attr("class", "bar plot-element");
+        this.bars = bars;
+        return bars;
+      }
+
+      find_points(svg) {
+        const self = this;
+        // select all <use> in #PathCollection_1
+        const points = svg.selectAll('g[id^="PathCollection"] use');
+
+        points.attr("class", "point plot-element").each(function (_, i) {
+          d3.select(this).attr("data-group", self.tooltip_groups[i]);
+        });
+        this.points = points;
+        return points;
+      }
+
+      find_lines(svg) {
+        // select all <path> of Line2D elements
+        const lines = svg.selectAll('g[id^="line2d"] path').filter(function () {
+          return !this.closest('g[id^="matplotlib.axis"]');
+        });
+
+        lines.attr("class", "line plot-element");
+        this.lines = lines;
+        return lines;
+      }
+
+      find_areas(svg) {
+        // select all <path> of FillBetweenPolyCollection elements
+        const areas = svg.selectAll('g[id^="FillBetweenPolyCollection"] path');
+
+        areas.attr("class", "area plot-element");
+        this.areas = areas;
+        return areas;
+      }
+
+      setHoverEffect(plot_element) {
+        const self = this;
+        plot_element
+          .on("mouseover", function (event, d) {
+            const nodes = plot_element.nodes();
+            let i = nodes.indexOf(this);
+
+            const hovered_group = self.tooltip_groups[i];
+            plot_element.classed("not-hovered", true);
+            plot_element
+              .filter((_, j) => {
+                return self.tooltip_groups[j] === hovered_group;
+              })
+              .classed("not-hovered", false)
+              .classed("hovered", true);
+
+            tooltip
+              .style("display", self.show_tooltip)
+              .style("left", event.pageX + self.tooltip_x_shift + "px")
+              .style("top", event.pageY + self.tooltip_y_shift + "px")
+              .html(self.tooltip_labels[i]);
+          })
+          .on("mouseout", function () {
+            plot_element
+              .classed("not-hovered", false)
+              .classed("hovered", false);
+            self.tooltip.style("display", "none");
+          });
+      }
+    }
+
+    const container = document.getElementById("{{ chart_id }}");
+    if (!container) return;
+
+    const tooltip = d3.select("#tooltip-{{ uuid }}");
+    const svg = d3.select(container).select("svg");
+
+    const plot_data = JSON.parse(`{{ plot_data_json | tojson | safe }}`);
+    const tooltip_labels = plot_data["tooltip_labels"];
+    const tooltip_groups = plot_data["tooltip_groups"];
+    const tooltip_x_shift = plot_data["tooltip_x_shift"];
+    const tooltip_y_shift = -plot_data["tooltip_y_shift"];
+
+    let show_tooltip;
+    if (tooltip_labels.length === 0 && tooltip_groups.length === 0) {
+      show_tooltip = "none";
+    } else if (tooltip_labels.length === 0 && tooltip_groups.length > 0) {
+      show_tooltip = "none";
+    } else {
+      show_tooltip = "block";
+    }
+    console.log(show_tooltip);
+
+    plotParser = new PlotSVGParser(
+      svg,
+      tooltip,
+      tooltip_labels,
+      tooltip_groups,
+      show_tooltip,
+      tooltip_x_shift,
+      tooltip_y_shift
+    );
+
+    // find all core plot elements
+    lines = plotParser.find_lines(svg);
+    bars = plotParser.find_bars(svg);
+    points = plotParser.find_points(svg);
+    areas = plotParser.find_areas(svg);
+
+    // give them the hover effect
+    plotParser.setHoverEffect(points);
+    plotParser.setHoverEffect(lines);
+    plotParser.setHoverEffect(bars);
+    plotParser.setHoverEffect(areas);
+  })();
+</script>
+<script>
+  // prettier-ignore
+  {{ additional_javascript | safe }}
+</script>

plotjs/utils.py

@@ -0,0 +1,30 @@
+import narwhals.stable.v2 as nw
+from narwhals.stable.v2.dependencies import is_numpy_array, is_into_series
+
+
+def _vector_to_list(vector, name="labels and groups") -> list:
+    """
+    Function used to easily convert various kind of iterables to
+    lists in order to have standardised objects passed to javascript.
+
+    It accepts all backend series from narwhals and common objects
+    such as numpy arrays.
+
+    Todo: test this extensively to make sure it behaves as expected.
+
+    Args:
+        vector: A valid iterable.
+        name: The name passed to the error message when type is
+            invalid.
+
+    Returns:
+        A list
+    """
+    if isinstance(vector, (list, tuple)) or is_numpy_array(vector):
+        return list(vector)
+    elif is_into_series(vector):
+        return nw.from_native(vector, allow_series=True).to_list()
+    else:
+        raise ValueError(
+            f"{name} must be a Series or a valid iterable (list, tuple, ndarray...)."
+        )

plotjs-0.0.2.dist-info/METADATA

@@ -0,0 +1,47 @@
+Metadata-Version: 2.4
+Name: plotjs
+Version: 0.0.2
+Summary: Bridge between static matplotlib and interactive storytelling
+Author-email: Joseph Barbier <joseph.barbierdarnal@mail.com>
+License-Expression: MIT
+Project-URL: Homepage, https://y-sunflower.github.io/plotjs/
+Project-URL: Issues, https://github.com/y-sunflower/plotjs/issues
+Project-URL: Documentation, https://y-sunflower.github.io/plotjs/
+Project-URL: Repository, https://github.com/y-sunflower/plotjs
+Keywords: matplotlib,interactive,javascript,web,css,d3,mpld3,plotnine
+Classifier: Programming Language :: Python :: 3
+Classifier: Operating System :: OS Independent
+Classifier: Development Status :: 3 - Alpha
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: jinja2>=3.0.0
+Requires-Dist: matplotlib>=3.10.0
+Requires-Dist: narwhals>=2.0.0
+Dynamic: license-file
+
+# `plotjs`: bridge between static matplotlib and interactive storytelling
+
+`plotjs` is a proof of concept, inspired by [mpld3](https://github.com/mpld3/mpld3), to make matplotlib plots interactive (for the browser) with minimum user inputs.
+
+The goal is also to give users a large customization power.
+
+> Consider that the project is still **very unstable**.
+
+[Online demo](https://y-sunflower.github.io/plotjs/)
+
+<br><br>
+
+## Installation
+
+From PyPI:
+
+```
+pip install plotjs
+```
+
+Latest dev version:
+
+```
+pip install git+https://github.com/y-sunflower/plotjs.git
+```

plotjs-0.0.2.dist-info/RECORD

@@ -0,0 +1,19 @@
+plotjs/__init__.py,sha256=4L3ltmmCawwuJREKrJ_VuyiRlUaeHYrzTkJN6WDkmLc,93
+plotjs/css.py,sha256=Xb5u5v6jbQxrwkgohbXdxdoLRXjHVE61hKIpNL4eT98,2402
+plotjs/javascript.py,sha256=95MXk8D3hQzCQBrEBTogyCThkXGrno_hVQyjgc1_hZQ,488
+plotjs/main.py,sha256=1TNku47gDU8lclbcnux3XoF8s6VP_tKXEE62rJFPfHw,8038
+plotjs/utils.py,sha256=nz5rCdhos08lnnhYBaz6ZgYe7XaYA8ZyuMeeBWpi2Qo,974
+plotjs/data/__init__.py,sha256=zyH9-p1G2B-6KQSQpsQLYpyzfrUa3phUc97a71FGGkM,152
+plotjs/data/datasets.py,sha256=RtdRtrk-fAf3HpcVmc6MsuwR6ucyQU7hE7uvCgnmNpw,3448
+plotjs/data/iris.csv,sha256=xSdC5QMVqZ-Vajg_rt91dVUmdfZAnvD5pHB23QhHmTA,3858
+plotjs/data/mtcars.csv,sha256=t9kUtdR8c7PqWquOcpiIbXDG_fhzCH3w1KOCOT-BBls,1700
+plotjs/data/titanic.csv,sha256=SkN_3gX-UmThcBpzh6xvt1OTdyuji7LJxWZAWvWvS9c,60302
+plotjs/static/d3.min.js,sha256=8glLv2FBs1lyLE_kVOtsSw8OQswQzHr5IfwVj864ZTk,279706
+plotjs/static/default.css,sha256=eSaoCCCwJKSSN4eU4WwAPHzvXX_hIGKM-TCIxENhTVI,729
+plotjs/static/main.js,sha256=xRf-VGZhlKs9JDRUM-9mxckmZXkUd9F6ft9aMUfF_zw,4167
+plotjs/static/template.html,sha256=eOmR8yCIx4DmH4ptoscS8JIKxNR9QWK0djNfcOdnejQ,4861
+plotjs-0.0.2.dist-info/licenses/LICENSE,sha256=0tiC65L_9U5H0FD8LV6N8t8kI1iLDPVDLCK2qenV9w4,1071
+plotjs-0.0.2.dist-info/METADATA,sha256=hcomZFuoZcRDw8G9hoBY6glisuQQHG0_Hid5BD4o9t0,1442
+plotjs-0.0.2.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+plotjs-0.0.2.dist-info/top_level.txt,sha256=kDec-84OOKAI1HbXjkuHx3mOw0P2JDxW_tAbwuYscAc,7
+plotjs-0.0.2.dist-info/RECORD,,

plotjs-0.0.2.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (80.9.0)
+Root-Is-Purelib: true
+Tag: py3-none-any
+

plotjs-0.0.2.dist-info/licenses/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Joseph Barbier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plotjs-0.0.2.dist-info/top_level.txt

@@ -0,0 +1 @@
+plotjs