From 645ee13b0ec7707649fa2eb7c143d6f24e62271e Mon Sep 17 00:00:00 2001
From: Jon Mease <jon.mease.dev@gmail.com>
Date: Wed, 15 Sep 2021 15:39:28 -0400
Subject: [PATCH 01/30] Fixed crash when serializing dict with mix of string
 and int keys by not sorting keys (in either json engine)

Add orjson OPT_NON_STR_KEYS and remove manual string conversion
---
 packages/python/plotly/plotly/io/_json.py                 | 6 +++---
 .../plotly/plotly/tests/test_io/test_to_from_json.py      | 3 +--
 .../plotly/tests/test_io/test_to_from_plotly_json.py      | 8 +++++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/python/plotly/plotly/io/_json.py b/packages/python/plotly/plotly/io/_json.py
index 63c70101dd8..c24fc6c9102 100644
--- a/packages/python/plotly/plotly/io/_json.py
+++ b/packages/python/plotly/plotly/io/_json.py
@@ -112,7 +112,7 @@ def to_json_plotly(plotly_object, pretty=False, engine=None):
     # Dump to a JSON string and return
     # --------------------------------
     if engine == "json":
-        opts = {"sort_keys": True}
+        opts = {}
         if pretty:
             opts["indent"] = 2
         else:
@@ -124,7 +124,7 @@ def to_json_plotly(plotly_object, pretty=False, engine=None):
         return json.dumps(plotly_object, cls=PlotlyJSONEncoder, **opts)
     elif engine == "orjson":
         JsonConfig.validate_orjson()
-        opts = orjson.OPT_SORT_KEYS | orjson.OPT_SERIALIZE_NUMPY
+        opts = orjson.OPT_NON_STR_KEYS | orjson.OPT_SERIALIZE_NUMPY
 
         if pretty:
             opts |= orjson.OPT_INDENT_2
@@ -462,7 +462,7 @@ def clean_to_json_compatible(obj, **kwargs):
         return obj
 
     if isinstance(obj, dict):
-        return {str(k): clean_to_json_compatible(v, **kwargs) for k, v in obj.items()}
+        return {k: clean_to_json_compatible(v, **kwargs) for k, v in obj.items()}
     elif isinstance(obj, (list, tuple)):
         if obj:
             # Must process list recursively even though it may be slow
diff --git a/packages/python/plotly/plotly/tests/test_io/test_to_from_json.py b/packages/python/plotly/plotly/tests/test_io/test_to_from_json.py
index 1c39203f14a..a932282bd36 100644
--- a/packages/python/plotly/plotly/tests/test_io/test_to_from_json.py
+++ b/packages/python/plotly/plotly/tests/test_io/test_to_from_json.py
@@ -29,9 +29,8 @@ def fig1(request):
 opts = {
     "separators": (",", ":"),
     "cls": plotly.utils.PlotlyJSONEncoder,
-    "sort_keys": True,
 }
-pretty_opts = {"indent": 2, "cls": plotly.utils.PlotlyJSONEncoder, "sort_keys": True}
+pretty_opts = {"indent": 2, "cls": plotly.utils.PlotlyJSONEncoder}
 
 
 # to_json
diff --git a/packages/python/plotly/plotly/tests/test_io/test_to_from_plotly_json.py b/packages/python/plotly/plotly/tests/test_io/test_to_from_plotly_json.py
index b97b76b8228..e21b556c6b8 100644
--- a/packages/python/plotly/plotly/tests/test_io/test_to_from_plotly_json.py
+++ b/packages/python/plotly/plotly/tests/test_io/test_to_from_plotly_json.py
@@ -135,7 +135,7 @@ def datetime_array(request, datetime_value):
 def test_graph_object_input(engine, pretty):
     scatter = go.Scatter(x=[1, 2, 3], y=np.array([4, 5, 6]))
     result = pio.to_json_plotly(scatter, engine=engine)
-    expected = """{"type":"scatter","x":[1,2,3],"y":[4,5,6]}"""
+    expected = """{"x":[1,2,3],"y":[4,5,6],"type":"scatter"}"""
     assert result == expected
     check_roundtrip(result, engine=engine, pretty=pretty)
 
@@ -215,3 +215,9 @@ def test_nonstring_key(engine, pretty):
     value = build_test_dict({0: 1})
     result = pio.to_json_plotly(value, engine=engine)
     check_roundtrip(result, engine=engine, pretty=pretty)
+
+
+def test_mixed_string_nonstring_key(engine, pretty):
+    value = build_test_dict({0: 1, "a": 2})
+    result = pio.to_json_plotly(value, engine=engine)
+    check_roundtrip(result, engine=engine, pretty=pretty)

From 69ddc6736a4751b65b23c70d918ac764e5a66a0c Mon Sep 17 00:00:00 2001
From: Jon Mease <jon.mease.dev@gmail.com>
Date: Wed, 15 Sep 2021 15:42:37 -0400
Subject: [PATCH 02/30] CHANGELOG

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30f70fd37d3..5600ac86232 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [next] - ???
+
+### Fixed
+  - Fixed error when serializing dict with mix of string and non-string keys [#3380](https://github.com/plotly/plotly.py/issues/3380)
+
+### Updated
+  - The JSON serialization engines no longer sort their keys [#3380](https://github.com/plotly/plotly.py/issues/3380)
+
 ## [5.3.1] - 2021-08-31
 
 ### Updated

From 21c7f70386a2836efbfd14faef4cd441ba37a885 Mon Sep 17 00:00:00 2001
From: Jon Mease <jon.mease.dev@gmail.com>
Date: Wed, 15 Sep 2021 16:00:34 -0400
Subject: [PATCH 03/30] Test fix

---
 .../plotly/tests/test_core/test_graph_objs/test_template.py     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/python/plotly/plotly/tests/test_core/test_graph_objs/test_template.py b/packages/python/plotly/plotly/tests/test_core/test_graph_objs/test_template.py
index a3061dfe5aa..2cecffae58e 100644
--- a/packages/python/plotly/plotly/tests/test_core/test_graph_objs/test_template.py
+++ b/packages/python/plotly/plotly/tests/test_core/test_graph_objs/test_template.py
@@ -356,7 +356,7 @@ def test_move_nested_trace_properties(self):
             },
         )
 
-        self.assertEqual(pio.to_json(templated_fig), pio.to_json(expected_fig))
+        self.assertEqual(templated_fig.to_dict(), expected_fig.to_dict())
 
     def test_move_nested_trace_properties_existing_traces(self):
         fig = go.Figure(

From 46a87bd989128aa7d9c648379663872a216de630 Mon Sep 17 00:00:00 2001
From: Jon Mease <jon.mease.dev@gmail.com>
Date: Wed, 15 Sep 2021 18:01:44 -0400
Subject: [PATCH 04/30] Remove layout string test

---
 .../plotly/tests/test_optional/test_offline/test_offline.py      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/python/plotly/plotly/tests/test_optional/test_offline/test_offline.py b/packages/python/plotly/plotly/tests/test_optional/test_offline/test_offline.py
index dd9204947f5..1f2a0bcc12b 100644
--- a/packages/python/plotly/plotly/tests/test_optional/test_offline/test_offline.py
+++ b/packages/python/plotly/plotly/tests/test_optional/test_offline/test_offline.py
@@ -89,7 +89,6 @@ def test_default_mpl_plot_generates_expected_html(self):
             # just make sure a few of the parts are in here
             # like PlotlyOfflineTestCase(TestCase) in test_core
             self.assertTrue(data_json in html)  # data is in there
-            self.assertTrue(layout_json in html)  # layout is in there too
             self.assertTrue(PLOTLYJS in html)  # and the source code
             # and it's an <html> doc
             self.assertTrue(html.startswith("<html>") and html.endswith("</html>"))

From c25e7105558f4c5bc8790273ec24d19b466cda1e Mon Sep 17 00:00:00 2001
From: Jon Mease <jon.mease.dev@gmail.com>
Date: Wed, 15 Sep 2021 18:36:33 -0400
Subject: [PATCH 05/30] Fix deepcopy/pickle tests

---
 .../plotly/tests/test_io/test_deepcopy_pickle.py     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/python/plotly/plotly/tests/test_io/test_deepcopy_pickle.py b/packages/python/plotly/plotly/tests/test_io/test_deepcopy_pickle.py
index 4cbccdd2baa..245f6aaaa14 100644
--- a/packages/python/plotly/plotly/tests/test_io/test_deepcopy_pickle.py
+++ b/packages/python/plotly/plotly/tests/test_io/test_deepcopy_pickle.py
@@ -38,7 +38,7 @@ def test_deepcopy_figure(fig1):
     fig_copied = copy.deepcopy(fig1)
 
     # Contents should be equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig1)
+    assert fig_copied.to_dict() == fig1.to_dict()
 
     # Identities should be distinct
     assert fig_copied is not fig1
@@ -50,7 +50,7 @@ def test_deepcopy_figure_subplots(fig_subplots):
     fig_copied = copy.deepcopy(fig_subplots)
 
     # Contents should be equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig_subplots)
+    assert fig_copied.to_dict() == fig_subplots.to_dict()
 
     # Subplot metadata should be equal
     assert fig_subplots._grid_ref == fig_copied._grid_ref
@@ -66,7 +66,7 @@ def test_deepcopy_figure_subplots(fig_subplots):
     fig_copied.add_bar(y=[0, 0, 1], row=1, col=2)
 
     # And contents should be still equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig_subplots)
+    assert fig_copied.to_dict() == fig_subplots.to_dict()
 
 
 def test_deepcopy_layout(fig1):
@@ -91,21 +91,21 @@ def test_pickle_figure_round_trip(fig1):
     fig_copied = pickle.loads(pickle.dumps(fig1))
 
     # Contents should be equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig1)
+    assert fig_copied.to_dict() == fig1.to_dict()
 
 
 def test_pickle_figure_subplots_round_trip(fig_subplots):
     fig_copied = pickle.loads(pickle.dumps(fig_subplots))
 
     # Contents should be equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig_subplots)
+    assert fig_copied.to_dict() == fig_subplots.to_dict()
 
     # Should be possible to add new trace to subplot location
     fig_subplots.add_bar(y=[0, 0, 1], row=1, col=2)
     fig_copied.add_bar(y=[0, 0, 1], row=1, col=2)
 
     # And contents should be still equal
-    assert pio.to_json(fig_copied) == pio.to_json(fig_subplots)
+    assert fig_copied.to_dict() == fig_subplots.to_dict()
 
 
 def test_pickle_layout(fig1):

From 65a8c07e87e59764334754fded2e32208aa722fa Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Sat, 2 Oct 2021 13:36:49 +0200
Subject: [PATCH 06/30] dash bio test

---
 doc/python/bio-test.md | 46 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 doc/python/bio-test.md

diff --git a/doc/python/bio-test.md b/doc/python/bio-test.md
new file mode 100644
index 00000000000..2b925341fad
--- /dev/null
+++ b/doc/python/bio-test.md
@@ -0,0 +1,46 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.2'
+      jupytext_version: 1.3.1
+  kernelspec:
+    display_name: Python 3
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.6.8
+  plotly:
+    description: Bio test description
+    display_as: bio
+    language: python
+    layout: base
+    name: Bio Test
+    order: 1
+    page_type: u-guide
+    permalink: python/bio-test/
+    thumbnail: thumbnail/hist2dcontour.png
+---
+
+## 2D Histogram Contours or Density Contours
+
+A 2D histogram contour plot, also known as a density contour plot, is a 2-dimensional generalization of a 
+
+```python
+import plotly.express as px
+df = px.data.tips()
+
+fig = px.density_contour(df, x="total_bill", y="tip")
+fig.show()
+```

From cd3f78090c6605afb23f3c68930dd2007b348219 Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Sun, 3 Oct 2021 16:02:09 +0200
Subject: [PATCH 07/30] created DashBio posts for graphing-library-docs

---
 doc/python/alignment-chart.md          | 170 +++++++++++++++++
 doc/python/bio-test.md                 |  46 -----
 doc/python/circos.md                   | 225 ++++++++++++++++++++++
 doc/python/clustergram.md              | 248 +++++++++++++++++++++++++
 doc/python/molecular-visualizations.md | 200 ++++++++++++++++++++
 doc/python/volacano-plot.md            | 182 ++++++++++++++++++
 doc/requirements.txt                   |   3 +
 7 files changed, 1028 insertions(+), 46 deletions(-)
 create mode 100644 doc/python/alignment-chart.md
 delete mode 100644 doc/python/bio-test.md
 create mode 100644 doc/python/circos.md
 create mode 100644 doc/python/clustergram.md
 create mode 100644 doc/python/molecular-visualizations.md
 create mode 100644 doc/python/volacano-plot.md

diff --git a/doc/python/alignment-chart.md b/doc/python/alignment-chart.md
new file mode 100644
index 00000000000..8690fc1ab49
--- /dev/null
+++ b/doc/python/alignment-chart.md
@@ -0,0 +1,170 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.6
+  plotly:
+    # description:
+    display_as: bio
+    language: python
+    layout: base
+    name: Alignment Chart
+    order: 1
+    page_type: u-guide
+    permalink: python/alignment-chart/
+    thumbnail: thumbnail/alignment-chart.png
+---
+
+## Default AlignmentChart
+An example of a default AlignmentChart component without any extra properties
+
+```python
+import urllib.request as urlreq
+
+from jupyter_dash import JupyterDash
+import dash_bio as dashbio
+
+app = JupyterDash(__name__)
+
+data = urlreq.urlopen(
+    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
+    'alignment_viewer_p53.fasta'
+).read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    id='my-default-alignment-viewer',
+    data=data
+)
+
+app.run_server(mode="inline")
+```
+
+## Consensus Sequence
+Toggle the display of the consensus sequence at the bottom of the heatmap.
+
+```python
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+from jupyter_dash import JupyterDash
+
+app = JupyterDash(__name__)
+
+data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    data=data,
+    showconsensus=False
+)
+
+app.run_server(mode="inline")
+```
+
+## Tile Size
+Change the height and/or width of the tiles.
+
+
+```python
+import urllib.request as urlreq
+import dash_bio as dashbio
+
+data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    data=data,
+    tilewidth=50
+)
+    
+app.run_server(mode="inline")
+```
+
+## AlignmentChart Properties
+> Access this documentation in your Python terminal with:
+> 
+> ```>>> help(dash_bio.AlignmentChart)```
+> 
+> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
+
+**id** (_string_; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
+
+**colorscale** (_string_ | _dict_; default `'clustal2'`): Colorscale in 'buried', 'cinema', 'clustal', 'clustal2', 'helix', 'hydrophobicity' 'lesk', 'mae', 'nucleotide', 'purine', 'strand', 'taylor', 'turn', 'zappo', or your own colorscale as a {'nucleotide': COLOR} dict. Note that this is NOT a standard plotly colorscale.
+
+**conservationcolor** (_string_; optional): Color of the conservation secondary barplot, in common name, hex, rgb or rgba format.
+
+**conservationcolorscale** (_string_ | _list_; default `'Viridis'`): Colorscale of the conservation barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.
+
+**conservationmethod** (_a value equal to: 'conservation', 'entropy'_; default `'entropy'`): Whether to use most conserved ratio (MLE) 'conservation' or normalized entropy 'entropy' to determine conservation, which is a value between 0 and 1 where 1 is most conserved.
+
+**conservationopacity** (_number_ | _string_; optional): Opacity of the conservation secondary barplot as a value between 0 and 1.
+
+**correctgap** (_boolean_; default `True`): Whether to normalize the conservation barchart By multiplying it elementwise with the gap barchart, as to lower the conservation values across sequences regions with many gaps.
+
+**data** (_string_; optional): Input data, either in FASTA or Clustal format.
+
+**eventDatum** (_string_; optional): A Dash prop that returns data on clicking, hovering or resizing the viewer.
+
+**extension** (_string_; default `'fasta'`): Format type of the input data, either in FASTA or Clustal.
+
+**gapcolor** (_string_; default `'grey'`): Color of the gap secondary barplot, in common name, hex, rgb or rgba format.
+
+**gapcolorscale** (_string_ | _list_; optional): Colorscale of the gap barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.
+
+**gapopacity** (_number_ | _string_; optional): Opacity of the gap secondary barplot as a value between 0 and 1.
+
+**groupbars** (_boolean_; default `False`): If both conservation and gap are enabled, toggles whether to group bars or to stack them as separate subplots. No effect if not both gap and conservation are shown.
+
+**height** (_number_ | _string_; default `900`): Width of the Viewer. Property takes precedence over tilesheight if both are set.
+
+**numtiles** (_number_; optional): Sets how many tiles to display across horitontally. If enabled, overrides tilewidth and sets the amount of tiles directly based off that value.
+
+**opacity** (_number_ | _string_; optional): Opacity of the main plot as a value between 0 and 1.
+
+**overview** (_a value equal to: 'heatmap', 'slider', 'none'_; default `heatmap`): Toggles whether the overview should be a heatmap, a slider, or none.
+
+**scrollskip** (_number_; default `10`): If overview is set to 'scroll', determines how many tiles to skip with each slider movement. Has no effect if scroll is not enabled (such as with overview or none).
+
+**showconsensus** (_boolean_; default `True`): Displays toggling the consensus sequence, where each nucleotide in the consensus sequence is the argmax of its distribution at a set nucleotide.
+
+**showconservation** (_boolean_; default `True`): Enables the display of conservation secondary barplot where the most conserved nucleotides or amino acids get greater bars.
+
+**showgap** (_boolean_; default `True`): Enables the display of gap secondary barplot where the sequence regions with the fewest gaps get the greatest bars.
+
+**showid** (_boolean_; default `True`): Toggles displaying sequence IDs at left of alignment.
+
+**showlabel** (_boolean_; default `True`): Toggles displaying sequence labels at left of alignment.
+
+**textcolor** (_string_; optional): Color of the nucleotide labels, in common name, hex, rgb or rgba format. If left blank, handled by the colorscale automatically.
+
+**textsize** (_number_ | _string_; default `10`): Size of the nucleotide labels, as a number.
+
+**tickstart** (_number_ | _string_; optional): Determines where to start annotating the first tile. If let blank will be automatically determined by Plotly. Equivalent to Plotly's tick0 property. Does not function if overview mode 'slider' is applied. (Current bug).
+
+**ticksteps** (_number_ | _string_; optional): Determines at what interval to keep annotating the tiles. If left blank will be automatially determined by Plotly. Equivalent to Plotly's dtick property. Does not function if overview mode 'slider' is applied. (Current bug).
+
+**tileheight** (_number_; default `16`): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up vertically. If enabled, set height dynamically.
+
+**tilewidth** (_number_; default `16`): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up horizontally. The total number of tiles (numtiles) seen horizontally is automatically determined by rounding the Viewer width divided by the tile width. the Viewwer width divided by the tile witdth.
+
+**width** (_number_ | _string_; optional): Width of the Viewer. Property takes precedence over tileswidth and numtiles if either of them is set.
+
+```python
+
+```
diff --git a/doc/python/bio-test.md b/doc/python/bio-test.md
deleted file mode 100644
index 2b925341fad..00000000000
--- a/doc/python/bio-test.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-jupyter:
-  jupytext:
-    notebook_metadata_filter: all
-    text_representation:
-      extension: .md
-      format_name: markdown
-      format_version: '1.2'
-      jupytext_version: 1.3.1
-  kernelspec:
-    display_name: Python 3
-    language: python
-    name: python3
-  language_info:
-    codemirror_mode:
-      name: ipython
-      version: 3
-    file_extension: .py
-    mimetype: text/x-python
-    name: python
-    nbconvert_exporter: python
-    pygments_lexer: ipython3
-    version: 3.6.8
-  plotly:
-    description: Bio test description
-    display_as: bio
-    language: python
-    layout: base
-    name: Bio Test
-    order: 1
-    page_type: u-guide
-    permalink: python/bio-test/
-    thumbnail: thumbnail/hist2dcontour.png
----
-
-## 2D Histogram Contours or Density Contours
-
-A 2D histogram contour plot, also known as a density contour plot, is a 2-dimensional generalization of a 
-
-```python
-import plotly.express as px
-df = px.data.tips()
-
-fig = px.density_contour(df, x="total_bill", y="tip")
-fig.show()
-```
diff --git a/doc/python/circos.md b/doc/python/circos.md
new file mode 100644
index 00000000000..769340f553a
--- /dev/null
+++ b/doc/python/circos.md
@@ -0,0 +1,225 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.6
+  plotly:
+    # description:
+    display_as: bio
+    language: python
+    layout: base
+    name: Circos
+    order: 1
+    page_type: u-guide
+    permalink: python/circos/
+    thumbnail: thumbnail/circos.png
+---
+
+## Default Circos
+An example of a default Circos component without any extra properties.
+
+```python
+from jupyter_dash import JupyterDash
+
+import json
+import urllib.request as urlreq
+from dash.dependencies import Input, Output, State
+import dash_bio as dashbio
+from dash import html
+from dash import dcc
+
+app = JupyterDash(__name__)
+
+data = urlreq.urlopen(
+    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
+    'circos_graph_data.json'
+).read()
+
+circos_graph_data = json.loads(data.decode('utf-8'))
+
+app.layout = html.Div([
+    dashbio.Circos(
+        id='my-dashbio-default-circos',
+        layout=circos_graph_data['GRCh37'],
+        selectEvent={"0": "hover", "1": "click", "2": "both"},
+        tracks=[{
+            'type': 'CHORDS',
+            'data': circos_graph_data['chords'],
+            'config': {
+                'tooltipContent': {
+                    'source': 'source',
+                    'sourceID': 'id',
+                    'target': 'target',
+                    'targetID': 'id',
+                    'targetEnd': 'end'
+                }
+            }
+        }]
+    ),
+    "Graph type:",
+    dcc.Dropdown(
+        id='histogram-chords-default-circos',
+        options=[
+            {'label': x, 'value': x}
+            for x in ['histogram', 'chords']
+        ],
+        value='chords'
+    ),
+    "Event data:",
+    html.Div(id='default-circos-output')
+])
+
+@app.callback(
+    Output('default-circos-output', 'children'),
+    Input('my-dashbio-default-circos', 'eventDatum')
+)
+def update_output(value):
+    if value is not None:
+        return [html.Div('{}: {}'.format(v.title(), value[v]))
+                for v in value.keys()]
+    return 'There are no event data. Click or hover on a data point to get more information.'
+
+@app.callback(
+    Output('my-dashbio-default-circos', 'tracks'),
+    Input('histogram-chords-default-circos', 'value'),
+    State('my-dashbio-default-circos', 'tracks')
+)
+def change_graph_type(value, current):
+    if value == 'histogram':
+        current[0].update(
+            data=circos_graph_data['histogram'],
+            type='HISTOGRAM'
+        )
+
+    elif value == 'chords':
+        current[0].update(
+            data=circos_graph_data['chords'],
+            type='CHORDS',
+            config={
+                'tooltipContent': {
+                    'source': 'source',
+                    'sourceID': 'id',
+                    'target': 'target',
+                    'targetID': 'id',
+                    'targetEnd': 'end'
+                }
+            }
+        )
+    return current
+
+app.run_server(mode="inline")
+```
+
+## Inner And Outer Radii
+Change the inner and outer radii of your Circos graph.
+
+
+```python
+from jupyter_dash import JupyterDash
+
+import json
+import urllib.request as urlreq
+import dash_bio as dashbio
+
+data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/circos_graph_data.json').read()
+circos_graph_data = json.loads(data)
+app = JupyterDash(__name__)
+
+app.layout = dashbio.Circos(
+    layout=circos_graph_data['GRCh37'],
+    tracks=[{
+        'type': 'CHORDS',
+        'data': circos_graph_data['chords']
+    }],
+    config={
+        'innerRadius': 40,
+        'outerRadius': 200
+    }
+)
+
+app.run_server(mode="inline")
+```
+
+
+## Circos Properties
+
+
+> Access this documentation in your Python terminal with:
+> ```
+> >>> help(dash_bio.Circos)
+> ```
+> Our recommended IDE for writing Dash apps is Dash Enterprise's
+> **[Data Science Workspaces](https://plotly.com/dash/workspaces)**,
+> which has typeahead support for Dash Component Properties.
+> **[Find out if your company is using
+> Dash Enterprise](https://go.plotly.com/company-lookup)**.
+
+
+**id** (_string_; optional): The ID of the component to be used in Dash callbacks.
+
+**config** (_dict_; optional): Configuration of overall layout of the graph.
+
+**enableDownloadSVG** (_boolean_; optional): Allow for an SVG snapshot of the Circos graph to be downloaded.
+
+**enableZoomPan** (_boolean_; optional): Allow for zooming and panning the Circos graph.
+
+**eventDatum** (_dict_; optional): A Dash prop that returns data on clicking or hovering of the tracks. Depending on what is specified for prop "selectEvent".
+
+**layout** (_list_ of dicts; required): The overall layout of the Circos graph, provided as a list of dictionaries.
+
+```layout``` is a list of dicts with keys:
+- **color** (_string_; required): The color of the block.
+- **id** (_string_; required): The id of the block, where it will recieve data from the specified "track" id.
+- **label** (_string_; required): The labels of the block.
+- **len** (_number_; required): The length of the block.
+
+**selectEvent** (_dict_; optional): A dictionary used to choose whether tracks should return data on click, hover, or both, with the dash prop "eventDatum". The keys of the dictionary represent the index of the list specified for "tracks". Ex: selectEvent={ "0": "hover", "1": "click", "2": "both" },.
+
+**size** (_number_; default `800`): The overall size of the SVG container holding the graph. Set on initilization and unchangeable thereafter.
+
+**style** (_dict_; optional): The CSS styling of the div wrapping the component.
+
+**tracks** (_list_ of dicts; optional): Tracks that specify specific layouts. For a complete list of tracks and usage, please check the docs.
+
+```tracks``` is a list of dicts with keys:
+- **color** (_dict_; optional): Specify which dictonary key to grab color values from, in the passed in dataset. This can be a string or an object. If using a string, you can specify hex, RGB, and colors from d3 scale chromatic (Ex: RdYlBu). The key "name" is required for this dictionary, where the input for "name" points to some list of dictionaries color values. Ex: "color": {"name": "some key that refers to color in a data set"}.
+
+    ```color``` is a string
+
+    Or dict with keys:
+    - **name** (_string_; required)<br><br>
+
+- **config** (_dict_; optional): The layout of the tracks, where the user can configure innerRadius, outterRadius, ticks, labels, and more.
+- **data** (_list_; required): The data that makes up the track. It can be a Json object.
+- **id** (_string_; optional): The id of a specific piece of track data.
+- **tooltipContent** (_dict_; optional): Specify what data for tooltipContent is displayed. The entry for the "name" key, is any of the keys used in the data loaded into tracks. Ex: "tooltipContent": {"name": "block_id"}, To display all data in the dataset use "all" as the entry for the key "name". Ex: "tooltipContent": {"name": "all"} Ex: This will return (source) + ' > ' + (target) + ': ' + (targetEnd)'. "tooltipContent": { "source": "block_id", "target": "position", "targetEnd": "value" }, Ex: This will return (source)(sourceID) + ' > ' + (target)(targetID) + ': ' (target)(targetEnd)'. "tooltipContent": { "source": "source", "sourceID": "id", "target": "target", "targetID": "id", "targetEnd": "end" }.
+
+    ```tooltipContent``` is a _string_
+    
+    Or dict with keys:
+    - **name** (_string_; required)
+    - **source** (_string_; required)
+    - **sourceID** (_string_; optional)
+    - **target** (_string_; required)
+    - **targetEnd** (string; required)
+    - **targetID** (string; optional) <br><br>
+
+- **type** (a _value equal to: 'CHORDS', 'HEATMAP', 'HIGHLIGHT', 'HISTOGRAM', 'LINE', 'SCATTER', 'STACK', 'TEXT'_; optional): Specify the type of track this is. Please check the docs for a list of tracks you can use, and ensure the name is typed in all capitals.
diff --git a/doc/python/clustergram.md b/doc/python/clustergram.md
new file mode 100644
index 00000000000..18b00e1173e
--- /dev/null
+++ b/doc/python/clustergram.md
@@ -0,0 +1,248 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.6
+  plotly:
+    # description:
+    display_as: bio
+    language: python
+    layout: base
+    name: Clustergram
+    order: 1
+    page_type: u-guide
+    permalink: python/clustergram/
+    thumbnail: thumbnail/clustergram.png
+---
+
+## Default Clustergram
+An example of a default Clustergram component without any extra properties.
+
+
+```python
+from jupyter_dash import JupyterDash
+
+import pandas as pd
+from dash.dependencies import Input, Output
+import dash_bio as dashbio
+from dash import html
+from dash import dcc
+
+app = JupyterDash(__name__)
+
+df = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
+    'clustergram_mtcars.tsv',
+    sep='	', skiprows=4
+).set_index('model')
+
+columns = list(df.columns.values)
+rows = list(df.index)
+
+app.layout = html.Div([
+    "Rows to display",
+    dcc.Dropdown(
+        id='my-default-clustergram-input',
+        options=[
+            {'label': row, 'value': row} for row in list(df.index)
+        ],
+        value=rows[:10],
+        multi=True
+    ),
+
+    html.Div(id='my-default-clustergram')
+])
+
+@app.callback(
+    Output('my-default-clustergram', 'children'),
+    Input('my-default-clustergram-input', 'value')
+)
+def update_clustergram(rows):
+    if len(rows) < 2:
+        return "Please select at least two rows to display."
+
+    return dcc.Graph(figure=dashbio.Clustergram(
+        data=df.loc[rows].values,
+        column_labels=columns,
+        row_labels=rows,
+        color_threshold={
+            'row': 250,
+            'col': 700
+        },
+        hidden_labels='row',
+        height=800,
+        width=700
+    ))
+
+app.run_server()
+```
+
+## Dendrogram Cluster Colors/Line Widths
+Change the colors of the dendrogram traces that are used to represent clusters, and configure their line widths.
+
+
+```python
+from jupyter_dash import JupyterDash
+import dash_core_components as dcc
+import dash_bio as dashbio
+import pandas as pd
+
+app = JupyterDash(__name__)
+
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/clustergram_mtcars.tsv',
+                 sep='	', skiprows=4).set_index('model')
+
+columns = list(df.columns.values)
+rows = list(df.index)
+
+app.layout = dcc.Graph(
+    figure=dashbio.Clustergram(
+        data=df.loc[rows].values,
+        row_labels=rows,
+        column_labels=columns,
+        color_threshold={
+            'row': 250,
+            'col': 700
+        },
+        height=800,
+        width=700,
+        color_list={
+            'row': ['#636EFA', '#00CC96', '#19D3F3'],
+            'col': ['#AB63FA', '#EF553B'],
+            'bg': '#506784'
+        },
+        line_width=2
+))
+
+app.run_server(mode="inline")
+```
+
+## Relative Dendrogram Size
+Change the relative width and height of, respectively, the row and column dendrograms compared to the width and height of the heatmap.
+
+
+```python
+from jupyter_dash import JupyterDash
+import pandas as pd
+from dash import dcc
+import dash_bio as dashbio
+
+
+app = JupyterDash(__name__)
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/clustergram_mtcars.tsv',
+                 sep='	', skiprows=4).set_index('model')
+
+columns = list(df.columns.values)
+rows = list(df.index)
+
+clustergram = 
+
+app.layout = dcc.Graph(
+    figure=dashbio.Clustergram(
+        data=df.loc[rows].values,
+        row_labels=rows,
+        column_labels=columns,
+        color_threshold={
+            'row': 250,
+            'col': 700
+        },
+        height=800,
+        width=700,
+        display_ratio=[0.1, 0.7]
+))
+
+app.run_server(mode="inline")
+```
+
+## Clustergram Properties
+> Access this documentation in your Python terminal with:
+>
+> ```>>> help(dash_bio.Clustergram)```
+> 
+> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
+
+**data** (_2D array-like_; required): Matrix or table of observations (dropping columns of non-numeric dtype).
+
+**annotation_font** (_dict_; optional): The font options for annotations, as specified in the Plotly graph_objects documentation (see: https://plotly.cp,/python/reference/#layout-scene-annotations-items-annotation-font).
+
+**computed_traces** (_dict_; optional): The dendrogram traces from another (precomputed) Clustergram component.
+
+**column_labels** (_list_; optional): List of column category labels (observation labels).
+
+**cluster** (_string_; default `'all'`): The dimension along which the data will be clustered: 'row', 'column', or 'all'; 'all' means data will be clustered along columns, then clustered along rows of column-clustered data.
+
+**col_dist** (_string_; default `'euclidean'`): Distance metric for columns. Passed as argument `metric` to the function specified in `dist_fun` when called for clustering along columns.
+
+**color_threshold** (_dict_; default `{'row': 0, 'col': 0}`): Maximum linkage value for which unique colors are assigned to clusters; 'row' for rows, and 'col' for columns.
+
+**color_map** (_list_; default `[[0.0, 'rgb(255,0,0)'], [0.5, 'rgb(0,0,0)'], [1.0, 'rgb(0,255,0)']]`): Colorscale for the heatmap. Top-level elements contain two elements, the first of which refers to the percentile rank, and the second to the applied color. For instance, [[0.0, 'white'], [0.5, 'gray'], [1.0, 'black']] means that cells in the 49th percentile would be white; cells at the 50th or higher percentiles, excluding the 100th percentile, would be gray; and the cell(s) at the 100th percentile would be black.
+
+**color_list** (_dict_; optional): The list of colors to use for different clusters in the dendrogram that have a root under the threshold for each dimension. If there are fewer colors than there are clusters along a specific dimension, the colors of the clusters will cycle through the colors specified in the list. The keys are: 'row' (for row clusters), 'col' (for column clusters), and 'bg' (for all traces above the clustering threshold for both row and column).
+
+**center_values** (_bool_; default `True`): Whether or not to center the values of the heatmap about zero.
+
+**col_group_marker** (_list_; optional): A list containing the annotations for column clusters in the dendrogram. Each annotation is a dictionary with the keys 'group_number' (the cluster number to highlight), 'annotation' (a string containing the text of the annotation), and 'color' (a string representation of the color of the annotation).
+
+**dist_fun** (_function_; default `scipy.spatial.distance.pdist`): Function to compute the pairwise distance from the observations (see docs for scipy.spatial.distance.pdist).
+
+**display_range** (_double_; default `3.0`): In the heatmap, standardized values from the dataset that are below the negative of this value will be colored with one shade, and the values that are above this value will be colored with another.
+
+**display_ratio** (_list_ | number; default `0.2`): The dendrograms' heights with respect to the size of the heatmap; with one element, both the row and column dendrograms have the same ratio; with two, the row dendrogram ratio corresponds to the first element of the list and the column dendrogram ratio corresponds to the second element of the list.
+
+**generate_curves_dict** (_bool_; default `False`): Whether or not to return a dictionary containing information about the cluster number associated with each curve number in the graph. (May be useful for capturing the cluster number that is clicked.)
+
+**hidden_labels** (_list_; optional): List containing strings 'row' and/or 'col' if row and/or column labels should be hidden on the final plot.
+
+**height** (_number_; default `500`): The height of the graph, in px.
+
+**imputer_parameters** (_dict_; optional): Specifies the parameters 'missing_values' and 'strategy' of the SimpleImputer class from scikit-learn 0.20.1 (both of these parameters must be keys in the dictionary). An additional parameter, 'axis', is used to specify the direction along which to impute (a parameter of Imputer, which was deprecated in scikit-learn 0.20.0): 'axis=0' indicates that imputing should happen along columns, while 'axis=1' indicates that it should happen along rows (see: https://scikit-learn.org/stable/modules/generated/sklearn.preprocessing.Imputer.html).
+
+**link_fun** (_function_; default `scipy.cluster.hierarchy.linkage`): Function to compute the linkage matrix from the pairwise distances (see docs for scipy.cluster.hierarchy.linkage).
+
+**log_transform** (_bool_; default `False`): Whether or not to transform the data by taking the base-two logarithm of all values in the dataset.
+
+**line_width** (_list_ | number; default `0.5`): The line width for the dendrograms. If in list format, the first element corresponds to the width of the row dendrogram traces, and the second corresponds to the width of the column dendrogram traces.
+
+**optimal_leaf_order** (_bool_; default `False`): Whether to enable (True) or disable (False) the option to determine leaf order that maximizes similarity between neighboring leaves.
+
+**paper_bg_color** (_string_; default `rgba(0,0,0,0)`): The background color of the paper on the graph.
+
+**plot_bg_color** (_string_; default `rgba(0,0,0,0)`): The background color of the subplots on the graph.
+
+**return_computed_traces** (_bool_; default `False`): Whether or not to return the precomputed dendrogram traces. (May be useful if one wishes to add, e.g., group markers to the figure without recalculating the clustering in the entire figure.)
+
+**row_labels** (_list_; optional): Listm of row category labels (observation labels).
+
+**row_dist** (_string_; default `'euclidean'`): Distance metric for rows. Passed as argument `metric` to the function specified in `dist_fun` when called for clustering along rows.
+
+**row_group_marker** (_list_; optional): A list containing the annotations for row clusters in the dendrogram. Each annotation is a dictionary with the keys 'group_number' (the cluster number to highlight), 'annotation' (a string containing the text of the annotation), and 'color' (a string representation of the color of the annotation).
+
+**standardize** (_string_; default `'none'`): The dimension for standardizing values, so that the mean is 0 and the standard deviation is 1, along the specified dimension: 'row', 'column', or 'none'.
+
+**tick_font** (_dict_; optional): The font options for ticks, as specified in the Plotly graph_objects documentation (see: https://plotly.com/python/reference/#bar-marker-colorbar-tickfont).
+
+**width** (_number_; default `500`): The width of the graph, in px.
+
+```python
+
+```
diff --git a/doc/python/molecular-visualizations.md b/doc/python/molecular-visualizations.md
new file mode 100644
index 00000000000..93e986ff796
--- /dev/null
+++ b/doc/python/molecular-visualizations.md
@@ -0,0 +1,200 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.6
+  plotly:
+    # description:
+    display_as: bio
+    language: python
+    layout: base
+    name: Molecular visualizations
+    order: 1
+    page_type: u-guide
+    permalink: python/molecular-visualizations/
+    thumbnail: thumbnail/molecular_visualizations.png
+---
+
+## Molecular Visualizations
+
+
+### Default Molecule3dViewer
+An example of a default Molecule3dViewer component without any extra properties.
+
+```python
+import json
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+from jupyter_dash import JupyterDash
+
+app = JupyterDash(__name__)
+
+model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/model_data.js').read()
+styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/styles_data.js').read()
+
+model_data = json.loads(model_data)
+styles_data = json.loads(styles_data)
+
+app.layout = dashbio.Molecule3dViewer(
+    styles=styles_data,
+    modelData=model_data,
+    backgroundOpacity=0.2
+)
+
+app.run_server(mode="inline")
+```
+
+### Labels
+Add labels corresponding to the atom of the molecule. Label styles can be set with additional parameters. For styling keys, see.
+
+```python
+import json
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+from jupyter_dash import JupyterDash
+
+app = JupyterDash(__name__)
+
+model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/model_data.js').read()
+styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/styles_data.js').read()
+
+model_data = json.loads(model_data)
+styles_data = json.loads(styles_data)
+
+app.layout = dashbio.Molecule3dViewer(
+    styles=styles_data,
+    modelData=model_data,
+    labels=[
+        {'text': 'Residue Name: GLY1', 'fontColor': 'red', 'font': 'Courier New, monospace'},
+        {'text': 'Residue Chain: A', 'position': {'x': 15.407, 'y': -8.432, 'z': 6.573}}
+    ],
+)
+
+app.run_server(mode="inline")
+```
+
+### Isosurfaces
+Render a 3D isosurface. Volumetric orbital data must be provided in the cube file format.
+
+```python
+import json
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+from jupyter_dash import JupyterDash
+
+app = JupyterDash(__name__)
+
+model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene_model_data.js').read()
+styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene_style_data.js').read()
+
+cube_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene-homo.cube').read().decode('utf-8')
+
+model_data = json.loads(model_data)
+styles_data = json.loads(styles_data)
+
+app.layout = dashbio.Molecule3dViewer(
+    styles=styles_data,
+    modelData=model_data,
+    selectionType='atom',
+    orbital={
+        'cube_file': cube_data,
+        'iso_val': 0.1,
+        'opacity': 1.0,
+        'positiveVolumetricColor': 'red',
+        'negativeVolumetricColor': 'blue',
+    }
+)
+
+app.run_server(mode="inline")
+```
+
+### Molecule3dViewer Properties
+
+
+> Access this documentation in your Python terminal with:
+> ```
+> >>> help(dash_bio.Molecule3dViewer)
+> ```
+> Our recommended IDE for writing Dash apps is Dash Enterprise's
+> **[Data Science Workspaces](https://plotly.com/dash/workspaces)**,
+> which has typeahead support for Dash Component Properties.
+> **[Find out if your company is using
+> Dash Enterprise](https://go.plotly.com/company-lookup)**.
+
+
+**id** (_string_; optional): The ID used to identify this component in callbacks.
+
+**atomLabelsShown** (_boolean_; optional): Property to either show or hide labels.
+
+**backgroundColor** (_string_; default ```'#FFFFFF'```): Property to change the background color of the molecule viewer.
+
+**backgroundOpacity** (_number_; default ```0```): Property to change the background opacity - ranges from 0 to 1.
+
+**labels** (_list_ of dicts; optional): Labels corresponding to the atoms of the molecule. Each label has a ```text``` field, a string containing the label content, and can have many other styling fields as described in **https://3dmol.csb.pitt.edu/doc/types.html#LabelSpec**.
+
+**modelData** (_dict_; optional): The data that will be used to display the molecule in 3D The data will be in JSON format and should have two main dictionaries - atoms, bonds.
+
+```modelData``` is a dict with keys:
+- **atoms** (_list_; optional)
+- **bonds** (_list_; optional)
+
+**orbital** (_dict_; optional): Add an isosurface from volumetric data provided in the ```cube_file```.
+
+```orbital``` is a dict with keys:
+- **cube_file** (_string_; optional): The filepath containing raw volumetric data for vertex coloring.
+- **iso_val** (_number_; optional): The isovalue to draw the surface at.
+- **negativeVolumetricColor** (_string_; optional): Color for the negative value of the isosurface orbital.
+- **opacity** (_number_; optional): Transparency of the surface, between 0 and 1.
+- **positiveVolumetricColor** (_string_; optional): Color for the positive value of the isosurface orbital.
+
+**selectedAtomIds** (_list_; optional): Property that stores a list of all selected atoms.
+
+**selectionType** (_a value equal to: 'atom', 'residue', 'chain'_; default ```'atom'```): The selection type - may be atom, residue or chain.
+
+**shapes** (_list of dicts_; optional): Add a predefined renderable shape objects to the molecule. Valid shape types are Arrow, Sphere, and Cylinder.
+
+**styles** (_list of dicts_; optional): Property that can be used to change the representation of the molecule. Options include sticks, cartoon and sphere.
+
+```styles``` is a list of dicts with keys:
+- **color** (_string_; optional)
+- **visualization_type** (_a value equal to: 'cartoon', 'sphere', 'stick'_; optional)
+
+**zoom** (_dict_; default ```{ factor: 0.8, animationDuration: 0, fixedPath: False,}```): Zoom the current view by a constant factor, with optional parameters to modify the duration and motion of the zoom animation.
+
+```zoom``` is a dict with keys:
+- **animationDuration** (_number_; optional): An optional parameter that denotes the duration of a zoom animation, in milliseconds.
+- **factor** (_number_; optional): Magnification factor. Values greater than 1 will zoom, in, less than one will zoom out. Default 2.
+- **fixedPath** (_boolean_; optional): If True, animation is constrained to requested motion, overriding updates that happen during the animation.
+
+**zoomTo** (_dict_; default ```{ sel: {}, animationDuration: 0, fixedPath: False,}```): Zoom to center of atom selection.
+
+```zoomTo``` is a dict with keys:
+- **animationDuration** (_number_; optional): An optional parameter that denotes the duration of a zoom animation , in milliseconds.
+- **fixedPath** (_boolean_; optional): If True, animation is constrained to requested motion, overriding updates that happen during the animation.
+- **sel** (_dict_; optional): Selection specification specifying model and atom properties to select. Default: all atoms in viewer.<br>
+  ```sel``` is a dict with keys:
+    - **chain** (_string_; optional): Chain that the residue is located on.
+    - **resi** (_number_; optional): The index value used to identify the residue; residues are numbered sequentially starting from 1.
+
+
diff --git a/doc/python/volacano-plot.md b/doc/python/volacano-plot.md
new file mode 100644
index 00000000000..04dcd6d7e5b
--- /dev/null
+++ b/doc/python/volacano-plot.md
@@ -0,0 +1,182 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.6
+  plotly:
+    # description:
+    display_as: bio
+    language: python
+    layout: base
+    name: Volcano plot
+    order: 1
+    page_type: u-guide
+    permalink: python/volcano-plot/
+    thumbnail: thumbnail/volcano-plot.png
+---
+
+## Default VolcanoPlot
+An example of a default VolcanoPlot component without any extra properties.
+
+
+```python
+from jupyter_dash import JupyterDash
+
+import pandas as pd
+from dash.dependencies import Input, Output
+import dash_bio as dashbio
+from dash import html
+from dash import dcc
+
+app = JupyterDash(__name__)
+
+df = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
+    'volcano_data1.csv'
+)
+
+app.layout = html.Div([
+    'Effect sizes',
+    dcc.RangeSlider(
+        id='default-volcanoplot-input',
+        min=-3,
+        max=3,
+        step=0.05,
+        marks={i: {'label': str(i)} for i in range(-3, 3)},
+        value=[-0.5, 1]
+    ),
+    html.Br(),
+    html.Div(
+        dcc.Graph(
+            id='dashbio-default-volcanoplot',
+            figure=dashbio.VolcanoPlot(
+                dataframe=df
+            )
+        )
+    )
+])
+
+@app.callback(
+    Output('dashbio-default-volcanoplot', 'figure'),
+    Input('default-volcanoplot-input', 'value')
+)
+def update_volcanoplot(effects):
+    return dashbio.VolcanoPlot(
+        dataframe=df,
+        genomewideline_value=2.5,
+        effect_size_line=effects
+    )
+
+app.run_server(mode="inline")
+```
+
+## Point Sizes And Line Widths
+Change the size of the points on the scatter plot, and the widths of the effect lines and genome-wide line.
+
+
+```python
+from jupyter_dash import JupyterDash
+
+import pandas as pd
+from dash import dcc
+import dash_bio as dashbio
+
+app = JupyterDash(__name__)
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv')
+
+app.layout = dcc.Graph(figure=dashbio.VolcanoPlot(
+    dataframe=df,
+    point_size=10,
+    effect_size_line_width=4,
+    genomewideline_width=2
+))
+
+app.run_server(mode="inline")
+```
+
+```python
+from jupyter_dash import JupyterDash
+
+import pandas as pd
+from dash import dcc
+import dash_bio as dashbio
+
+app = JupyterDash(__name__)
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv')
+
+app.layout = dcc.Graph(figure=dashbio.VolcanoPlot(
+    dataframe=df,
+    point_size=10,
+    effect_size_line_width=4,
+    genomewideline_width=2
+))
+
+app.run_server(mode="inline")
+```
+
+## VolcanoPlot Properties
+> Access this documentation in your Python terminal with:
+> 
+> ```>>> help(dash_bio.VolcanoPlot)```
+> 
+> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
+
+**dataframe** (_dataframe_; required): A pandas dataframe which must contain at least the following two columns: - a numeric quantity to plot such as a p-value or zscore - a numeric quantity measuring the strength of association, typically an odds ratio, regression coefficient, or log fold change. Here, it is referred to as `effect_size`.
+
+**Additional keys** (misc.): Arbitrary arguments can be passed to modify the Layout and styling of the graph. A full reference of acceptable args is available [here](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Layout.html). Some commonly used layout keys are: - title (dict: optional): Dict with compatible properties for the title of the figure layout. - xaxis (dict: optional): Dict with compatible properties for the x-axis of the figure layout. - yaxis (dict: optional): Dict with compatible properties for the y-axis of the figure layout. - height (number; optional): Sets the plot's height (in px). - width (number; optional): Sets the plot's width (in px). - margin (dict | plotly.graph_objects.layout.Margin instance): A dict or Margin instance that sets the separation between the main plotting space and the outside of the figure. - legend (dict | plotly.graph_objects.layout.Legend instance): A dict or Legend instance with compatible properties.
+
+**annotation** (_string_; optional): A string denoting the column to use as annotations. This could be any annotation information that you want to include in the plot (e.g., zscore, effect size, minor allele frequency).
+
+**col** (_string_; optional): Color of the points of the Scatter plot. Can be in any color format accepted by plotly.graph_objects.
+
+**effect_size** (_string_; default `'EFFECTSIZE'`): A string denoting the column name for the effect size. This column must be numeric and must not contain missing nor NaN values.
+
+**effect_size_line** (_bool_ | list; default `[-1, 1]`): A boolean which must be either False to deactivate the option, or a list/array containing the upper and lower bounds of the effect size values. Significant data points will have lower values than the lower bound, or higher values than the higher bound. Keeping the default value will result in assigning the list [-1, 1] to the argument.
+
+**effect_size_line_color** (_string_; default `'grey'`): Color of the effect size lines.
+
+**effect_size_line_width** (_number_; default `2`): Width of the effect size lines.
+
+**gene** (_string_; default `GENE`): A string denoting the column name for the GENE names. More generally, this could be any annotation information that should be included in the plot.
+
+**genomewideline_value** (_bool_ | number; default `-log10(5e-8)`): A boolean which must be either False to deactivate the option, or a numerical value corresponding to the p-value above which the data points are considered significant.
+
+**genomewideline_color** (_string_; default `'red'`): Color of the genome-wide line. Can be in any color format accepted by plotly.graph_objects.
+
+**genomewideline_width** (_number_; default `1`): Width of the genome-wide line.
+
+**highlight** (_bool_; default `True`): Whether the data points considered significant should be highlighted or not.
+
+**highlight_color** (_string_; default `'red'`): Color of the data points highlighted because considered significant. Can be in any color format accepted by plotly.graph_objects. # ... Example 1: Random Volcano Plot ''' dataframe = pd.DataFrame( np.random.randint(0,100,size=(100, 2)), columns=['P', 'EFFECTSIZE']) fig = create_volcano(dataframe, title=dict(text='XYZ Volcano plot')) plotly.offline.plot(fig, image='png') '''
+
+**logp** (_bool_; default `True`): If True, the -log10 of the p-value is plotted. It isn't very useful to plot raw p-values; however, plotting the raw value could be useful for other genome-wide plots (e.g., peak heights, Bayes factors, test statistics, and other "scores").
+
+**p (_string_;** default `'P'`): A string denoting the column name for the float quantity to be plotted on the y-axis. This column must be numeric. It does not have to be a p-value. It can be any numeric quantity such as peak heights, Bayes factors, test statistics. If it is not a p-value, make sure to set logp = False.
+
+**point_size** (_number_; default `5`): Size of the points of the Scatter plot.
+
+**snp** (_string_; default `'SNP'`): A string denoting the column name for the SNP names (e.g., rs number). More generally, this column could be anything that identifies each point being plotted. For example, in an Epigenomewide association study (EWAS), this could be the probe name or cg number. This column should be a character. This argument is optional, however it is necessary to specify it if you want to highlight points on the plot using the highlight argument in the figure method.
+
+**xlabel** (_string_; optional): Label of the x axis.
+
+**ylabel** (_string_; default `'-log10(p)'`): Label of the y axis.
diff --git a/doc/requirements.txt b/doc/requirements.txt
index b207fc5a9e2..96eff0ac405 100644
--- a/doc/requirements.txt
+++ b/doc/requirements.txt
@@ -32,3 +32,6 @@ pooch
 wget
 nbconvert==5.6.1
 orjson
+dash_jupyter
+dash-bio
+dash
\ No newline at end of file

From 77638d0d4b2d570eca7cf1bdf6a19f98b47cf77b Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Sun, 3 Oct 2021 16:55:20 +0200
Subject: [PATCH 08/30] rebasing from correct branch

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30f70fd37d3..097b4e876dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [next] - ???
+
+### Added
+  - dash-bio posts in /doc/python/{alignment-chart.md,circos.md,clustergram.md,molecular-visualizations.md,volacano-plot.md}
+
 ## [5.3.1] - 2021-08-31
 
 ### Updated

From 6a1ee59841771e08c1771ae54978a1219c22411b Mon Sep 17 00:00:00 2001
From: olayway <ola@yway.pl>
Date: Sun, 3 Oct 2021 17:26:46 +0200
Subject: [PATCH 09/30] corrected jupyter-dash package name in requirements.txt

---
 doc/requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/requirements.txt b/doc/requirements.txt
index 96eff0ac405..a80aa1a26f7 100644
--- a/doc/requirements.txt
+++ b/doc/requirements.txt
@@ -32,6 +32,6 @@ pooch
 wget
 nbconvert==5.6.1
 orjson
-dash_jupyter
+jupyter-dash
 dash-bio
 dash
\ No newline at end of file

From f219ebb2812cdef029df259343baa39ee2ca3f06 Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 17:47:20 +0200
Subject: [PATCH 10/30] docs:bio:volcano: simplified examles, replaced
 jupyter-dash example with iframe

---
 .../{volacano-plot.md => bio-volcano-plot.md} | 86 ++++---------------
 1 file changed, 17 insertions(+), 69 deletions(-)
 rename doc/python/{volacano-plot.md => bio-volcano-plot.md} (80%)

diff --git a/doc/python/volacano-plot.md b/doc/python/bio-volcano-plot.md
similarity index 80%
rename from doc/python/volacano-plot.md
rename to doc/python/bio-volcano-plot.md
index 04dcd6d7e5b..5d8d0077de0 100644
--- a/doc/python/volacano-plot.md
+++ b/doc/python/bio-volcano-plot.md
@@ -1,5 +1,6 @@
 ---
 jupyter:
+  celltoolbar: Tags
   jupytext:
     notebook_metadata_filter: all
     text_representation:
@@ -20,9 +21,8 @@ jupyter:
     name: python
     nbconvert_exporter: python
     pygments_lexer: ipython3
-    version: 3.9.6
+    version: 3.9.7
   plotly:
-    # description:
     display_as: bio
     language: python
     layout: base
@@ -33,59 +33,23 @@ jupyter:
     thumbnail: thumbnail/volcano-plot.png
 ---
 
-## Default VolcanoPlot
+## VolcanoPlot
 An example of a default VolcanoPlot component without any extra properties.
 
 
 ```python
-from jupyter_dash import JupyterDash
-
 import pandas as pd
-from dash.dependencies import Input, Output
-import dash_bio as dashbio
-from dash import html
-from dash import dcc
+import dash_bio 
 
-app = JupyterDash(__name__)
 
 df = pd.read_csv(
     'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
     'volcano_data1.csv'
 )
 
-app.layout = html.Div([
-    'Effect sizes',
-    dcc.RangeSlider(
-        id='default-volcanoplot-input',
-        min=-3,
-        max=3,
-        step=0.05,
-        marks={i: {'label': str(i)} for i in range(-3, 3)},
-        value=[-0.5, 1]
-    ),
-    html.Br(),
-    html.Div(
-        dcc.Graph(
-            id='dashbio-default-volcanoplot',
-            figure=dashbio.VolcanoPlot(
-                dataframe=df
-            )
-        )
-    )
-])
-
-@app.callback(
-    Output('dashbio-default-volcanoplot', 'figure'),
-    Input('default-volcanoplot-input', 'value')
+dash_bio.VolcanoPlot(
+    dataframe=df,
 )
-def update_volcanoplot(effects):
-    return dashbio.VolcanoPlot(
-        dataframe=df,
-        genomewideline_value=2.5,
-        effect_size_line=effects
-    )
-
-app.run_server(mode="inline")
 ```
 
 ## Point Sizes And Line Widths
@@ -93,45 +57,25 @@ Change the size of the points on the scatter plot, and the widths of the effect
 
 
 ```python
-from jupyter_dash import JupyterDash
-
 import pandas as pd
-from dash import dcc
 import dash_bio as dashbio
 
-app = JupyterDash(__name__)
-
 df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv')
 
-app.layout = dcc.Graph(figure=dashbio.VolcanoPlot(
+dashbio.VolcanoPlot(
     dataframe=df,
     point_size=10,
     effect_size_line_width=4,
     genomewideline_width=2
-))
-
-app.run_server(mode="inline")
+)
 ```
 
-```python
-from jupyter_dash import JupyterDash
-
-import pandas as pd
-from dash import dcc
-import dash_bio as dashbio
-
-app = JupyterDash(__name__)
+## VolcanoPlot with Dash
 
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv')
-
-app.layout = dcc.Graph(figure=dashbio.VolcanoPlot(
-    dataframe=df,
-    point_size=10,
-    effect_size_line_width=4,
-    genomewideline_width=2
-))
-
-app.run_server(mode="inline")
+```python
+from IPython.display import IFrame
+snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
+IFrame(snippet_url + 'bio-volcano', width='100%', height=630)
 ```
 
 ## VolcanoPlot Properties
@@ -180,3 +124,7 @@ app.run_server(mode="inline")
 **xlabel** (_string_; optional): Label of the x axis.
 
 **ylabel** (_string_; default `'-log10(p)'`): Label of the y axis.
+
+```python
+
+```

From 93ed64a98e56123ad3068e8e5c83ab90b90111c6 Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 17:48:39 +0200
Subject: [PATCH 11/30] docs:bio: volcano - add `no_display=true` to iframe
 cell

---
 doc/python/bio-volcano-plot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/python/bio-volcano-plot.md b/doc/python/bio-volcano-plot.md
index 5d8d0077de0..50fcc18af29 100644
--- a/doc/python/bio-volcano-plot.md
+++ b/doc/python/bio-volcano-plot.md
@@ -72,7 +72,7 @@ dashbio.VolcanoPlot(
 
 ## VolcanoPlot with Dash
 
-```python
+```python no_display=true
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
 IFrame(snippet_url + 'bio-volcano', width='100%', height=630)

From a38ed992bfce0716a5a736190dd4145f73054007 Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:26:00 +0200
Subject: [PATCH 12/30] docs:bio: merged clustergram and circos files, replace
 jupyter-dash with iframe

---
 doc/python/bio-circos.md  | 115 ++++++++++++++++++
 doc/python/circos.md      | 225 ----------------------------------
 doc/python/clustergram.md | 248 --------------------------------------
 3 files changed, 115 insertions(+), 473 deletions(-)
 create mode 100644 doc/python/bio-circos.md
 delete mode 100644 doc/python/circos.md
 delete mode 100644 doc/python/clustergram.md

diff --git a/doc/python/bio-circos.md b/doc/python/bio-circos.md
new file mode 100644
index 00000000000..535981e1040
--- /dev/null
+++ b/doc/python/bio-circos.md
@@ -0,0 +1,115 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.7
+  plotly:
+    display_as: bio
+    language: python
+    layout: base
+    name: Clustergram
+    order: 1
+    page_type: u-guide
+    permalink: python/clustergram/
+    thumbnail: thumbnail/clustergram.png
+---
+
+## Default Clustergram
+An example of a default Clustergram component without any extra properties.
+
+
+```python
+import pandas as pd
+import dash_bio
+
+
+df = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Chromosomal/' +
+    'clustergram_brain_cancer.csv', 
+)
+
+dash_bio.Clustergram(
+    data=df,
+    column_labels=list(df.columns.values),
+    row_labels=list(df.index),
+    height=800,
+    width=700
+)
+```
+
+## Dendrogram Cluster Colors/Line Widths
+Change the colors of the dendrogram traces that are used to represent clusters, and configure their line widths.
+
+
+```python
+import pandas as pd
+import dash_bio
+
+df = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Chromosomal/' +
+    'clustergram_brain_cancer.csv', 
+)
+
+dash_bio.Clustergram(
+    data=df,
+    column_labels=list(df.columns.values),
+    row_labels=list(df.index),
+    height=800,
+    width=700,
+    color_list={
+        'row': ['#636EFA', '#00CC96', '#19D3F3'],
+        'col': ['#AB63FA', '#EF553B'],
+        'bg': '#506784'
+    },
+    line_width=2
+)
+```
+
+## Relative Dendrogram Size
+Change the relative width and height of, respectively, the row and column dendrograms compared to the width and height of the heatmap.
+
+
+```python
+import pandas as pd
+import dash_bio
+
+df = pd.read_csv(
+    'https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Chromosomal/' +
+    'clustergram_brain_cancer.csv', 
+)
+
+dash_bio.Clustergram(
+    data=df,
+    column_labels=list(df.columns.values),
+    row_labels=list(df.index),
+    height=800,
+    width=700,
+    display_ratio=[0.1, 0.7]
+)
+```
+
+## Circos with Dash
+
+```python
+from IPython.display import IFrame
+snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
+IFrame(snippet_url + 'bio-circos', width='100%', height=630)
+```
diff --git a/doc/python/circos.md b/doc/python/circos.md
deleted file mode 100644
index 769340f553a..00000000000
--- a/doc/python/circos.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-jupyter:
-  jupytext:
-    notebook_metadata_filter: all
-    text_representation:
-      extension: .md
-      format_name: markdown
-      format_version: '1.3'
-      jupytext_version: 1.13.0
-  kernelspec:
-    display_name: Python 3 (ipykernel)
-    language: python
-    name: python3
-  language_info:
-    codemirror_mode:
-      name: ipython
-      version: 3
-    file_extension: .py
-    mimetype: text/x-python
-    name: python
-    nbconvert_exporter: python
-    pygments_lexer: ipython3
-    version: 3.9.6
-  plotly:
-    # description:
-    display_as: bio
-    language: python
-    layout: base
-    name: Circos
-    order: 1
-    page_type: u-guide
-    permalink: python/circos/
-    thumbnail: thumbnail/circos.png
----
-
-## Default Circos
-An example of a default Circos component without any extra properties.
-
-```python
-from jupyter_dash import JupyterDash
-
-import json
-import urllib.request as urlreq
-from dash.dependencies import Input, Output, State
-import dash_bio as dashbio
-from dash import html
-from dash import dcc
-
-app = JupyterDash(__name__)
-
-data = urlreq.urlopen(
-    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
-    'circos_graph_data.json'
-).read()
-
-circos_graph_data = json.loads(data.decode('utf-8'))
-
-app.layout = html.Div([
-    dashbio.Circos(
-        id='my-dashbio-default-circos',
-        layout=circos_graph_data['GRCh37'],
-        selectEvent={"0": "hover", "1": "click", "2": "both"},
-        tracks=[{
-            'type': 'CHORDS',
-            'data': circos_graph_data['chords'],
-            'config': {
-                'tooltipContent': {
-                    'source': 'source',
-                    'sourceID': 'id',
-                    'target': 'target',
-                    'targetID': 'id',
-                    'targetEnd': 'end'
-                }
-            }
-        }]
-    ),
-    "Graph type:",
-    dcc.Dropdown(
-        id='histogram-chords-default-circos',
-        options=[
-            {'label': x, 'value': x}
-            for x in ['histogram', 'chords']
-        ],
-        value='chords'
-    ),
-    "Event data:",
-    html.Div(id='default-circos-output')
-])
-
-@app.callback(
-    Output('default-circos-output', 'children'),
-    Input('my-dashbio-default-circos', 'eventDatum')
-)
-def update_output(value):
-    if value is not None:
-        return [html.Div('{}: {}'.format(v.title(), value[v]))
-                for v in value.keys()]
-    return 'There are no event data. Click or hover on a data point to get more information.'
-
-@app.callback(
-    Output('my-dashbio-default-circos', 'tracks'),
-    Input('histogram-chords-default-circos', 'value'),
-    State('my-dashbio-default-circos', 'tracks')
-)
-def change_graph_type(value, current):
-    if value == 'histogram':
-        current[0].update(
-            data=circos_graph_data['histogram'],
-            type='HISTOGRAM'
-        )
-
-    elif value == 'chords':
-        current[0].update(
-            data=circos_graph_data['chords'],
-            type='CHORDS',
-            config={
-                'tooltipContent': {
-                    'source': 'source',
-                    'sourceID': 'id',
-                    'target': 'target',
-                    'targetID': 'id',
-                    'targetEnd': 'end'
-                }
-            }
-        )
-    return current
-
-app.run_server(mode="inline")
-```
-
-## Inner And Outer Radii
-Change the inner and outer radii of your Circos graph.
-
-
-```python
-from jupyter_dash import JupyterDash
-
-import json
-import urllib.request as urlreq
-import dash_bio as dashbio
-
-data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/circos_graph_data.json').read()
-circos_graph_data = json.loads(data)
-app = JupyterDash(__name__)
-
-app.layout = dashbio.Circos(
-    layout=circos_graph_data['GRCh37'],
-    tracks=[{
-        'type': 'CHORDS',
-        'data': circos_graph_data['chords']
-    }],
-    config={
-        'innerRadius': 40,
-        'outerRadius': 200
-    }
-)
-
-app.run_server(mode="inline")
-```
-
-
-## Circos Properties
-
-
-> Access this documentation in your Python terminal with:
-> ```
-> >>> help(dash_bio.Circos)
-> ```
-> Our recommended IDE for writing Dash apps is Dash Enterprise's
-> **[Data Science Workspaces](https://plotly.com/dash/workspaces)**,
-> which has typeahead support for Dash Component Properties.
-> **[Find out if your company is using
-> Dash Enterprise](https://go.plotly.com/company-lookup)**.
-
-
-**id** (_string_; optional): The ID of the component to be used in Dash callbacks.
-
-**config** (_dict_; optional): Configuration of overall layout of the graph.
-
-**enableDownloadSVG** (_boolean_; optional): Allow for an SVG snapshot of the Circos graph to be downloaded.
-
-**enableZoomPan** (_boolean_; optional): Allow for zooming and panning the Circos graph.
-
-**eventDatum** (_dict_; optional): A Dash prop that returns data on clicking or hovering of the tracks. Depending on what is specified for prop "selectEvent".
-
-**layout** (_list_ of dicts; required): The overall layout of the Circos graph, provided as a list of dictionaries.
-
-```layout``` is a list of dicts with keys:
-- **color** (_string_; required): The color of the block.
-- **id** (_string_; required): The id of the block, where it will recieve data from the specified "track" id.
-- **label** (_string_; required): The labels of the block.
-- **len** (_number_; required): The length of the block.
-
-**selectEvent** (_dict_; optional): A dictionary used to choose whether tracks should return data on click, hover, or both, with the dash prop "eventDatum". The keys of the dictionary represent the index of the list specified for "tracks". Ex: selectEvent={ "0": "hover", "1": "click", "2": "both" },.
-
-**size** (_number_; default `800`): The overall size of the SVG container holding the graph. Set on initilization and unchangeable thereafter.
-
-**style** (_dict_; optional): The CSS styling of the div wrapping the component.
-
-**tracks** (_list_ of dicts; optional): Tracks that specify specific layouts. For a complete list of tracks and usage, please check the docs.
-
-```tracks``` is a list of dicts with keys:
-- **color** (_dict_; optional): Specify which dictonary key to grab color values from, in the passed in dataset. This can be a string or an object. If using a string, you can specify hex, RGB, and colors from d3 scale chromatic (Ex: RdYlBu). The key "name" is required for this dictionary, where the input for "name" points to some list of dictionaries color values. Ex: "color": {"name": "some key that refers to color in a data set"}.
-
-    ```color``` is a string
-
-    Or dict with keys:
-    - **name** (_string_; required)<br><br>
-
-- **config** (_dict_; optional): The layout of the tracks, where the user can configure innerRadius, outterRadius, ticks, labels, and more.
-- **data** (_list_; required): The data that makes up the track. It can be a Json object.
-- **id** (_string_; optional): The id of a specific piece of track data.
-- **tooltipContent** (_dict_; optional): Specify what data for tooltipContent is displayed. The entry for the "name" key, is any of the keys used in the data loaded into tracks. Ex: "tooltipContent": {"name": "block_id"}, To display all data in the dataset use "all" as the entry for the key "name". Ex: "tooltipContent": {"name": "all"} Ex: This will return (source) + ' > ' + (target) + ': ' + (targetEnd)'. "tooltipContent": { "source": "block_id", "target": "position", "targetEnd": "value" }, Ex: This will return (source)(sourceID) + ' > ' + (target)(targetID) + ': ' (target)(targetEnd)'. "tooltipContent": { "source": "source", "sourceID": "id", "target": "target", "targetID": "id", "targetEnd": "end" }.
-
-    ```tooltipContent``` is a _string_
-    
-    Or dict with keys:
-    - **name** (_string_; required)
-    - **source** (_string_; required)
-    - **sourceID** (_string_; optional)
-    - **target** (_string_; required)
-    - **targetEnd** (string; required)
-    - **targetID** (string; optional) <br><br>
-
-- **type** (a _value equal to: 'CHORDS', 'HEATMAP', 'HIGHLIGHT', 'HISTOGRAM', 'LINE', 'SCATTER', 'STACK', 'TEXT'_; optional): Specify the type of track this is. Please check the docs for a list of tracks you can use, and ensure the name is typed in all capitals.
diff --git a/doc/python/clustergram.md b/doc/python/clustergram.md
deleted file mode 100644
index 18b00e1173e..00000000000
--- a/doc/python/clustergram.md
+++ /dev/null
@@ -1,248 +0,0 @@
----
-jupyter:
-  jupytext:
-    notebook_metadata_filter: all
-    text_representation:
-      extension: .md
-      format_name: markdown
-      format_version: '1.3'
-      jupytext_version: 1.13.0
-  kernelspec:
-    display_name: Python 3 (ipykernel)
-    language: python
-    name: python3
-  language_info:
-    codemirror_mode:
-      name: ipython
-      version: 3
-    file_extension: .py
-    mimetype: text/x-python
-    name: python
-    nbconvert_exporter: python
-    pygments_lexer: ipython3
-    version: 3.9.6
-  plotly:
-    # description:
-    display_as: bio
-    language: python
-    layout: base
-    name: Clustergram
-    order: 1
-    page_type: u-guide
-    permalink: python/clustergram/
-    thumbnail: thumbnail/clustergram.png
----
-
-## Default Clustergram
-An example of a default Clustergram component without any extra properties.
-
-
-```python
-from jupyter_dash import JupyterDash
-
-import pandas as pd
-from dash.dependencies import Input, Output
-import dash_bio as dashbio
-from dash import html
-from dash import dcc
-
-app = JupyterDash(__name__)
-
-df = pd.read_csv(
-    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
-    'clustergram_mtcars.tsv',
-    sep='	', skiprows=4
-).set_index('model')
-
-columns = list(df.columns.values)
-rows = list(df.index)
-
-app.layout = html.Div([
-    "Rows to display",
-    dcc.Dropdown(
-        id='my-default-clustergram-input',
-        options=[
-            {'label': row, 'value': row} for row in list(df.index)
-        ],
-        value=rows[:10],
-        multi=True
-    ),
-
-    html.Div(id='my-default-clustergram')
-])
-
-@app.callback(
-    Output('my-default-clustergram', 'children'),
-    Input('my-default-clustergram-input', 'value')
-)
-def update_clustergram(rows):
-    if len(rows) < 2:
-        return "Please select at least two rows to display."
-
-    return dcc.Graph(figure=dashbio.Clustergram(
-        data=df.loc[rows].values,
-        column_labels=columns,
-        row_labels=rows,
-        color_threshold={
-            'row': 250,
-            'col': 700
-        },
-        hidden_labels='row',
-        height=800,
-        width=700
-    ))
-
-app.run_server()
-```
-
-## Dendrogram Cluster Colors/Line Widths
-Change the colors of the dendrogram traces that are used to represent clusters, and configure their line widths.
-
-
-```python
-from jupyter_dash import JupyterDash
-import dash_core_components as dcc
-import dash_bio as dashbio
-import pandas as pd
-
-app = JupyterDash(__name__)
-
-
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/clustergram_mtcars.tsv',
-                 sep='	', skiprows=4).set_index('model')
-
-columns = list(df.columns.values)
-rows = list(df.index)
-
-app.layout = dcc.Graph(
-    figure=dashbio.Clustergram(
-        data=df.loc[rows].values,
-        row_labels=rows,
-        column_labels=columns,
-        color_threshold={
-            'row': 250,
-            'col': 700
-        },
-        height=800,
-        width=700,
-        color_list={
-            'row': ['#636EFA', '#00CC96', '#19D3F3'],
-            'col': ['#AB63FA', '#EF553B'],
-            'bg': '#506784'
-        },
-        line_width=2
-))
-
-app.run_server(mode="inline")
-```
-
-## Relative Dendrogram Size
-Change the relative width and height of, respectively, the row and column dendrograms compared to the width and height of the heatmap.
-
-
-```python
-from jupyter_dash import JupyterDash
-import pandas as pd
-from dash import dcc
-import dash_bio as dashbio
-
-
-app = JupyterDash(__name__)
-
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/clustergram_mtcars.tsv',
-                 sep='	', skiprows=4).set_index('model')
-
-columns = list(df.columns.values)
-rows = list(df.index)
-
-clustergram = 
-
-app.layout = dcc.Graph(
-    figure=dashbio.Clustergram(
-        data=df.loc[rows].values,
-        row_labels=rows,
-        column_labels=columns,
-        color_threshold={
-            'row': 250,
-            'col': 700
-        },
-        height=800,
-        width=700,
-        display_ratio=[0.1, 0.7]
-))
-
-app.run_server(mode="inline")
-```
-
-## Clustergram Properties
-> Access this documentation in your Python terminal with:
->
-> ```>>> help(dash_bio.Clustergram)```
-> 
-> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
-
-**data** (_2D array-like_; required): Matrix or table of observations (dropping columns of non-numeric dtype).
-
-**annotation_font** (_dict_; optional): The font options for annotations, as specified in the Plotly graph_objects documentation (see: https://plotly.cp,/python/reference/#layout-scene-annotations-items-annotation-font).
-
-**computed_traces** (_dict_; optional): The dendrogram traces from another (precomputed) Clustergram component.
-
-**column_labels** (_list_; optional): List of column category labels (observation labels).
-
-**cluster** (_string_; default `'all'`): The dimension along which the data will be clustered: 'row', 'column', or 'all'; 'all' means data will be clustered along columns, then clustered along rows of column-clustered data.
-
-**col_dist** (_string_; default `'euclidean'`): Distance metric for columns. Passed as argument `metric` to the function specified in `dist_fun` when called for clustering along columns.
-
-**color_threshold** (_dict_; default `{'row': 0, 'col': 0}`): Maximum linkage value for which unique colors are assigned to clusters; 'row' for rows, and 'col' for columns.
-
-**color_map** (_list_; default `[[0.0, 'rgb(255,0,0)'], [0.5, 'rgb(0,0,0)'], [1.0, 'rgb(0,255,0)']]`): Colorscale for the heatmap. Top-level elements contain two elements, the first of which refers to the percentile rank, and the second to the applied color. For instance, [[0.0, 'white'], [0.5, 'gray'], [1.0, 'black']] means that cells in the 49th percentile would be white; cells at the 50th or higher percentiles, excluding the 100th percentile, would be gray; and the cell(s) at the 100th percentile would be black.
-
-**color_list** (_dict_; optional): The list of colors to use for different clusters in the dendrogram that have a root under the threshold for each dimension. If there are fewer colors than there are clusters along a specific dimension, the colors of the clusters will cycle through the colors specified in the list. The keys are: 'row' (for row clusters), 'col' (for column clusters), and 'bg' (for all traces above the clustering threshold for both row and column).
-
-**center_values** (_bool_; default `True`): Whether or not to center the values of the heatmap about zero.
-
-**col_group_marker** (_list_; optional): A list containing the annotations for column clusters in the dendrogram. Each annotation is a dictionary with the keys 'group_number' (the cluster number to highlight), 'annotation' (a string containing the text of the annotation), and 'color' (a string representation of the color of the annotation).
-
-**dist_fun** (_function_; default `scipy.spatial.distance.pdist`): Function to compute the pairwise distance from the observations (see docs for scipy.spatial.distance.pdist).
-
-**display_range** (_double_; default `3.0`): In the heatmap, standardized values from the dataset that are below the negative of this value will be colored with one shade, and the values that are above this value will be colored with another.
-
-**display_ratio** (_list_ | number; default `0.2`): The dendrograms' heights with respect to the size of the heatmap; with one element, both the row and column dendrograms have the same ratio; with two, the row dendrogram ratio corresponds to the first element of the list and the column dendrogram ratio corresponds to the second element of the list.
-
-**generate_curves_dict** (_bool_; default `False`): Whether or not to return a dictionary containing information about the cluster number associated with each curve number in the graph. (May be useful for capturing the cluster number that is clicked.)
-
-**hidden_labels** (_list_; optional): List containing strings 'row' and/or 'col' if row and/or column labels should be hidden on the final plot.
-
-**height** (_number_; default `500`): The height of the graph, in px.
-
-**imputer_parameters** (_dict_; optional): Specifies the parameters 'missing_values' and 'strategy' of the SimpleImputer class from scikit-learn 0.20.1 (both of these parameters must be keys in the dictionary). An additional parameter, 'axis', is used to specify the direction along which to impute (a parameter of Imputer, which was deprecated in scikit-learn 0.20.0): 'axis=0' indicates that imputing should happen along columns, while 'axis=1' indicates that it should happen along rows (see: https://scikit-learn.org/stable/modules/generated/sklearn.preprocessing.Imputer.html).
-
-**link_fun** (_function_; default `scipy.cluster.hierarchy.linkage`): Function to compute the linkage matrix from the pairwise distances (see docs for scipy.cluster.hierarchy.linkage).
-
-**log_transform** (_bool_; default `False`): Whether or not to transform the data by taking the base-two logarithm of all values in the dataset.
-
-**line_width** (_list_ | number; default `0.5`): The line width for the dendrograms. If in list format, the first element corresponds to the width of the row dendrogram traces, and the second corresponds to the width of the column dendrogram traces.
-
-**optimal_leaf_order** (_bool_; default `False`): Whether to enable (True) or disable (False) the option to determine leaf order that maximizes similarity between neighboring leaves.
-
-**paper_bg_color** (_string_; default `rgba(0,0,0,0)`): The background color of the paper on the graph.
-
-**plot_bg_color** (_string_; default `rgba(0,0,0,0)`): The background color of the subplots on the graph.
-
-**return_computed_traces** (_bool_; default `False`): Whether or not to return the precomputed dendrogram traces. (May be useful if one wishes to add, e.g., group markers to the figure without recalculating the clustering in the entire figure.)
-
-**row_labels** (_list_; optional): Listm of row category labels (observation labels).
-
-**row_dist** (_string_; default `'euclidean'`): Distance metric for rows. Passed as argument `metric` to the function specified in `dist_fun` when called for clustering along rows.
-
-**row_group_marker** (_list_; optional): A list containing the annotations for row clusters in the dendrogram. Each annotation is a dictionary with the keys 'group_number' (the cluster number to highlight), 'annotation' (a string containing the text of the annotation), and 'color' (a string representation of the color of the annotation).
-
-**standardize** (_string_; default `'none'`): The dimension for standardizing values, so that the mean is 0 and the standard deviation is 1, along the specified dimension: 'row', 'column', or 'none'.
-
-**tick_font** (_dict_; optional): The font options for ticks, as specified in the Plotly graph_objects documentation (see: https://plotly.com/python/reference/#bar-marker-colorbar-tickfont).
-
-**width** (_number_; default `500`): The width of the graph, in px.
-
-```python
-
-```

From f4ff86749bf269656d860f8fd9a5902ddb8336ee Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:28:28 +0200
Subject: [PATCH 13/30] docs:bio: remove molecular-visualizations

---
 doc/python/molecular-visualizations.md | 200 -------------------------
 1 file changed, 200 deletions(-)
 delete mode 100644 doc/python/molecular-visualizations.md

diff --git a/doc/python/molecular-visualizations.md b/doc/python/molecular-visualizations.md
deleted file mode 100644
index 93e986ff796..00000000000
--- a/doc/python/molecular-visualizations.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-jupyter:
-  jupytext:
-    notebook_metadata_filter: all
-    text_representation:
-      extension: .md
-      format_name: markdown
-      format_version: '1.3'
-      jupytext_version: 1.13.0
-  kernelspec:
-    display_name: Python 3 (ipykernel)
-    language: python
-    name: python3
-  language_info:
-    codemirror_mode:
-      name: ipython
-      version: 3
-    file_extension: .py
-    mimetype: text/x-python
-    name: python
-    nbconvert_exporter: python
-    pygments_lexer: ipython3
-    version: 3.9.6
-  plotly:
-    # description:
-    display_as: bio
-    language: python
-    layout: base
-    name: Molecular visualizations
-    order: 1
-    page_type: u-guide
-    permalink: python/molecular-visualizations/
-    thumbnail: thumbnail/molecular_visualizations.png
----
-
-## Molecular Visualizations
-
-
-### Default Molecule3dViewer
-An example of a default Molecule3dViewer component without any extra properties.
-
-```python
-import json
-import urllib.request as urlreq
-
-import dash_bio as dashbio
-from jupyter_dash import JupyterDash
-
-app = JupyterDash(__name__)
-
-model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/model_data.js').read()
-styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/styles_data.js').read()
-
-model_data = json.loads(model_data)
-styles_data = json.loads(styles_data)
-
-app.layout = dashbio.Molecule3dViewer(
-    styles=styles_data,
-    modelData=model_data,
-    backgroundOpacity=0.2
-)
-
-app.run_server(mode="inline")
-```
-
-### Labels
-Add labels corresponding to the atom of the molecule. Label styles can be set with additional parameters. For styling keys, see.
-
-```python
-import json
-import urllib.request as urlreq
-
-import dash_bio as dashbio
-from jupyter_dash import JupyterDash
-
-app = JupyterDash(__name__)
-
-model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/model_data.js').read()
-styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/styles_data.js').read()
-
-model_data = json.loads(model_data)
-styles_data = json.loads(styles_data)
-
-app.layout = dashbio.Molecule3dViewer(
-    styles=styles_data,
-    modelData=model_data,
-    labels=[
-        {'text': 'Residue Name: GLY1', 'fontColor': 'red', 'font': 'Courier New, monospace'},
-        {'text': 'Residue Chain: A', 'position': {'x': 15.407, 'y': -8.432, 'z': 6.573}}
-    ],
-)
-
-app.run_server(mode="inline")
-```
-
-### Isosurfaces
-Render a 3D isosurface. Volumetric orbital data must be provided in the cube file format.
-
-```python
-import json
-import urllib.request as urlreq
-
-import dash_bio as dashbio
-from jupyter_dash import JupyterDash
-
-app = JupyterDash(__name__)
-
-model_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene_model_data.js').read()
-styles_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene_style_data.js').read()
-
-cube_data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/mol3d/benzene-homo.cube').read().decode('utf-8')
-
-model_data = json.loads(model_data)
-styles_data = json.loads(styles_data)
-
-app.layout = dashbio.Molecule3dViewer(
-    styles=styles_data,
-    modelData=model_data,
-    selectionType='atom',
-    orbital={
-        'cube_file': cube_data,
-        'iso_val': 0.1,
-        'opacity': 1.0,
-        'positiveVolumetricColor': 'red',
-        'negativeVolumetricColor': 'blue',
-    }
-)
-
-app.run_server(mode="inline")
-```
-
-### Molecule3dViewer Properties
-
-
-> Access this documentation in your Python terminal with:
-> ```
-> >>> help(dash_bio.Molecule3dViewer)
-> ```
-> Our recommended IDE for writing Dash apps is Dash Enterprise's
-> **[Data Science Workspaces](https://plotly.com/dash/workspaces)**,
-> which has typeahead support for Dash Component Properties.
-> **[Find out if your company is using
-> Dash Enterprise](https://go.plotly.com/company-lookup)**.
-
-
-**id** (_string_; optional): The ID used to identify this component in callbacks.
-
-**atomLabelsShown** (_boolean_; optional): Property to either show or hide labels.
-
-**backgroundColor** (_string_; default ```'#FFFFFF'```): Property to change the background color of the molecule viewer.
-
-**backgroundOpacity** (_number_; default ```0```): Property to change the background opacity - ranges from 0 to 1.
-
-**labels** (_list_ of dicts; optional): Labels corresponding to the atoms of the molecule. Each label has a ```text``` field, a string containing the label content, and can have many other styling fields as described in **https://3dmol.csb.pitt.edu/doc/types.html#LabelSpec**.
-
-**modelData** (_dict_; optional): The data that will be used to display the molecule in 3D The data will be in JSON format and should have two main dictionaries - atoms, bonds.
-
-```modelData``` is a dict with keys:
-- **atoms** (_list_; optional)
-- **bonds** (_list_; optional)
-
-**orbital** (_dict_; optional): Add an isosurface from volumetric data provided in the ```cube_file```.
-
-```orbital``` is a dict with keys:
-- **cube_file** (_string_; optional): The filepath containing raw volumetric data for vertex coloring.
-- **iso_val** (_number_; optional): The isovalue to draw the surface at.
-- **negativeVolumetricColor** (_string_; optional): Color for the negative value of the isosurface orbital.
-- **opacity** (_number_; optional): Transparency of the surface, between 0 and 1.
-- **positiveVolumetricColor** (_string_; optional): Color for the positive value of the isosurface orbital.
-
-**selectedAtomIds** (_list_; optional): Property that stores a list of all selected atoms.
-
-**selectionType** (_a value equal to: 'atom', 'residue', 'chain'_; default ```'atom'```): The selection type - may be atom, residue or chain.
-
-**shapes** (_list of dicts_; optional): Add a predefined renderable shape objects to the molecule. Valid shape types are Arrow, Sphere, and Cylinder.
-
-**styles** (_list of dicts_; optional): Property that can be used to change the representation of the molecule. Options include sticks, cartoon and sphere.
-
-```styles``` is a list of dicts with keys:
-- **color** (_string_; optional)
-- **visualization_type** (_a value equal to: 'cartoon', 'sphere', 'stick'_; optional)
-
-**zoom** (_dict_; default ```{ factor: 0.8, animationDuration: 0, fixedPath: False,}```): Zoom the current view by a constant factor, with optional parameters to modify the duration and motion of the zoom animation.
-
-```zoom``` is a dict with keys:
-- **animationDuration** (_number_; optional): An optional parameter that denotes the duration of a zoom animation, in milliseconds.
-- **factor** (_number_; optional): Magnification factor. Values greater than 1 will zoom, in, less than one will zoom out. Default 2.
-- **fixedPath** (_boolean_; optional): If True, animation is constrained to requested motion, overriding updates that happen during the animation.
-
-**zoomTo** (_dict_; default ```{ sel: {}, animationDuration: 0, fixedPath: False,}```): Zoom to center of atom selection.
-
-```zoomTo``` is a dict with keys:
-- **animationDuration** (_number_; optional): An optional parameter that denotes the duration of a zoom animation , in milliseconds.
-- **fixedPath** (_boolean_; optional): If True, animation is constrained to requested motion, overriding updates that happen during the animation.
-- **sel** (_dict_; optional): Selection specification specifying model and atom properties to select. Default: all atoms in viewer.<br>
-  ```sel``` is a dict with keys:
-    - **chain** (_string_; optional): Chain that the residue is located on.
-    - **resi** (_number_; optional): The index value used to identify the residue; residues are numbered sequentially starting from 1.
-
-

From f78857be92c4be66a8e8cc5bb5460f050500e6c8 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:39:33 +0200
Subject: [PATCH 14/30] docs:bio: drop documentation for volcanoplot

---
 doc/python/bio-volcano-plot.md | 51 ----------------------------------
 1 file changed, 51 deletions(-)

diff --git a/doc/python/bio-volcano-plot.md b/doc/python/bio-volcano-plot.md
index 50fcc18af29..1090f688e39 100644
--- a/doc/python/bio-volcano-plot.md
+++ b/doc/python/bio-volcano-plot.md
@@ -77,54 +77,3 @@ from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
 IFrame(snippet_url + 'bio-volcano', width='100%', height=630)
 ```
-
-## VolcanoPlot Properties
-> Access this documentation in your Python terminal with:
-> 
-> ```>>> help(dash_bio.VolcanoPlot)```
-> 
-> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
-
-**dataframe** (_dataframe_; required): A pandas dataframe which must contain at least the following two columns: - a numeric quantity to plot such as a p-value or zscore - a numeric quantity measuring the strength of association, typically an odds ratio, regression coefficient, or log fold change. Here, it is referred to as `effect_size`.
-
-**Additional keys** (misc.): Arbitrary arguments can be passed to modify the Layout and styling of the graph. A full reference of acceptable args is available [here](https://plotly.com/python-api-reference/generated/plotly.graph_objects.Layout.html). Some commonly used layout keys are: - title (dict: optional): Dict with compatible properties for the title of the figure layout. - xaxis (dict: optional): Dict with compatible properties for the x-axis of the figure layout. - yaxis (dict: optional): Dict with compatible properties for the y-axis of the figure layout. - height (number; optional): Sets the plot's height (in px). - width (number; optional): Sets the plot's width (in px). - margin (dict | plotly.graph_objects.layout.Margin instance): A dict or Margin instance that sets the separation between the main plotting space and the outside of the figure. - legend (dict | plotly.graph_objects.layout.Legend instance): A dict or Legend instance with compatible properties.
-
-**annotation** (_string_; optional): A string denoting the column to use as annotations. This could be any annotation information that you want to include in the plot (e.g., zscore, effect size, minor allele frequency).
-
-**col** (_string_; optional): Color of the points of the Scatter plot. Can be in any color format accepted by plotly.graph_objects.
-
-**effect_size** (_string_; default `'EFFECTSIZE'`): A string denoting the column name for the effect size. This column must be numeric and must not contain missing nor NaN values.
-
-**effect_size_line** (_bool_ | list; default `[-1, 1]`): A boolean which must be either False to deactivate the option, or a list/array containing the upper and lower bounds of the effect size values. Significant data points will have lower values than the lower bound, or higher values than the higher bound. Keeping the default value will result in assigning the list [-1, 1] to the argument.
-
-**effect_size_line_color** (_string_; default `'grey'`): Color of the effect size lines.
-
-**effect_size_line_width** (_number_; default `2`): Width of the effect size lines.
-
-**gene** (_string_; default `GENE`): A string denoting the column name for the GENE names. More generally, this could be any annotation information that should be included in the plot.
-
-**genomewideline_value** (_bool_ | number; default `-log10(5e-8)`): A boolean which must be either False to deactivate the option, or a numerical value corresponding to the p-value above which the data points are considered significant.
-
-**genomewideline_color** (_string_; default `'red'`): Color of the genome-wide line. Can be in any color format accepted by plotly.graph_objects.
-
-**genomewideline_width** (_number_; default `1`): Width of the genome-wide line.
-
-**highlight** (_bool_; default `True`): Whether the data points considered significant should be highlighted or not.
-
-**highlight_color** (_string_; default `'red'`): Color of the data points highlighted because considered significant. Can be in any color format accepted by plotly.graph_objects. # ... Example 1: Random Volcano Plot ''' dataframe = pd.DataFrame( np.random.randint(0,100,size=(100, 2)), columns=['P', 'EFFECTSIZE']) fig = create_volcano(dataframe, title=dict(text='XYZ Volcano plot')) plotly.offline.plot(fig, image='png') '''
-
-**logp** (_bool_; default `True`): If True, the -log10 of the p-value is plotted. It isn't very useful to plot raw p-values; however, plotting the raw value could be useful for other genome-wide plots (e.g., peak heights, Bayes factors, test statistics, and other "scores").
-
-**p (_string_;** default `'P'`): A string denoting the column name for the float quantity to be plotted on the y-axis. This column must be numeric. It does not have to be a p-value. It can be any numeric quantity such as peak heights, Bayes factors, test statistics. If it is not a p-value, make sure to set logp = False.
-
-**point_size** (_number_; default `5`): Size of the points of the Scatter plot.
-
-**snp** (_string_; default `'SNP'`): A string denoting the column name for the SNP names (e.g., rs number). More generally, this column could be anything that identifies each point being plotted. For example, in an Epigenomewide association study (EWAS), this could be the probe name or cg number. This column should be a character. This argument is optional, however it is necessary to specify it if you want to highlight points on the plot using the highlight argument in the figure method.
-
-**xlabel** (_string_; optional): Label of the x axis.
-
-**ylabel** (_string_; default `'-log10(p)'`): Label of the y axis.
-
-```python
-
-```

From 80e9f357fee623e07475c4a2b7922812b39adda3 Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:48:58 +0200
Subject: [PATCH 15/30] docs:bio: add manhattanplot documentation

---
 doc/python/bio-manhattanplot.md | 76 +++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 doc/python/bio-manhattanplot.md

diff --git a/doc/python/bio-manhattanplot.md b/doc/python/bio-manhattanplot.md
new file mode 100644
index 00000000000..fb0fd92e3c7
--- /dev/null
+++ b/doc/python/bio-manhattanplot.md
@@ -0,0 +1,76 @@
+---
+jupyter:
+  celltoolbar: Tags
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.7
+  plotly:
+    display_as: bio
+    language: python
+    layout: base
+    name: Volcano plot
+    order: 1
+    page_type: u-guide
+    permalink: python/volcano-plot/
+    thumbnail: thumbnail/volcano-plot.png
+---
+
+## Manhattan Plot
+
+An example of a default ManhattanPlot component without any extra properties.
+
+```python
+import pandas as pd
+import dash_bio as dashbio
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/manhattan_data.csv')
+
+
+dashbio.ManhattanPlot(
+    dataframe=df,
+)
+```
+
+## Highlighted points color, and colors of the suggestive line and the genome-wide line.
+Change the color of the points that are considered significant.
+
+```python
+import pandas as pd
+import dash_bio as dashbio
+
+
+df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/manhattan_data.csv')
+
+dashbio.ManhattanPlot(
+    dataframe=df,
+    highlight_color='#00FFAA',
+    suggestiveline_color='#AA00AA',
+    genomewideline_color='#AA5500'
+)
+```
+
+## ManhattanPlot with Dash
+
+```python no_display=true
+from IPython.display import IFrame
+snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
+IFrame(snippet_url + 'bio-manhattanplot', width='100%', height=630)
+```

From 5ed742df5efa3798aac3a86dbe3e438a81d9b5db Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:49:23 +0200
Subject: [PATCH 16/30] docs:bio: renamed file with alignmentchat docs

---
 doc/python/alignment-chart.md     | 170 ------------------------------
 doc/python/bio-alignment-chart.md |  94 +++++++++++++++++
 2 files changed, 94 insertions(+), 170 deletions(-)
 delete mode 100644 doc/python/alignment-chart.md
 create mode 100644 doc/python/bio-alignment-chart.md

diff --git a/doc/python/alignment-chart.md b/doc/python/alignment-chart.md
deleted file mode 100644
index 8690fc1ab49..00000000000
--- a/doc/python/alignment-chart.md
+++ /dev/null
@@ -1,170 +0,0 @@
----
-jupyter:
-  jupytext:
-    notebook_metadata_filter: all
-    text_representation:
-      extension: .md
-      format_name: markdown
-      format_version: '1.3'
-      jupytext_version: 1.13.0
-  kernelspec:
-    display_name: Python 3 (ipykernel)
-    language: python
-    name: python3
-  language_info:
-    codemirror_mode:
-      name: ipython
-      version: 3
-    file_extension: .py
-    mimetype: text/x-python
-    name: python
-    nbconvert_exporter: python
-    pygments_lexer: ipython3
-    version: 3.9.6
-  plotly:
-    # description:
-    display_as: bio
-    language: python
-    layout: base
-    name: Alignment Chart
-    order: 1
-    page_type: u-guide
-    permalink: python/alignment-chart/
-    thumbnail: thumbnail/alignment-chart.png
----
-
-## Default AlignmentChart
-An example of a default AlignmentChart component without any extra properties
-
-```python
-import urllib.request as urlreq
-
-from jupyter_dash import JupyterDash
-import dash_bio as dashbio
-
-app = JupyterDash(__name__)
-
-data = urlreq.urlopen(
-    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
-    'alignment_viewer_p53.fasta'
-).read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    id='my-default-alignment-viewer',
-    data=data
-)
-
-app.run_server(mode="inline")
-```
-
-## Consensus Sequence
-Toggle the display of the consensus sequence at the bottom of the heatmap.
-
-```python
-import urllib.request as urlreq
-
-import dash_bio as dashbio
-from jupyter_dash import JupyterDash
-
-app = JupyterDash(__name__)
-
-data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    data=data,
-    showconsensus=False
-)
-
-app.run_server(mode="inline")
-```
-
-## Tile Size
-Change the height and/or width of the tiles.
-
-
-```python
-import urllib.request as urlreq
-import dash_bio as dashbio
-
-data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    data=data,
-    tilewidth=50
-)
-    
-app.run_server(mode="inline")
-```
-
-## AlignmentChart Properties
-> Access this documentation in your Python terminal with:
-> 
-> ```>>> help(dash_bio.AlignmentChart)```
-> 
-> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.
-
-**id** (_string_; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
-
-**colorscale** (_string_ | _dict_; default `'clustal2'`): Colorscale in 'buried', 'cinema', 'clustal', 'clustal2', 'helix', 'hydrophobicity' 'lesk', 'mae', 'nucleotide', 'purine', 'strand', 'taylor', 'turn', 'zappo', or your own colorscale as a {'nucleotide': COLOR} dict. Note that this is NOT a standard plotly colorscale.
-
-**conservationcolor** (_string_; optional): Color of the conservation secondary barplot, in common name, hex, rgb or rgba format.
-
-**conservationcolorscale** (_string_ | _list_; default `'Viridis'`): Colorscale of the conservation barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.
-
-**conservationmethod** (_a value equal to: 'conservation', 'entropy'_; default `'entropy'`): Whether to use most conserved ratio (MLE) 'conservation' or normalized entropy 'entropy' to determine conservation, which is a value between 0 and 1 where 1 is most conserved.
-
-**conservationopacity** (_number_ | _string_; optional): Opacity of the conservation secondary barplot as a value between 0 and 1.
-
-**correctgap** (_boolean_; default `True`): Whether to normalize the conservation barchart By multiplying it elementwise with the gap barchart, as to lower the conservation values across sequences regions with many gaps.
-
-**data** (_string_; optional): Input data, either in FASTA or Clustal format.
-
-**eventDatum** (_string_; optional): A Dash prop that returns data on clicking, hovering or resizing the viewer.
-
-**extension** (_string_; default `'fasta'`): Format type of the input data, either in FASTA or Clustal.
-
-**gapcolor** (_string_; default `'grey'`): Color of the gap secondary barplot, in common name, hex, rgb or rgba format.
-
-**gapcolorscale** (_string_ | _list_; optional): Colorscale of the gap barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.
-
-**gapopacity** (_number_ | _string_; optional): Opacity of the gap secondary barplot as a value between 0 and 1.
-
-**groupbars** (_boolean_; default `False`): If both conservation and gap are enabled, toggles whether to group bars or to stack them as separate subplots. No effect if not both gap and conservation are shown.
-
-**height** (_number_ | _string_; default `900`): Width of the Viewer. Property takes precedence over tilesheight if both are set.
-
-**numtiles** (_number_; optional): Sets how many tiles to display across horitontally. If enabled, overrides tilewidth and sets the amount of tiles directly based off that value.
-
-**opacity** (_number_ | _string_; optional): Opacity of the main plot as a value between 0 and 1.
-
-**overview** (_a value equal to: 'heatmap', 'slider', 'none'_; default `heatmap`): Toggles whether the overview should be a heatmap, a slider, or none.
-
-**scrollskip** (_number_; default `10`): If overview is set to 'scroll', determines how many tiles to skip with each slider movement. Has no effect if scroll is not enabled (such as with overview or none).
-
-**showconsensus** (_boolean_; default `True`): Displays toggling the consensus sequence, where each nucleotide in the consensus sequence is the argmax of its distribution at a set nucleotide.
-
-**showconservation** (_boolean_; default `True`): Enables the display of conservation secondary barplot where the most conserved nucleotides or amino acids get greater bars.
-
-**showgap** (_boolean_; default `True`): Enables the display of gap secondary barplot where the sequence regions with the fewest gaps get the greatest bars.
-
-**showid** (_boolean_; default `True`): Toggles displaying sequence IDs at left of alignment.
-
-**showlabel** (_boolean_; default `True`): Toggles displaying sequence labels at left of alignment.
-
-**textcolor** (_string_; optional): Color of the nucleotide labels, in common name, hex, rgb or rgba format. If left blank, handled by the colorscale automatically.
-
-**textsize** (_number_ | _string_; default `10`): Size of the nucleotide labels, as a number.
-
-**tickstart** (_number_ | _string_; optional): Determines where to start annotating the first tile. If let blank will be automatically determined by Plotly. Equivalent to Plotly's tick0 property. Does not function if overview mode 'slider' is applied. (Current bug).
-
-**ticksteps** (_number_ | _string_; optional): Determines at what interval to keep annotating the tiles. If left blank will be automatially determined by Plotly. Equivalent to Plotly's dtick property. Does not function if overview mode 'slider' is applied. (Current bug).
-
-**tileheight** (_number_; default `16`): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up vertically. If enabled, set height dynamically.
-
-**tilewidth** (_number_; default `16`): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up horizontally. The total number of tiles (numtiles) seen horizontally is automatically determined by rounding the Viewer width divided by the tile width. the Viewwer width divided by the tile witdth.
-
-**width** (_number_ | _string_; optional): Width of the Viewer. Property takes precedence over tileswidth and numtiles if either of them is set.
-
-```python
-
-```
diff --git a/doc/python/bio-alignment-chart.md b/doc/python/bio-alignment-chart.md
new file mode 100644
index 00000000000..9bd2286b5d9
--- /dev/null
+++ b/doc/python/bio-alignment-chart.md
@@ -0,0 +1,94 @@
+---
+jupyter:
+  jupytext:
+    notebook_metadata_filter: all
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.0
+  kernelspec:
+    display_name: Python 3 (ipykernel)
+    language: python
+    name: python3
+  language_info:
+    codemirror_mode:
+      name: ipython
+      version: 3
+    file_extension: .py
+    mimetype: text/x-python
+    name: python
+    nbconvert_exporter: python
+    pygments_lexer: ipython3
+    version: 3.9.7
+  plotly:
+    display_as: bio
+    language: python
+    layout: base
+    name: Alignment Chart
+    order: 1
+    page_type: u-guide
+    permalink: python/alignment-chart/
+    thumbnail: thumbnail/alignment-chart.png
+---
+
+## Default AlignmentChart
+An example of a default AlignmentChart component without any extra properties
+
+```python
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+
+
+data = urlreq.urlopen(
+    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
+    'alignment_viewer_p53.fasta'
+).read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    id='my-default-alignment-viewer',
+    data=data
+)
+```
+
+## Consensus Sequence
+Toggle the display of the consensus sequence at the bottom of the heatmap.
+
+```python
+import urllib.request as urlreq
+
+import dash_bio as dashbio
+
+
+data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    data=data,
+    showconsensus=False
+)
+```
+
+## Tile Size
+Change the height and/or width of the tiles.
+
+
+```python
+import urllib.request as urlreq
+import dash_bio as dashbio
+
+data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
+
+app.layout = dashbio.AlignmentChart(
+    data=data,
+    tilewidth=50
+)
+```
+
+## Alignment Chart in `dash_bio`
+
+```python
+from IPython.display import IFrame
+snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
+IFrame(snippet_url + 'bio-circos', width='100%', height=630)
+```

From 44b3c5fdbb1a2037dc4e761f410dc269e131d138 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Mon, 18 Oct 2021 18:51:46 +0200
Subject: [PATCH 17/30] docs:bio: add `no_display=true` to circos iframe
 example

---
 doc/python/bio-circos.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/python/bio-circos.md b/doc/python/bio-circos.md
index 535981e1040..bbdc5e6ffcb 100644
--- a/doc/python/bio-circos.md
+++ b/doc/python/bio-circos.md
@@ -108,7 +108,7 @@ dash_bio.Clustergram(
 
 ## Circos with Dash
 
-```python
+```python no_display=true
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
 IFrame(snippet_url + 'bio-circos', width='100%', height=630)

From 41cb53c145fa50900ef2a9a60c5ac3ce08b6a872 Mon Sep 17 00:00:00 2001
From: Marcin Nowak-Liebiediew <m.liebiediew@gmail.com>
Date: Tue, 19 Oct 2021 18:45:46 +0200
Subject: [PATCH 18/30] docs:bio: bar chart for conversion viz + alignment
 chart iframe url

---
 doc/python/bio-alignment-chart.md | 59 ++++++-------------------------
 1 file changed, 10 insertions(+), 49 deletions(-)

diff --git a/doc/python/bio-alignment-chart.md b/doc/python/bio-alignment-chart.md
index 9bd2286b5d9..510f4461ce3 100644
--- a/doc/python/bio-alignment-chart.md
+++ b/doc/python/bio-alignment-chart.md
@@ -32,63 +32,24 @@ jupyter:
     thumbnail: thumbnail/alignment-chart.png
 ---
 
-## Default AlignmentChart
-An example of a default AlignmentChart component without any extra properties
+## Bar Chart for conservation visualization
 
 ```python
-import urllib.request as urlreq
+import plotly.express as px
 
-import dash_bio as dashbio
+df = (pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/gene_conservation.csv')
+        .set_index('0')
+        .loc[['consensus','conservation']]
+        .T)
 
-
-data = urlreq.urlopen(
-    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
-    'alignment_viewer_p53.fasta'
-).read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    id='my-default-alignment-viewer',
-    data=data
-)
-```
-
-## Consensus Sequence
-Toggle the display of the consensus sequence at the bottom of the heatmap.
-
-```python
-import urllib.request as urlreq
-
-import dash_bio as dashbio
-
-
-data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    data=data,
-    showconsensus=False
-)
-```
-
-## Tile Size
-Change the height and/or width of the tiles.
-
-
-```python
-import urllib.request as urlreq
-import dash_bio as dashbio
-
-data = urlreq.urlopen('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/alignment_viewer_p53.fasta').read().decode('utf-8')
-
-app.layout = dashbio.AlignmentChart(
-    data=data,
-    tilewidth=50
-)
+fig = px.bar(df, labels={ 'index': 'base' }, hover_name='consensus', y='conservation')
+fig.show()
 ```
 
-## Alignment Chart in `dash_bio`
+## Alignment Chart in dash_bio
 
 ```python
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
-IFrame(snippet_url + 'bio-circos', width='100%', height=630)
+IFrame(snippet_url + 'bio-alignmentchart', width='100%', height=630)
 ```

From cdbeb71a397f3a1acae009eb538b787b337fc841 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Tue, 19 Oct 2021 18:57:42 +0200
Subject: [PATCH 19/30] Update requirements.txt

remove `dash` and `jupyter-dash`
---
 doc/requirements.txt | 2 --
 1 file changed, 2 deletions(-)

diff --git a/doc/requirements.txt b/doc/requirements.txt
index a80aa1a26f7..68a703b1dd6 100644
--- a/doc/requirements.txt
+++ b/doc/requirements.txt
@@ -32,6 +32,4 @@ pooch
 wget
 nbconvert==5.6.1
 orjson
-jupyter-dash
 dash-bio
-dash
\ No newline at end of file

From df87ed9fc43c7c62dcc1fe496d05be4d271a9d47 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Tue, 19 Oct 2021 18:58:22 +0200
Subject: [PATCH 20/30] Update bio-alignment-chart.md

add `no_display=true` to iframed cell
---
 doc/python/bio-alignment-chart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/python/bio-alignment-chart.md b/doc/python/bio-alignment-chart.md
index 510f4461ce3..b2e49713361 100644
--- a/doc/python/bio-alignment-chart.md
+++ b/doc/python/bio-alignment-chart.md
@@ -48,7 +48,7 @@ fig.show()
 
 ## Alignment Chart in dash_bio
 
-```python
+```python no_display=true
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
 IFrame(snippet_url + 'bio-alignmentchart', width='100%', height=630)

From 343b6f90f9523736bca99e419a2cd5989770ef5f Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@plot.ly>
Date: Wed, 20 Oct 2021 14:29:25 -0400
Subject: [PATCH 21/30] try to pin down doc deps

---
 doc/requirements.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/doc/requirements.txt b/doc/requirements.txt
index b207fc5a9e2..f3c0d3ecea7 100644
--- a/doc/requirements.txt
+++ b/doc/requirements.txt
@@ -1,5 +1,6 @@
 plotly==5.3.1
 jupytext==1.1.1
+jupyter-client<7
 jupyter
 notebook
 pandas==1.0.3

From f05a436a9fcbb6edbe3f53b53bcd5a077c254b7d Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:16:25 +0200
Subject: [PATCH 22/30] Apply suggestions from code review

Co-authored-by: HammadTheOne <30986043+HammadTheOne@users.noreply.github.com>
---
 doc/python/bio-alignment-chart.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/python/bio-alignment-chart.md b/doc/python/bio-alignment-chart.md
index b2e49713361..5c61422ecc5 100644
--- a/doc/python/bio-alignment-chart.md
+++ b/doc/python/bio-alignment-chart.md
@@ -36,8 +36,9 @@ jupyter:
 
 ```python
 import plotly.express as px
+import pandas as pd
 
-df = (pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/gene_conservation.csv')
+df = (pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Genetic/gene_conservation.csv')
         .set_index('0')
         .loc[['consensus','conservation']]
         .T)

From 3269052371072470edf42dd1a5f7d5c1d6bbdd6f Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:21:12 +0200
Subject: [PATCH 23/30] fix:change page name: Volcano plot -> Manhattan Plot

Co-authored-by: HammadTheOne <30986043+HammadTheOne@users.noreply.github.com>
---
 doc/python/bio-manhattanplot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/python/bio-manhattanplot.md b/doc/python/bio-manhattanplot.md
index fb0fd92e3c7..a163d2b8f47 100644
--- a/doc/python/bio-manhattanplot.md
+++ b/doc/python/bio-manhattanplot.md
@@ -26,7 +26,7 @@ jupyter:
     display_as: bio
     language: python
     layout: base
-    name: Volcano plot
+    name: Manhattan Plot
     order: 1
     page_type: u-guide
     permalink: python/volcano-plot/

From 1335742ea2d9fdda0e231a84aecfb83d9a40e4b2 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:23:04 +0200
Subject: [PATCH 24/30] Volcano Plot page name title-cased

Co-authored-by: HammadTheOne <30986043+HammadTheOne@users.noreply.github.com>
---
 doc/python/bio-volcano-plot.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/python/bio-volcano-plot.md b/doc/python/bio-volcano-plot.md
index 1090f688e39..d9c1f077b2e 100644
--- a/doc/python/bio-volcano-plot.md
+++ b/doc/python/bio-volcano-plot.md
@@ -26,7 +26,7 @@ jupyter:
     display_as: bio
     language: python
     layout: base
-    name: Volcano plot
+    name: Volcano Plot
     order: 1
     page_type: u-guide
     permalink: python/volcano-plot/

From 05de373870b54a213f80a175fa0380ec8aa24cb4 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:24:09 +0200
Subject: [PATCH 25/30] add intro paragraph to Volcano Plot page

---
 doc/python/bio-volcano-plot.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/doc/python/bio-volcano-plot.md b/doc/python/bio-volcano-plot.md
index d9c1f077b2e..497d7e3307d 100644
--- a/doc/python/bio-volcano-plot.md
+++ b/doc/python/bio-volcano-plot.md
@@ -34,8 +34,7 @@ jupyter:
 ---
 
 ## VolcanoPlot
-An example of a default VolcanoPlot component without any extra properties.
-
+Volcano Plot interactively identifies clinically meaningful markers in genomic experiments, i.e., markers that are statistically significant and have an effect size greater than some threshold. Specifically, volcano plots depict the negative log-base-10 p-values plotted against their effect size.
 
 ```python
 import pandas as pd

From 39cb3c2257b6ba0cfa0839ed4da8071bb40671ec Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:25:32 +0200
Subject: [PATCH 26/30] add intro paragraph to Manhattan Plot page

---
 doc/python/bio-manhattanplot.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/doc/python/bio-manhattanplot.md b/doc/python/bio-manhattanplot.md
index a163d2b8f47..e0b710713e4 100644
--- a/doc/python/bio-manhattanplot.md
+++ b/doc/python/bio-manhattanplot.md
@@ -34,8 +34,7 @@ jupyter:
 ---
 
 ## Manhattan Plot
-
-An example of a default ManhattanPlot component without any extra properties.
+ManhattanPlot allows you to visualize genome-wide association studies (GWAS) efficiently. Using WebGL under the hood, you can interactively explore overviews of massive datasets comprising hundreds of thousands of points at once, or take a closer look at a small subset of your data. Hover data and click data are accessible from within the Dash app.
 
 ```python
 import pandas as pd

From 3dbcbae1f7a4ca7785f9c8b5a5498b5c611a6153 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:29:29 +0200
Subject: [PATCH 27/30] add intro paragraph to bio-circos.md

---
 doc/python/bio-circos.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/doc/python/bio-circos.md b/doc/python/bio-circos.md
index bbdc5e6ffcb..f40d9dffcb9 100644
--- a/doc/python/bio-circos.md
+++ b/doc/python/bio-circos.md
@@ -33,8 +33,7 @@ jupyter:
 ---
 
 ## Default Clustergram
-An example of a default Clustergram component without any extra properties.
-
+A clustergram is a combination heatmap-dendrogram that is commonly used in gene expression data. The hierarchical clustering that is represented by the dendrograms can be used to identify groups of genes with related expression levels. The Dash Bio Clustergram component is a Python-based component that uses plotly.py to generate a figure. It takes as input a two-dimensional numpy array of floating-point values. Imputation of missing data and computation of hierarchical clustering both occur within the component itself. Clusters that meet or exceed a user-defined threshold of similarity comprise single traces in the corresponding dendrogram, and can be highlighted with annotations. The user can specify additional parameters to customize the metrics and methods used to compute parts of the clustering, such as the pairwise distance between observations and the linkage matrix.
 
 ```python
 import pandas as pd

From a54afe4e590c24e050d305939d9ac6034d079f12 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:34:40 +0200
Subject: [PATCH 28/30] add intro paragraph to bio-aligment-chart.md

---
 doc/python/bio-alignment-chart.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/doc/python/bio-alignment-chart.md b/doc/python/bio-alignment-chart.md
index 5c61422ecc5..5ab71618bab 100644
--- a/doc/python/bio-alignment-chart.md
+++ b/doc/python/bio-alignment-chart.md
@@ -32,6 +32,12 @@ jupyter:
     thumbnail: thumbnail/alignment-chart.png
 ---
 
+## Alignment Viewer (link to dash alignment section below)
+
+The Alignment Viewer (MSA) component is used to align multiple genomic or proteomic sequences from a FASTA or Clustal file. Among its extensive set of features, the multiple sequence alignment viewer can display multiple subplots showing gap and conservation info, alongside industry standard colorscale support and consensus sequence. No matter what size your alignment is, Alignment Viewer is able to display your genes or proteins snappily thanks to the underlying WebGL architecture powering the component. You can quickly scroll through your long sequence with a slider or a heatmap overview.
+
+Note that the AlignmentChart only returns a chart of the sequence, while AlignmentViewer has integrated controls for colorscale, heatmaps, and subplots allowing you to interactively control your sequences.
+
 ## Bar Chart for conservation visualization
 
 ```python

From b039ebd84e8af4fa10a7e083982b6c1a7cacc107 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 17:39:09 +0200
Subject: [PATCH 29/30] Update bio-manhattanplot.md

---
 doc/python/bio-manhattanplot.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/python/bio-manhattanplot.md b/doc/python/bio-manhattanplot.md
index e0b710713e4..3da262735ca 100644
--- a/doc/python/bio-manhattanplot.md
+++ b/doc/python/bio-manhattanplot.md
@@ -29,8 +29,8 @@ jupyter:
     name: Manhattan Plot
     order: 1
     page_type: u-guide
-    permalink: python/volcano-plot/
-    thumbnail: thumbnail/volcano-plot.png
+    permalink: python/manhattan-plot/ 
+    thumbnail: thumbnail/manhttan-plot.png
 ---
 
 ## Manhattan Plot

From bab165353a21ad4c250eff1c7ebed9d2a4dd2643 Mon Sep 17 00:00:00 2001
From: smallstepman <m.liebiediew@gmail.com>
Date: Thu, 21 Oct 2021 18:08:24 +0200
Subject: [PATCH 30/30] rename circos.md to clustergram.md, drop all cicros
 examples

---
 doc/python/{bio-circos.md => bio-clustergram.md} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename doc/python/{bio-circos.md => bio-clustergram.md} (97%)

diff --git a/doc/python/bio-circos.md b/doc/python/bio-clustergram.md
similarity index 97%
rename from doc/python/bio-circos.md
rename to doc/python/bio-clustergram.md
index f40d9dffcb9..d98b6a58268 100644
--- a/doc/python/bio-circos.md
+++ b/doc/python/bio-clustergram.md
@@ -105,10 +105,10 @@ dash_bio.Clustergram(
 )
 ```
 
-## Circos with Dash
+## Clustergram with Dash
 
 ```python no_display=true
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
-IFrame(snippet_url + 'bio-circos', width='100%', height=630)
+IFrame(snippet_url + 'bio-clustergram', width='100%', height=630)
 ```