charty 0.2.4 → 0.2.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d70645a4ca621ee142714f3079e85dc843585fa6364c4476d4fdd86761c3b6f
-  data.tar.gz: b4fa589a9b2c5ba31a6869399c5e90e79767d9e8e4a9a0bf0c5e2d4997725dbf
+  metadata.gz: 37ead1e86203bd6580125f4ed97039c6b512e9ae3037a0bc386743ee436f184c
+  data.tar.gz: a94e66292a866acde67c0cfc51bd8eebd5840af68e2d4112caafce80bdd37ed2
 SHA512:
-  metadata.gz: 6588c1c0105d0994cd024d08f328a6bf10241975abf4ee1b332be0a956f32d7073aed9867b5ddf708ef578e570caf733d422153a479ecae6fedef81daab391c1
-  data.tar.gz: 47999e4ce59f7cfb4263a5002b3dc070c128971257d7fed81fc23bd7314632cd441bba2ac93a0fdbeb3644d739434dad3d1cad7b465a093af6c53a5766555991
+  metadata.gz: b518be17e0ae85405285fe22022bc698d0c080e08a0682f055ae70c97655ed313038e6e2899b7c961bd73c0afe1b6b0c25bdb2085bd3a66dddd57d3e6245df55
+  data.tar.gz: 0bc460c78d178b098c65ab8737efddac0a8484abd920282d185533b72396f0abad62ea247be9e8af4286a70b7a4dc2069e88ff1675ba446af65b5c67edfb59d8

data/README.md

@@ -69,6 +69,64 @@ require "datasets"
 penguins = Datasets::Penguins.new
 ```
 
+#### A basic workflow
+
+The following code shows a basic workflow of the visualization with Charty.
+
+First you need to load the Charty library.
+
+```ruby
+require "charty"
+```
+
+Next you msut have a dataset you want to visualize.  Here, we use the penguins dataset provided in red-datasets library.
+
+```ruby
+require "datasets"
+penguins = Datasets::Penguins.new
+```
+
+Next you need to create a plotter object by a plotting method.  Here, we use `scatter_plot` method to show the relationship
+among `body_mass_g`, `flipper_length_mm`, and `species` columns in the penguins dataset.
+
+```ruby
+plot = Charty.scatter_plot(data: penguins, x: :body_mass_g, y: :flipper_length_mm, color: :species)
+```
+
+If you want to render and save this plotter object into an HTML file by plotly backend, you can do it like below.
+
+```ruby
+Charty::Backends.use(:plotly)  # select plotly backend
+plot.save("scatter.html")      # save the plot as  an HTML file
+```
+
+When you already have prepared [playwright-ruby-client](https://github.com/YusukeIwaki/playwright-ruby-client),
+you can render a plot into a PNG file by plotly backend by specifying a filename with `.png` extension.
+
+```ruby
+plot.save("scatter.png")
+```
+
+#### Jupyter Notebook
+
+If you use Charty on Jupyter Notebook with IRuby kerenl (a.k.a. IRuby notebook),
+you can render the plot just evaluate a plotter object.  For example, the code below shows a scatter plot figure in
+the output area.
+
+```ruby
+Charty::Backends.use(:plotly)
+
+Charty.scatter_plot(data: penguins, x: :body_mass_g, y: :flipper_length_mm, color: :species)
+```
+
+Note that if you want to use the pyplot backend, you need to activate the integration between the pyplot backend and IRuby.
+You can activate the integration by the following two lines.
+
+```ruby
+Charty::Backends.use(:pyplot)
+Charty::Backends::Pyplot.activate_iruby_integration
+```
+
 #### Bar plot
 
 Charty's statistical bar plot shows the relationship between a categorical variable and estimated means of a numeric variable.
@@ -80,8 +138,7 @@ Instead, when we specify the categorical variable as y-axis, the plot draws a ho
 The following code shows the relationship between species and the mean body masses of penguins in a vertical bar chart.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.bar_plot(data: penguins, x: :species, y: :body_mass_g).render
+Charty.bar_plot(data: penguins, x: :species, y: :body_mass_g)
 ```
 
 ![](images/penguins_species_body_mass_g_bar_plot_v.png)
@@ -89,8 +146,7 @@ Charty.bar_plot(data: penguins, x: :species, y: :body_mass_g).render
 Exchanging x and y axes alternates the orientation of the resulting chart.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.bar_plot(data: penguins, x: :body_mass_g, y: :species).render
+Charty.bar_plot(data: penguins, x: :body_mass_g, y: :species)
 ```
 
 ![](images/penguins_species_body_mass_g_bar_plot_h.png)
@@ -98,8 +154,7 @@ Charty.bar_plot(data: penguins, x: :body_mass_g, y: :species).render
 Adding color axis introduces color grouping in the bar plot.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.bar_plot(data: penguins, x: :species, y: :body_mass_g, color: :sex).render
+Charty.bar_plot(data: penguins, x: :species, y: :body_mass_g, color: :sex)
 ```
 
 ![](images/penguins_species_body_mass_g_sex_bar_plot_v.png)
@@ -116,8 +171,7 @@ Instead, when we specify the categorical variable as y-axis, the plot draws a ho
 The following code draws a vertical box plot to show distributions of penguins' body mass per species.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.box_plot(data: penguins, x: :species, y: :body_mass_g).render
+Charty.box_plot(data: penguins, x: :species, y: :body_mass_g)
 ```
 
 ![](images/penguins_species_body_mass_g_box_plot_v.png)
@@ -125,8 +179,7 @@ Charty.box_plot(data: penguins, x: :species, y: :body_mass_g).render
 As `bar_plot` above, exchanging x and y axes alternates the orientation of the resulting chart.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.box_plot(data: penguins, x: :body_mass_g, y: :species).render
+Charty.box_plot(data: penguins, x: :body_mass_g, y: :species)
 ```
 
 ![](images/penguins_species_body_mass_g_box_plot_h.png)
@@ -134,8 +187,7 @@ Charty.box_plot(data: penguins, x: :body_mass_g, y: :species).render
 Adding color axis introduces color grouping in the box plot.
 
 ```ruby
-Charty::Backends.use(:pyplot)
-Charty.box_plot(data: penguins, x: :species, y: :body_mass_g, color: :sex).render
+Charty.box_plot(data: penguins, x: :species, y: :body_mass_g, color: :sex)
 ```
 
 ![](images/penguins_species_body_mass_g_sex_box_plot_v.png)
@@ -145,7 +197,6 @@ Charty.box_plot(data: penguins, x: :species, y: :body_mass_g, color: :sex).rende
 Charty's scatter plot shows the relationship between two numeric variables.
 
 ```ruby
-Charty::Backends.use(:pyplot)
 Charty.scatter_plot(data: penguins, x: :body_mass_g, y: flipper_length_mm)
 ```
 
@@ -156,7 +207,6 @@ The following example specifies `:species` variable in the color axis.
 It shows the different species by the different colors.
 
 ```ruby
-Charty::Backends.use(:pyplot)
 Charty.scatter_plot(data: penguins, x: :body_mass_g, y: flipper_length_mm, color: :species)
 ```
 
@@ -166,7 +216,6 @@ Moreover, size and style axes can be specified.
 The following example specifies `:sex` variable in the style axis.
 
 ```ruby
-Charty::Backends.use(:pyplot)
 Charty.scatter_plot(data: penguins, x: :body_mass_g, y: flipper_length_mm, color: :species, style: :sex)
 ```
 

data/charty.gemspec

@@ -26,14 +26,21 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
-  spec.add_dependency "red-colors"
-  spec.add_dependency "red-palette", ">= 0.2.0"
+  spec.add_dependency "red-colors", ">= 0.3.0"
+  spec.add_dependency "red-datasets", ">= 0.1.2"
+  spec.add_dependency "red-palette", ">= 0.5.0"
+
+  spec.add_dependency "matplotlib", ">= 1.2.0"
+  spec.add_dependency "pandas", ">= 0.3.5"
+  spec.add_dependency "playwright-ruby-client"
 
   spec.add_development_dependency "bundler", ">= 1.16"
   spec.add_development_dependency "rake"
   spec.add_development_dependency "test-unit"
-  spec.add_development_dependency "red-datasets", ">= 0.0.9"
   spec.add_development_dependency "daru"
+  spec.add_development_dependency "matrix" # need for daru on Ruby > 3.0
   spec.add_development_dependency "activerecord"
   spec.add_development_dependency "sqlite3"
+  spec.add_development_dependency "iruby", ">= 0.7.0"
+  spec.add_development_dependency "csv"
 end

data/lib/charty.rb

@@ -3,17 +3,20 @@ require_relative "charty/version"
 require "colors"
 require "palette"
 
+require_relative "charty/cache_dir"
+require_relative "charty/util"
+require_relative "charty/iruby_helper"
+require_relative "charty/dash_pattern_generator"
 require_relative "charty/backends"
 require_relative "charty/backend_methods"
 require_relative "charty/plotter"
 require_relative "charty/index"
 require_relative "charty/layout"
 require_relative "charty/linspace"
-require_relative "charty/missing_value_support"
 require_relative "charty/plotters"
 require_relative "charty/plot_methods"
-require_relative "charty/table_adapters"
 require_relative "charty/table"
+require_relative "charty/table_adapters"
 require_relative "charty/statistics"
 require_relative "charty/vector_adapters"
 require_relative "charty/vector"

data/lib/charty/backends/bokeh.rb

@@ -17,13 +17,13 @@ module Charty
         @series = series
       end
 
-      def render(context, filename)
+      def old_style_render(context, filename)
         plot = plot(context)
         save(plot, context, filename)
         PyCall.import_module('bokeh.io').show(plot)
       end
 
-      def save(plot, context, filename)
+      def old_style_save(plot, context, filename)
         if filename
           PyCall.import_module('bokeh.io').save(plot, filename)
         end

data/lib/charty/backends/google_charts.rb

@@ -33,7 +33,7 @@ module Charty
         @series = series
       end
 
-      def render(context, filename)
+      def old_style_render(context, filename)
         plot(nil, context)
       end
 

data/lib/charty/backends/gruff.rb

@@ -26,7 +26,7 @@ module Charty
         raise NotImplementedError
       end
 
-      def render(context, filename="")
+      def old_style_render(context, filename="")
         FileUtils.mkdir_p(File.dirname(filename))
         plot(@plot, context).write(filename)
       end

data/lib/charty/backends/plotly.rb

@@ -1,5 +1,10 @@
 require "json"
 require "securerandom"
+require "tmpdir"
+
+require_relative "plotly_helpers/html_renderer"
+require_relative "plotly_helpers/notebook_renderer"
+require_relative "plotly_helpers/plotly_renderer"
 
 module Charty
   module Backends
@@ -36,7 +41,7 @@ module Charty
         @series = series
       end
 
-      def render(context, filename)
+      def old_style_render(context, filename)
         plot(nil, context)
       end
 
@@ -247,12 +252,8 @@ module Charty
         @traces.concat(traces)
       end
 
-      def scatter(x, y, variables, legend:, color:, color_mapper:,
+      def scatter(x, y, variables, color:, color_mapper:,
                   style:, style_mapper:, size:, size_mapper:)
-        if legend == :full
-          warn("Plotly backend does not support full verbosity legend")
-        end
-
         orig_x, orig_y = x, y
 
         x = case x
@@ -276,7 +277,7 @@ module Charty
         end
 
         unless color.nil? && style.nil?
-          grouped_scatter(x, y, variables, legend: legend,
+          grouped_scatter(x, y, variables,
                           color: color, color_mapper: color_mapper,
                           style: style, style_mapper: style_mapper,
                           size: size, size_mapper: size_mapper)
@@ -304,7 +305,7 @@ module Charty
         @traces << trace
       end
 
-      private def grouped_scatter(x, y, variables, legend:, color:, color_mapper:,
+      private def grouped_scatter(x, y, variables, color:, color_mapper:,
                                   style:, style_mapper:, size:, size_mapper:)
         @layout[:showlegend] = true
 
@@ -332,7 +333,9 @@ module Charty
 
           unless size.nil?
             vals = size.values_at(*indices)
-            trace[:marker][:size] = size_mapper[vals].map(&method(:scale_scatter_point_size))
+            trace[:marker][:size] = size_mapper[vals].map do |x|
+              scale_scatter_point_size(x).to_f
+            end
           end
 
           name = []
@@ -361,6 +364,12 @@ module Charty
         end
       end
 
+      def add_scatter_plot_legend(variables, color_mapper, size_mapper, style_mapper, legend)
+        if legend == :full
+          warn("Plotly backend does not support full verbosity legend")
+        end
+      end
+
       private def scale_scatter_point_size(x)
         min = 6
         max = 12
@@ -368,6 +377,242 @@ module Charty
         min + x * (max - min)
       end
 
+      def line(x, y, variables, color:, color_mapper:, size:, size_mapper:, style:, style_mapper:, ci_params:)
+        x = case x
+            when Charty::Vector
+              x.to_a
+            else
+              orig_x, x = x, Array.try_convert(x)
+              if x.nil?
+                raise ArgumentError, "Invalid value for x: %p" % orig_x
+              end
+            end
+
+        y = case y
+            when Charty::Vector
+              y.to_a
+            else
+              orig_y, y = y, Array.try_convert(y)
+              if y.nil?
+                raise ArgumentError, "Invalid value for y: %p" % orig_y
+              end
+            end
+
+        name = []
+        legend_title = []
+
+        if color.nil?
+          # TODO: do not hard code this
+          line_color = Colors["#1f77b4"] # the first color of D3's category10 palette
+        else
+          line_color = color_mapper[color].to_rgb
+          name << color
+          legend_title << variables[:color]
+        end
+
+        unless style.nil?
+          marker, dashes = style_mapper[style].values_at(:marker, :dashes)
+          name << style
+          legend_title << variables[:style]
+        end
+
+        trace = {
+          type: :scatter,
+          mode: marker.nil? ? "lines" : "lines+markers",
+          x: x,
+          y: y,
+          line: {
+            shape: :linear,
+            color: line_color.to_hex_string
+          }
+        }
+
+        default_line_width = 2.0
+        unless size.nil?
+          line_width = default_line_width + 2.0 * size_mapper[size]
+          trace[:line][:width] = line_width
+        end
+
+        unless dashes.nil?
+          trace[:line][:dash] = convert_dash_pattern(dashes, line_width || default_line_width)
+        end
+
+        unless marker.nil?
+          trace[:marker] = {
+            line: {
+              width: 1,
+              color: "#fff"
+            },
+            symbol: marker,
+            size: 10
+          }
+        end
+
+        unless ci_params.nil?
+          case ci_params[:style]
+          when :band
+            y_min = ci_params[:y_min].to_a
+            y_max = ci_params[:y_max].to_a
+            @traces << {
+              type: :scatter,
+              x: x,
+              y: y_max,
+              mode: :lines,
+              line: { shape: :linear, width: 0 },
+              showlegend: false
+            }
+            @traces << {
+              type: :scatter,
+              x: x,
+              y: y_min,
+              mode: :lines,
+              line: { shape: :linear, width: 0 },
+              fill: :tonexty,
+              fillcolor: line_color.to_rgba(alpha: 0.2).to_hex_string,
+              showlegend: false
+            }
+          when :bars
+            y_min = ci_params[:y_min].map.with_index {|v, i| y[i] - v }
+            y_max = ci_params[:y_max].map.with_index {|v, i| v - y[i] }
+            trace[:error_y] = {
+              visible: true,
+              type: :data,
+              array: y_max,
+              arrayminus: y_min
+            }
+            unless line_color.nil?
+              trace[:error_y][:color] = line_color
+            end
+            unless line_width.nil?
+              trace[:error_y][:thickness] = line_width
+            end
+          end
+        end
+
+        trace[:name] = name.uniq.join(", ") unless name.empty?
+
+        @traces << trace
+
+        unless legend_title.empty?
+          @layout[:showlegend] = true
+          @layout[:legend] ||= {}
+          @layout[:legend][:title] = {text: legend_title.uniq.join(", ")}
+        end
+      end
+
+      def add_line_plot_legend(variables, color_mapper, size_mapper, style_mapper, legend)
+        if legend == :full
+          warn("Plotly backend does not support full verbosity legend")
+        end
+
+        legend_order = if variables.key?(:color)
+                         if variables.key?(:style)
+                           # both color and style
+                           color_mapper.levels.product(style_mapper.levels)
+                         else
+                           # only color
+                           color_mapper.levels
+                         end
+                       elsif variables.key?(:style)
+                         # only style
+                         style_mapper.levels
+                       else
+                         # no legend entries
+                         nil
+                       end
+
+        if legend_order
+          # sort traces
+          legend_index = legend_order.map.with_index { |name, i|
+            [Array(name).uniq.join(", "), i]
+          }.to_h
+          @traces = @traces.each_with_index.sort_by { |trace, trace_index|
+            index = legend_index.fetch(trace[:name], legend_order.length)
+            [index, trace_index]
+          }.map(&:first)
+
+          # remove duplicated legend entries
+          names = {}
+          @traces.each do |trace|
+            if trace[:showlegend] != false
+              name = trace[:name]
+              if name
+                if names.key?(name)
+                  # Hide duplications
+                  trace[:showlegend] = false
+                else
+                  trace[:showlegend] = true
+                  names[name] = true
+                end
+              else
+                # Hide no name trace in legend
+                trace[:showlegend] = false
+              end
+            end
+          end
+        end
+      end
+
+      private def convert_dash_pattern(pattern, line_width)
+        case pattern
+        when ""
+          :solid
+        else
+          pattern.map {|d| "#{line_width * d}px" }.join(",")
+        end
+      end
+
+      PLOTLY_HISTNORM = {
+        count: "".freeze,
+        frequency: "density".freeze,
+        density: "probability density".freeze,
+        probability: "probability".freeze
+      }.freeze
+
+      def univariate_histogram(hist, name, variable_name, stat,
+                               alpha, color, key_color, color_mapper,
+                               _multiple, _element, _fill, _shrink)
+        value_axis = variable_name
+        case value_axis
+        when :x
+          weights_axis = :y
+          orientation = :v
+        else
+          weights_axis = :x
+          orientation = :h
+        end
+
+        mid_points = hist.edges.each_cons(2).map {|a, b| a + (b - a) / 2 }
+
+        trace = {
+          type: :bar,
+          name: name.to_s,
+          value_axis => mid_points,
+          weights_axis => hist.weights,
+          orientation: orientation,
+          opacity: alpha
+        }
+
+        if color.nil?
+          trace[:marker] = {
+            color: key_color.to_rgb.to_hex_string
+          }
+        else
+          trace[:marker] = {
+            color: color_mapper[color].to_rgb.to_hex_string
+          }
+        end
+
+        @traces << trace
+
+        @layout[:bargap] = 0.05
+
+        if @traces.length > 1
+          @layout[:barmode] = "overlay"
+          @layout[:showlegend] = true
+        end
+      end
+
       def set_xlabel(label)
         @layout[:xaxis] ||= {}
         @layout[:xaxis][:title] = label
@@ -447,7 +692,34 @@ module Charty
         # TODO: Handle loc
       end
 
-      def save(filename, title: nil)
+      def save(filename, format: nil, title: nil, width: 700, height: 500, **kwargs)
+        format = detect_format(filename) if format.nil?
+
+        case format
+        when nil, :html, "text/html"
+          save_html(filename, title: title, **kwargs)
+        when :png, "png", "image/png",
+             :jpeg, "jpeg", "image/jpeg"
+          render_image(format, filename: filename, notebook: false, title: title, width: width, height: height, **kwargs)
+        end
+        nil
+      end
+
+      private def detect_format(filename)
+        case File.extname(filename).downcase
+        when ".htm", ".html"
+          :html
+        when ".png"
+          :png
+        when ".jpg", ".jpeg"
+          :jpeg
+        else
+          raise ArgumentError,
+                "Unable to infer file type from filename: %p" % filename
+        end
+      end
+
+      private def save_html(filename, title:, element_id: nil)
         html = <<~HTML
           <!DOCTYPE html>
           <html>
@@ -464,44 +736,119 @@ module Charty
           </body>
           </html>
         HTML
+
+        element_id = SecureRandom.uuid if element_id.nil?
+
         html %= {
           title: title || default_html_title,
-          id: SecureRandom.uuid,
+          id: element_id,
           data: JSON.dump(@traces),
           layout: JSON.dump(@layout)
         }
         File.write(filename, html)
-        nil
       end
 
       private def default_html_title
         "Charty plot"
       end
 
-      def show
-        unless defined?(IRuby)
-          raise NotImplementedError,
-                "Plotly backend outside of IRuby is not supported"
+      def render(element_id: nil, format: nil, notebook: false)
+        case format
+        when :html, "html", nil
+          format = "text/html"
+        when :png, "png"
+          format = "image/png"
+        when :jpeg, "jpeg"
+          format = "image/jpeg"
         end
 
-        IRubyOutput.prepare
+        case format
+        when "text/html"
+          # render html after this case cause
+        when "image/png", "image/jpeg"
+          image_data = render_image(format, element_id: element_id, notebook: false)
+          if notebook
+            return [format, image_data]
+          else
+            return image_data
+          end
+        else
+          raise ArgumentError,
+                "Unsupported mime type to render: %p" % format
+        end
 
-        html = <<~HTML
-          <div id="%{id}" style="width: 100%%; height:100%%;"></div>
-          <script type="text/javascript">
-            requirejs(["plotly"], function (Plotly) {
-              Plotly.newPlot("%{id}", %{data}, %{layout});
-            });
-          </script>
-        HTML
+        element_id = SecureRandom.uuid if element_id.nil?
 
-        html %= {
-          id: SecureRandom.uuid,
-          data: JSON.dump(@traces),
-          layout: JSON.dump(@layout)
-        }
-        IRuby.display(html, mime: "text/html")
-        nil
+        renderer = PlotlyHelpers::HtmlRenderer.new(full_html: !notebook)
+        html = renderer.render({data: @traces, layout: @layout}, element_id: element_id)
+        if notebook
+          [format, html]
+        else
+          html
+        end
+      end
+
+      def render_mimebundle(include: [], exclude: [])
+        types = case
+               when IRubyHelper.vscode?,
+                 IRubyHelper.nteract?
+                 [:plotly_mimetype]
+               else
+                 [:plotly_mimetype, :notebook]
+               end
+        bundle = Util.filter_map(types) { |type|
+          case type
+          when :plotly_mimetype
+            render_plotly_mimetype_bundle
+          when :notebook
+            render_notebook_bundle
+          end
+        }.to_h
+        bundle
+      end
+
+      private def render_plotly_mimetype_bundle
+        renderer = PlotlyHelpers::PlotlyRenderer.new
+        obj = renderer.render({data: @traces, layout: @layout})
+        [ "application/vnd.plotly.v1+json", obj ]
+      end
+
+      private def render_notebook_bundle
+        renderer = self.class.notebook_renderer
+        renderer.activate
+        html = renderer.render({data: @traces, layout: @layout})
+        [ "text/html", html ]
+      end
+
+      # for new APIs
+      def self.notebook_renderer
+        @notebook_renderer ||= PlotlyHelpers::NotebookRenderer.new
+      end
+
+      private def render_image(format=nil, filename: nil, element_id: nil, notebook: false,
+                       title: nil, width: nil, height: nil)
+        format = "image/png" if format.nil?
+        case format
+        when :png, "png", :jpeg, "jpeg"
+          image_type = format.to_s
+        when "image/png", "image/jpeg"
+          image_type = format.split("/").last
+        else
+          raise ArgumentError,
+                "Unsupported mime type to render image: %p" % format
+        end
+
+        height = 525 if height.nil?
+        width = (height * Math.sqrt(2)).to_i if width.nil?
+        title = "Charty plot" if title.nil?
+
+        element_id = SecureRandom.uuid if element_id.nil?
+        element_id = "charty-plotly-#{element_id}"
+        Dir.mktmpdir do |tmpdir|
+          html_filename = File.join(tmpdir, "%s.html" % element_id)
+          save_html(html_filename, title: title, element_id: element_id)
+          return self.class.render_image(html_filename, filename, image_type, element_id, width, height)
+        end
       end
 
       module IRubyOutput
@@ -544,6 +891,61 @@ module Charty
           END
         end
       end
+
+      @playwright_fiber = nil
+
+      def self.ensure_playwright
+        if @playwright_fiber.nil?
+          begin
+            require "playwright"
+          rescue LoadError
+            $stderr.puts "ERROR: You need to install playwright and playwright-ruby-client before using Plotly renderer"
+            raise
+          end
+
+          @playwright_fiber = Fiber.new do
+            playwright_cli_executable_path = ENV.fetch("PLAYWRIGHT_CLI_EXECUTABLE_PATH", "npx playwright")
+            Playwright.create(playwright_cli_executable_path: playwright_cli_executable_path) do |playwright|
+              playwright.chromium.launch(headless: true) do |browser|
+                request = Fiber.yield
+                loop do
+                  result = nil
+                  case request.shift
+                  when :finish
+                    break
+                  when :render
+                    input, output, format, element_id, width, height = request
+
+                    page = browser.new_page
+                    page.set_viewport_size(width: width, height: height)
+                    page.goto("file://#{input}")
+                    element = page.query_selector("\##{element_id}")
+
+                    kwargs = {type: format}
+                    kwargs[:path] = output unless output.nil?
+                    result = element.screenshot(**kwargs)
+                  end
+                  request = Fiber.yield(result)
+                end
+              end
+            end
+          end
+          @playwright_fiber.resume
+        end
+      end
+
+      def self.terminate_playwright
+        return if @playwright_fiber.nil?
+
+        @playwright_fiber.resume([:finish])
+      end
+
+      at_exit { terminate_playwright }
+
+      def self.render_image(input, output, format, element_id, width, height)
+        ensure_playwright if @playwright_fiber.nil?
+        @playwright_fiber.resume([:render, input, output, format.to_s, element_id, width, height])
+      end
     end
   end
 end