[MRG] Update examples in the doc (#359)

* add transparent color logo

* add transparent color logo

* move screenkhorn

* move stochastic and install ffmpeg on circleci

* try something

* add sudo

* install ffmpeg before python

* cleanup examples

* test svg scrapper

* add animation for reg path

* better example OT sivergence

* update ttles and add plots

* update free support

* proper figure indexes

* have less frame sin animation

* update readme and release file

* add tests for python 3.10

3 files changed, 93 insertions, 87 deletions

diff --git a/docs/source/_static/images/logo.png b/docs/source/_static/images/logo.png
index 7be5df7..2dd6f65 100644
--- a/docs/source/_static/images/logo.png
+++ b/docs/source/_static/images/logo.png
diff --git a/docs/source/_static/images/logo.svg b/docs/source/_static/images/logo.svg
index 0bf2cb7..39fe900 100644
--- a/docs/source/_static/images/logo.svg
+++ b/docs/source/_static/images/logo.svg
@@ -1,24 +1,23 @@
 <?xml version="1.0" encoding="utf-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Created with matplotlib (https://matplotlib.org/) -->
-<svg height="75.384pt" version="1.1" viewBox="0 0 209.7 75.384" width="209.7pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="209.7pt" height="75.384pt" viewBox="0 0 209.7 75.384" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <metadata>
-  <rdf:RDF xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    <cc:Work>
     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:date>2022-03-17T17:25:30.736761</dc:date>
+    <dc:date>2022-03-30T17:25:32.476826</dc:date>
     <dc:format>image/svg+xml</dc:format>
     <dc:creator>
      <cc:Agent>
-      <dc:title>Matplotlib v3.3.3, https://matplotlib.org/</dc:title>
+      <dc:title>Matplotlib v3.5.1, https://matplotlib.org/</dc:title>
      </cc:Agent>
     </dc:creator>
    </cc:Work>
   </rdf:RDF>
  </metadata>
  <defs>
-  <style type="text/css">*{stroke-linecap:butt;stroke-linejoin:round;}</style>
+  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>
  </defs>
  <g id="figure_1">
   <g id="patch_1">
@@ -26,103 +25,104 @@
 L 209.7 75.384 
 L 209.7 0 
 L 0 0 
+L 0 75.384 
 z
-" style="fill:#ffffff;"/>
+" style="fill: none"/>
   </g>
   <g id="axes_1">
    <g id="line2d_1">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 11.885975 
+    <path d="M 16.077273 11.885975 
 L 47.044503 11.885975 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_2">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 22.208385 
+    <path d="M 16.077273 22.208385 
 L 57.366913 22.208385 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_3">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 32.530795 
+    <path d="M 16.077273 32.530795 
 L 57.366913 32.530795 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_4">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 42.853205 
+    <path d="M 16.077273 42.853205 
 L 47.044503 42.853205 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_5">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 53.175615 
+    <path d="M 16.077273 53.175615 
 L 26.399683 53.175615 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_6">
-    <path clip-path="url(#pafc522611b)" d="M 16.077273 63.498025 
+    <path d="M 16.077273 63.498025 
 L 26.399683 63.498025 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_7">
-    <path clip-path="url(#pafc522611b)" d="M 95.353383 11.885975 
+    <path d="M 95.353383 11.885975 
 L 107.740275 11.885975 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_8">
-    <path clip-path="url(#pafc522611b)" d="M 82.96649 22.208385 
+    <path d="M 82.96649 22.208385 
 L 120.127167 22.208385 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_9">
-    <path clip-path="url(#pafc522611b)" d="M 76.773044 32.530795 
+    <path d="M 76.773044 32.530795 
 L 126.320613 32.530795 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_10">
-    <path clip-path="url(#pafc522611b)" d="M 76.773044 42.853205 
+    <path d="M 76.773044 42.853205 
 L 126.320613 42.853205 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_11">
-    <path clip-path="url(#pafc522611b)" d="M 82.96649 53.175615 
+    <path d="M 82.96649 53.175615 
 L 120.127167 53.175615 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_12">
-    <path clip-path="url(#pafc522611b)" d="M 95.353383 63.498025 
+    <path d="M 95.353383 63.498025 
 L 107.740275 63.498025 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_13">
-    <path clip-path="url(#pafc522611b)" d="M 142.010677 11.885975 
+    <path d="M 142.010677 11.885975 
 L 193.622727 11.885975 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_14">
-    <path clip-path="url(#pafc522611b)" d="M 142.010677 22.208385 
+    <path d="M 142.010677 22.208385 
 L 193.622727 22.208385 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_15">
-    <path clip-path="url(#pafc522611b)" d="M 162.655497 32.530795 
+    <path d="M 162.655497 32.530795 
 L 172.977907 32.530795 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_16">
-    <path clip-path="url(#pafc522611b)" d="M 162.655497 42.853205 
+    <path d="M 162.655497 42.853205 
 L 172.977907 42.853205 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_17">
-    <path clip-path="url(#pafc522611b)" d="M 162.655497 53.175615 
+    <path d="M 162.655497 53.175615 
 L 172.977907 53.175615 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_18">
-    <path clip-path="url(#pafc522611b)" d="M 162.655497 63.498025 
+    <path d="M 162.655497 63.498025 
 L 172.977907 63.498025 
-" style="fill:none;stroke:#000000;stroke-linecap:square;stroke-opacity:0.6;stroke-width:3;"/>
+" clip-path="url(#p367fff45ba)" style="fill: none; stroke: #000000; stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: square"/>
    </g>
    <g id="line2d_19">
     <defs>
-     <path d="M 0 3 
+     <path id="m5ead2df136" d="M 0 3 
 C 0.795609 3 1.55874 2.683901 2.12132 2.12132 
 C 2.683901 1.55874 3 0.795609 3 0 
 C 3 -0.795609 2.683901 -1.55874 2.12132 -2.12132 
@@ -132,32 +132,32 @@ C -2.683901 -1.55874 -3 -0.795609 -3 0
 C -3 0.795609 -2.683901 1.55874 -2.12132 2.12132 
 C -1.55874 2.683901 -0.795609 3 0 3 
 z
-" id="m45a57d22c6" style="stroke:#000000;"/>
+" style="stroke: #000000"/>
     </defs>
-    <g clip-path="url(#pafc522611b)">
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="11.885975"/>
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="22.208385"/>
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="32.530795"/>
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="42.853205"/>
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="53.175615"/>
-     <use style="fill:#d62728;stroke:#000000;" x="16.077273" xlink:href="#m45a57d22c6" y="63.498025"/>
-     <use style="fill:#d62728;stroke:#000000;" x="95.353383" xlink:href="#m45a57d22c6" y="11.885975"/>
-     <use style="fill:#d62728;stroke:#000000;" x="82.96649" xlink:href="#m45a57d22c6" y="22.208385"/>
-     <use style="fill:#d62728;stroke:#000000;" x="76.773044" xlink:href="#m45a57d22c6" y="32.530795"/>
-     <use style="fill:#d62728;stroke:#000000;" x="76.773044" xlink:href="#m45a57d22c6" y="42.853205"/>
-     <use style="fill:#d62728;stroke:#000000;" x="82.96649" xlink:href="#m45a57d22c6" y="53.175615"/>
-     <use style="fill:#d62728;stroke:#000000;" x="95.353383" xlink:href="#m45a57d22c6" y="63.498025"/>
-     <use style="fill:#d62728;stroke:#000000;" x="142.010677" xlink:href="#m45a57d22c6" y="11.885975"/>
-     <use style="fill:#d62728;stroke:#000000;" x="142.010677" xlink:href="#m45a57d22c6" y="22.208385"/>
-     <use style="fill:#d62728;stroke:#000000;" x="162.655497" xlink:href="#m45a57d22c6" y="32.530795"/>
-     <use style="fill:#d62728;stroke:#000000;" x="162.655497" xlink:href="#m45a57d22c6" y="42.853205"/>
-     <use style="fill:#d62728;stroke:#000000;" x="162.655497" xlink:href="#m45a57d22c6" y="53.175615"/>
-     <use style="fill:#d62728;stroke:#000000;" x="162.655497" xlink:href="#m45a57d22c6" y="63.498025"/>
+    <g clip-path="url(#p367fff45ba)">
+     <use xlink:href="#m5ead2df136" x="16.077273" y="11.885975" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="16.077273" y="22.208385" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="16.077273" y="32.530795" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="16.077273" y="42.853205" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="16.077273" y="53.175615" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="16.077273" y="63.498025" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="95.353383" y="11.885975" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="82.96649" y="22.208385" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="76.773044" y="32.530795" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="76.773044" y="42.853205" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="82.96649" y="53.175615" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="95.353383" y="63.498025" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="142.010677" y="11.885975" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="142.010677" y="22.208385" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="162.655497" y="32.530795" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="162.655497" y="42.853205" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="162.655497" y="53.175615" style="fill: #d62728; stroke: #000000"/>
+     <use xlink:href="#m5ead2df136" x="162.655497" y="63.498025" style="fill: #d62728; stroke: #000000"/>
     </g>
    </g>
    <g id="line2d_20">
     <defs>
-     <path d="M 0 3 
+     <path id="m39fe4d1791" d="M 0 3 
 C 0.795609 3 1.55874 2.683901 2.12132 2.12132 
 C 2.683901 1.55874 3 0.795609 3 0 
 C 3 -0.795609 2.683901 -1.55874 2.12132 -2.12132 
@@ -167,34 +167,34 @@ C -2.683901 -1.55874 -3 -0.795609 -3 0
 C -3 0.795609 -2.683901 1.55874 -2.12132 2.12132 
 C -1.55874 2.683901 -0.795609 3 0 3 
 z
-" id="mb6ec6fa556" style="stroke:#000000;"/>
+" style="stroke: #000000"/>
     </defs>
-    <g clip-path="url(#pafc522611b)">
-     <use style="fill:#0000ff;stroke:#000000;" x="47.044503" xlink:href="#mb6ec6fa556" y="11.885975"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="57.366913" xlink:href="#mb6ec6fa556" y="32.530795"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="57.366913" xlink:href="#mb6ec6fa556" y="22.208385"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="47.044503" xlink:href="#mb6ec6fa556" y="42.853205"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="26.399683" xlink:href="#mb6ec6fa556" y="53.175615"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="26.399683" xlink:href="#mb6ec6fa556" y="63.498025"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="107.740275" xlink:href="#mb6ec6fa556" y="11.885975"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="120.127167" xlink:href="#mb6ec6fa556" y="22.208385"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="126.320613" xlink:href="#mb6ec6fa556" y="32.530795"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="126.320613" xlink:href="#mb6ec6fa556" y="42.853205"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="120.127167" xlink:href="#mb6ec6fa556" y="53.175615"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="107.740275" xlink:href="#mb6ec6fa556" y="63.498025"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="193.622727" xlink:href="#mb6ec6fa556" y="11.885975"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="193.622727" xlink:href="#mb6ec6fa556" y="22.208385"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="172.977907" xlink:href="#mb6ec6fa556" y="32.530795"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="172.977907" xlink:href="#mb6ec6fa556" y="42.853205"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="172.977907" xlink:href="#mb6ec6fa556" y="53.175615"/>
-     <use style="fill:#0000ff;stroke:#000000;" x="172.977907" xlink:href="#mb6ec6fa556" y="63.498025"/>
+    <g clip-path="url(#p367fff45ba)">
+     <use xlink:href="#m39fe4d1791" x="47.044503" y="11.885975" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="57.366913" y="32.530795" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="57.366913" y="22.208385" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="47.044503" y="42.853205" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="26.399683" y="53.175615" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="26.399683" y="63.498025" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="107.740275" y="11.885975" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="120.127167" y="22.208385" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="126.320613" y="32.530795" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="126.320613" y="42.853205" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="120.127167" y="53.175615" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="107.740275" y="63.498025" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="193.622727" y="11.885975" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="193.622727" y="22.208385" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="172.977907" y="32.530795" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="172.977907" y="42.853205" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="172.977907" y="53.175615" style="fill: #0000ff; stroke: #000000"/>
+     <use xlink:href="#m39fe4d1791" x="172.977907" y="63.498025" style="fill: #0000ff; stroke: #000000"/>
     </g>
    </g>
   </g>
  </g>
  <defs>
-  <clipPath id="pafc522611b">
-   <rect height="60.984" width="195.3" x="7.2" y="7.2"/>
+  <clipPath id="p367fff45ba">
+   <rect x="7.2" y="7.2" width="195.3" height="60.984"/>
   </clipPath>
  </defs>
 </svg>
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 60d0bb7..9526518 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -17,9 +17,15 @@ import os
 import re
 try:
     import sphinx_gallery
+
 except ImportError:
     print("warning sphinx-gallery not installed")
 
+
+    
+
+
+
 # !!!! allow readthedoc compilation
 try:
     from unittest.mock import MagicMock