Dash bio styling

CHANGELOG.md

@@ -12,6 +12,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Updated
   - The JSON serialization engines no longer sort their keys [#3380](https://github.com/plotly/plotly.py/issues/3380)
+  - Updated Plotly.js to from version 2.4.2 to version 2.5.1. See the [plotly.js CHANGELOG](https://github.com/plotly/plotly.js/blob/master/CHANGELOG.md#240----2021-08-27) for more information.
+
 
 ## [5.3.1] - 2021-08-31
 

doc/python/bio-alignment-chart.md

@@ -29,10 +29,10 @@ jupyter:
     order: 1
     page_type: u-guide
     permalink: python/alignment-chart/
-    thumbnail: thumbnail/alignment-chart.png
+    thumbnail: thumbnail/alignment_chart.png
 ---
 
-## Alignment Viewer (link to dash alignment section below)
+## Alignment Viewer
 
 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.
 
@@ -44,18 +44,19 @@ Note that the AlignmentChart only returns a chart of the sequence, while Alignme
 import plotly.express as px
 import pandas as pd
 
-df = (pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/Dash_Bio/Genetic/gene_conservation.csv')
+df = (pd.read_csv('https://git.io/gene_conservation.csv')
         .set_index('0')
         .loc[['consensus','conservation']]
-        .T)
+        .T
+        .astype({"conservation": float}))
 
 fig = px.bar(df, labels={ 'index': 'base' }, hover_name='consensus', y='conservation')
 fig.show()
 ```
 
 ## Alignment Chart in dash_bio
 
-```python no_display=true
+```python hide_code=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)

doc/python/bio-clustergram.md

@@ -39,11 +39,7 @@ A clustergram is a combination heatmap-dendrogram that is commonly used in gene
 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', 
-)
+df = pd.read_csv('https://git.io/clustergram_brain_cancer.csv')
 
 dash_bio.Clustergram(
     data=df,
@@ -62,10 +58,7 @@ Change the colors of the dendrogram traces that are used to represent clusters,
 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', 
-)
+df = pd.read_csv('https://git.io/clustergram_brain_cancer.csv')
 
 dash_bio.Clustergram(
     data=df,
@@ -90,10 +83,7 @@ Change the relative width and height of, respectively, the row and column dendro
 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', 
-)
+df = pd.read_csv('https://git.io/clustergram_brain_cancer.csv')
 
 dash_bio.Clustergram(
     data=df,
@@ -107,7 +97,7 @@ dash_bio.Clustergram(
 
 ## Clustergram with Dash
 
-```python no_display=true
+```python hide_code=true 
 from IPython.display import IFrame
 snippet_url = 'https://dash-gallery.plotly.host/python-docs-dash-snippets/'
 IFrame(snippet_url + 'bio-clustergram', width='100%', height=630)

doc/python/bio-manhattanplot.md

@@ -29,36 +29,34 @@ jupyter:
     name: Manhattan Plot
     order: 1
     page_type: u-guide
-    permalink: python/manhattan-plot/ 
-    thumbnail: thumbnail/manhttan-plot.png
+    permalink: python/manhattan-plot/
+    thumbnail: thumbnail/manhattan_plot.png
 ---
 
 ## Manhattan Plot
 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
-import dash_bio as dashbio
+import dash_bio
 
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/manhattan_data.csv')
+df = pd.read_csv('https://git.io/manhattan_data.csv')
 
-
-dashbio.ManhattanPlot(
+dash_bio.ManhattanPlot(
     dataframe=df,
 )
 ```
 
-## Highlighted points color, and colors of the suggestive line and the genome-wide line.
+## 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
-
+import dash_bio
 
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/manhattan_data.csv')
+df = pd.read_csv('https://git.io/manhattan_data.csv')
 
-dashbio.ManhattanPlot(
+dash_bio.ManhattanPlot(
     dataframe=df,
     highlight_color='#00FFAA',
     suggestiveline_color='#AA00AA',
@@ -68,7 +66,7 @@ dashbio.ManhattanPlot(
 
 ## ManhattanPlot with Dash
 
-```python no_display=true
+```python hide_code=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)

doc/python/bio-volcano-plot.md

@@ -30,21 +30,18 @@ jupyter:
     order: 1
     page_type: u-guide
     permalink: python/volcano-plot/
-    thumbnail: thumbnail/volcano-plot.png
+    thumbnail: thumbnail/volcano_plot.png
 ---
 
 ## VolcanoPlot
 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
-import dash_bio 
+import dash_bio
 
 
-df = pd.read_csv(
-    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
-    'volcano_data1.csv'
-)
+df = pd.read_csv('https://git.io/volcano_data1.csv')
 
 dash_bio.VolcanoPlot(
     dataframe=df,
@@ -57,11 +54,11 @@ Change the size of the points on the scatter plot, and the widths of the effect
 
 ```python
 import pandas as pd
-import dash_bio as dashbio
+import dash_bio
 
-df = pd.read_csv('https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv')
+df = pd.read_csv('https://git.io/volcano_data1.csv')
 
-dashbio.VolcanoPlot(
+dash_bio.VolcanoPlot(
     dataframe=df,
     point_size=10,
     effect_size_line_width=4,
@@ -71,7 +68,7 @@ dashbio.VolcanoPlot(
 
 ## VolcanoPlot with Dash
 
-```python no_display=true
+```python hide_code=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)