Update API examples (#40)

* 🎨 format notebooks

- except line plot example data

* 🎨 remove html_js_files entry

needed for plotly6

* ⏪ format data as before, but hide input so it could be reformatted with black

* 🎨 unify imports, data view and link create function in docs

* 🎨 apply changes to ipynb

* 🎨 format

* 🔥 duplicate notebook

* 🔧 move config for sphinx to conf.py

- avoid having it in notebooks

* 🎨 format

* 🎨 hide input in histogram api example

* 🎨 link API Reference of new create functions

Author: enryH

docs/api_examples/bar_plot.ipynb

@@ -62,7 +62,6 @@
 
 IN_COLAB = "COLAB_GPU" in os.environ
 
-# %% tags=["hide-cell"]
 # Create a directory for outputs
 output_dir = "./outputs"
 os.makedirs(output_dir, exist_ok=True)
@@ -71,18 +70,18 @@
 # ### 0.2. Importing libraries
 
 # %%
-# Imports
-import pandas as pd
-import numpy as np
 from pathlib import Path
 
+import numpy as np
+import pandas as pd
+
 from vuecore.plots.basic.bar import create_bar_plot
 
 # %% [markdown]
 # ### 0.3. Create sample data
 # We create a synthetic dataset representing the relative abundances of common bacterial genera across various environmental samples.
 
-# %%
+# %% tags=["hide-input"]
 # Set a random seed for reproducibility of the synthetic data
 np.random.seed(42)
 
@@ -156,7 +155,9 @@ def make_sample(sample: str, genera: list[str]) -> list[dict]:
 
 # %% [markdown]
 # ## 1. Basic Bar Plot
-# A basic bar plot can be created by simply providing the `x` and `y` columns from the DataFrame, along with style options like `title`.
+# A basic bar plot can be created by simply providing the `x` and `y` columns from the DataFrame,
+# along with style options like `title`
+# using [`create_bar_plot`](vuecore.plots.basic.bar.create_bar_plot).
 
 # %%
 # Create a df with unique samples and their genera counts

docs/api_examples/bar_plot.py

@@ -64,32 +64,28 @@
 
 IN_COLAB = "COLAB_GPU" in os.environ
 
-# %% tags=["hide-cell"]
 # Create a directory for outputs
 output_dir = "./outputs"
 os.makedirs(output_dir, exist_ok=True)
 
 # %% [markdown]
 # ### 0.2. Importing libraries
-
 # %%
-# Imports
-import pandas as pd
-import numpy as np
 from pathlib import Path
-import plotly.io as pio
+
+import numpy as np
+import pandas as pd
 
 from vuecore.plots.basic.box import create_box_plot
 from vuecore.plots.basic.violin import create_violin_plot
 
-# Set the Plotly renderer based on the environment
-pio.renderers.default = "notebook"
-
 # %% [markdown]
 # ### 0.3. Create sample data
-# We create a synthetic dataset simulating gene expression levels across different patient samples and treatment conditions, with each data point representing a unique gene's expression level under a specific treatment for a particular patient.
+# We create a synthetic dataset simulating gene expression levels across different
+# patient samples and treatment conditions, with each data point representing a
+# unique gene's expression level under a specific treatment for a particular patient.
 
-# %%
+# %% tags=["hide-input"]
 # Set a random seed for reproducibility of the synthetic data
 np.random.seed(42)
 
@@ -128,10 +124,13 @@
         "Expression": expr,
     }
 )
+gene_exp_df
 
 # %% [markdown]
 # ## 1. Basic Box Plot
-# A basic box plot can be created by simply providing the `x` and `y` columns from the DataFrame, along with style options like `title`.
+# A basic box plot can be created by simply providing the `x` and `y` columns from the DataFrame,
+# along with style options like `title`
+# using [`create_box_plot`](vuecore.plots.basic.box.create_box_plot).
 
 # %%
 # Define output file path for the PNG basic box plot
@@ -150,7 +149,9 @@
 
 # %% [markdown]
 # ## 2. Basic Violin Plot
-# A basic violin plot can be created by simply providing the `x` and `y` columns from the DataFrame, along with style options like `title`.
+# A basic violin plot can be created by simply providing the `x` and `y` columns from the DataFrame,
+# along with style options like `title`
+# using [`create_violin_plot`](vuecore.plots.basic.violin.create_violin_plot) .
 
 # %%
 # Define output file path for the PNG basic violin plot

docs/api_examples/box_violin_plot.ipynb

@@ -120,15 +120,12 @@
    "outputs": [],
    "source": [
     "# Imports\n",
-    "import pandas as pd\n",
-    "import numpy as np\n",
     "from pathlib import Path\n",
-    "import plotly.io as pio\n",
     "\n",
-    "from vuecore.plots.basic.histogram import create_histogram_plot\n",
+    "import numpy as np\n",
+    "import pandas as pd\n",
     "\n",
-    "# Set the Plotly renderer based on the environment\n",
-    "pio.renderers.default = \"notebook\""
+    "from vuecore.plots.basic.histogram import create_histogram_plot"
    ]
   },
   {
@@ -137,14 +134,19 @@
    "metadata": {},
    "source": [
     "### 0.3. Create sample data\n",
-    "We create a synthetic dataset simulating gene expression data across two experimental conditions to demonstrate how histograms can visualize data distribution."
+    "We create a synthetic dataset simulating gene expression data across two experimental\n",
+    "conditions to demonstrate how histograms can visualize data distribution."
    ]
   },
   {
    "cell_type": "code",
    "execution_count": null,
    "id": "ac2db647",
-   "metadata": {},
+   "metadata": {
+    "tags": [
+     "hide-input"
+    ]
+   },
    "outputs": [
     {
      "data": {
@@ -222,29 +224,33 @@
     }
    ],
    "source": [
-    "# Set a random seed for reproducibility of the synthetic data \n",
+    "# Set a random seed for reproducibility of the synthetic data\n",
     "np.random.seed(42)\n",
     "\n",
     "# Define parameters for synthetic gene expression data\n",
     "num_genes = 1000\n",
+    "conditions = [\"Control\", \"Treated\"]\n",
     "gene_names = [f\"Gene_{i}\" for i in range(num_genes)]\n",
     "\n",
     "# Simulate expression data with a slight shift in the \"Treated\" group\n",
-    "expression_values = np.concatenate([\n",
-    "    np.random.normal(loc=10, scale=2, size=num_genes // 2),\n",
-    "    np.random.normal(loc=12, scale=2, size=num_genes // 2)\n",
-    "])\n",
-    "condition_values = np.concatenate([\n",
-    "    [\"Control\"] * (num_genes // 2),\n",
-    "    [\"Treated\"] * (num_genes // 2)\n",
-    "])\n",
+    "expression_values = np.concatenate(\n",
+    "    [\n",
+    "        np.random.normal(loc=10, scale=2, size=num_genes // 2),\n",
+    "        np.random.normal(loc=12, scale=2, size=num_genes // 2),\n",
+    "    ]\n",
+    ")\n",
+    "condition_values = np.concatenate(\n",
+    "    [[\"Control\"] * (num_genes // 2), [\"Treated\"] * (num_genes // 2)]\n",
+    ")\n",
     "\n",
     "# Create the DataFrame\n",
-    "gene_exp_df = pd.DataFrame({\n",
-    "    \"Gene_ID\": gene_names,\n",
-    "    \"Expression\": expression_values,\n",
-    "    \"Condition\": condition_values\n",
-    "})\n",
+    "gene_exp_df = pd.DataFrame(\n",
+    "    {\n",
+    "        \"Gene_ID\": gene_names,\n",
+    "        \"Expression\": expression_values,\n",
+    "        \"Condition\": condition_values,\n",
+    "    }\n",
+    ")\n",
     "\n",
     "gene_exp_df.head()"
    ]
@@ -255,7 +261,9 @@
    "metadata": {},
    "source": [
     "## 1. Basic Histogram Plot\n",
-    "A basic histogram plot can be created by simply providing the `x` and `y` columns from the DataFrame, along with style options like `title`."
+    "A basic histogram plot can be created by simply providing the `x` and `y` columns from the DataFrame,\n",
+    "along with style options like `title`\n",
+    "using [`create_histogram_plot`](vuecore.plots.basic.histogram.create_histogram_plot) ."
    ]
   },
   {
@@ -4281,12 +4289,9 @@
     "    histnorm=\"probability density\",\n",
     "    title=\"Gene Expression Distribution by Treatment Condition\",\n",
     "    subtitle=\"Histogram with probability density normalized\",\n",
-    "    labels={\n",
-    "        \"Expression\": \"Gene Expression\",\n",
-    "        \"Condition\": \"Treatment Condition\"\n",
-    "    },\n",
+    "    labels={\"Expression\": \"Gene Expression\", \"Condition\": \"Treatment Condition\"},\n",
     "    hover_data=[\"Gene_ID\"],\n",
-    "    opacity=0.75,   \n",
+    "    opacity=0.75,\n",
     "    file_path=file_path_adv_hist_html,\n",
     ")\n",
     "\n",

docs/api_examples/box_violin_plot.py

@@ -73,21 +73,19 @@
 
 # %%
 # Imports
-import pandas as pd
-import numpy as np
 from pathlib import Path
-import plotly.io as pio
 
-from vuecore.plots.basic.histogram import create_histogram_plot
+import numpy as np
+import pandas as pd
 
-# Set the Plotly renderer based on the environment
-pio.renderers.default = "notebook"
+from vuecore.plots.basic.histogram import create_histogram_plot
 
 # %% [markdown]
 # ### 0.3. Create sample data
-# We create a synthetic dataset simulating gene expression data across two experimental conditions to demonstrate how histograms can visualize data distribution.
+# We create a synthetic dataset simulating gene expression data across two experimental
+# conditions to demonstrate how histograms can visualize data distribution.
 
-# %%
+# %% tags=["hide-input"]
 # Set a random seed for reproducibility of the synthetic data
 np.random.seed(42)
 
@@ -120,7 +118,9 @@
 
 # %% [markdown]
 # ## 1. Basic Histogram Plot
-# A basic histogram plot can be created by simply providing the `x` and `y` columns from the DataFrame, along with style options like `title`.
+# A basic histogram plot can be created by simply providing the `x` and `y` columns from the DataFrame,
+# along with style options like `title`
+# using [`create_histogram_plot`](vuecore.plots.basic.histogram.create_histogram_plot) .
 
 # %%
 # Define output file path for the PNG basic histogram