no javascript links in python

Author: nicolaskruchten

python/bullet-charts.md

@@ -38,17 +38,17 @@ jupyter:
 ---
 
 #### Basic Bullet Charts
-Stephen Few's Bullet Chart was invented to replace dashboard [gauges](https://plot.ly/javascript/gauge-charts/) and meters, combining both types of charts into simple bar charts with qualitative bars (steps), quantitative bar (bar) and performance line (threshold); all into one simple layout.
-  Steps typically are broken into several values, which are defined with an array. The bar represent the actual value that a particular variable reached, and the threshold usually indicate a goal point relative to the value achieved by the bar. See [indicator page](https://plot.ly/javascript/gauge-charts/) for more detail.
+Stephen Few's Bullet Chart was invented to replace dashboard [gauges](https://plot.ly/python/gauge-charts/) and meters, combining both types of charts into simple bar charts with qualitative bars (steps), quantitative bar (bar) and performance line (threshold); all into one simple layout.
+  Steps typically are broken into several values, which are defined with an array. The bar represent the actual value that a particular variable reached, and the threshold usually indicate a goal point relative to the value achieved by the bar. See [indicator page](https://plot.ly/python/gauge-charts/) for more detail.
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "number+gauge+delta", 
-    gauge = {'shape': "bullet"}, 
+    mode = "number+gauge+delta",
+    gauge = {'shape': "bullet"},
     value = 220,
-    delta = {'reference': 300}, 
+    delta = {'reference': 300},
     domain = {'x': [0, 1], 'y': [0, 1]},
     title = {'text': "Profit"}))
 fig.update_layout(height = 250)
@@ -64,41 +64,41 @@ import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
     mode = "number+gauge+delta", value = 220,
-    domain = {'x': [0.1, 1], 'y': [0, 1]}, 
+    domain = {'x': [0.1, 1], 'y': [0, 1]},
     title = {'text' :"<b>Profit</b>"},
-    delta = {'reference': 200}, 
+    delta = {'reference': 200},
     gauge = {
-        'shape': "bullet", 
-        'axis': {'range': [None, 300]}, 
+        'shape': "bullet",
+        'axis': {'range': [None, 300]},
         'threshold': {
-            'line': {'color': "red", 'width': 2}, 
-            'thickness': 0.75, 
+            'line': {'color': "red", 'width': 2},
+            'thickness': 0.75,
             'value': 280},
         'steps': [
-            {'range': [0, 150], 'color': "lightgray"}, 
+            {'range': [0, 150], 'color': "lightgray"},
             {'range': [150, 250], 'color': "gray"}]}))
 fig.update_layout(height = 250)
 fig.show()
 ```
 
 #### Custom Bullet
-The following example shows how to customize your charts. For more information about all possible options check our [reference page](https://plot.ly/javascript/reference/#indicator).
+The following example shows how to customize your charts. For more information about all possible options check our [reference page](https://plot.ly/python/reference/#indicator).
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "number+gauge+delta", value = 220, 
-    domain = {'x': [0, 1], 'y': [0, 1]}, 
-    delta = {'reference': 280, 'position': "top"}, 
-    title = {'text':"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>", 'font': {"size": 14}}, 
+    mode = "number+gauge+delta", value = 220,
+    domain = {'x': [0, 1], 'y': [0, 1]},
+    delta = {'reference': 280, 'position': "top"},
+    title = {'text':"<b>Profit</b><br><span style='color: gray; font-size:0.8em'>U.S. $</span>", 'font': {"size": 14}},
     gauge = {
-        'shape': "bullet", 
-        'axis': {'range': [None, 300]}, 
+        'shape': "bullet",
+        'axis': {'range': [None, 300]},
         'threshold': {
-            'line': {'color': "red", 'width': 2}, 
+            'line': {'color': "red", 'width': 2},
             'thickness': 0.75, 'value': 270},
-        'bgcolor': "white", 
+        'bgcolor': "white",
         'steps': [
             {'range': [0, 150], 'color': "cyan"},
             {'range': [150, 250], 'color': "royalblue"}],
@@ -116,50 +116,50 @@ import plotly.graph_objects as go
 fig = go.Figure()
 
 fig.add_trace(go.Indicator(
-    mode = "number+gauge+delta", value = 180, 
-    delta = {'reference': 200}, 
-    domain = {'x': [0.25, 1], 'y': [0.08, 0.25]}, 
-    title = {'text': "Revenue"}, 
+    mode = "number+gauge+delta", value = 180,
+    delta = {'reference': 200},
+    domain = {'x': [0.25, 1], 'y': [0.08, 0.25]},
+    title = {'text': "Revenue"},
     gauge = {
-        'shape': "bullet", 
-        'axis': {'range': [None, 300]}, 
+        'shape': "bullet",
+        'axis': {'range': [None, 300]},
         'threshold': {
-            'line': {'color': "black", 'width': 2}, 
-            'thickness': 0.75, 
-            'value': 170}, 
+            'line': {'color': "black", 'width': 2},
+            'thickness': 0.75,
+            'value': 170},
         'steps': [
-            {'range': [0, 150], 'color': "gray"}, 
-            {'range': [150, 250], 'color': "lightgray"}], 
+            {'range': [0, 150], 'color': "gray"},
+            {'range': [150, 250], 'color': "lightgray"}],
         'bar': {'color': "black"}}))
 
 fig.add_trace(go.Indicator(
     mode = "number+gauge+delta", value = 35,
-    delta = {'reference': 200}, 
+    delta = {'reference': 200},
     domain = {'x': [0.25, 1], 'y': [0.4, 0.6]},
-    title = {'text': "Profit"}, 
+    title = {'text': "Profit"},
     gauge = {
-        'shape': "bullet", 
+        'shape': "bullet",
         'axis': {'range': [None, 100]},
         'threshold': {
-            'line': {'color': "black", 'width': 2}, 
-            'thickness': 0.75, 
+            'line': {'color': "black", 'width': 2},
+            'thickness': 0.75,
             'value': 50},
         'steps': [
-            {'range': [0, 25], 'color': "gray"}, 
+            {'range': [0, 25], 'color': "gray"},
             {'range': [25, 75], 'color': "lightgray"}],
         'bar': {'color': "black"}}))
 
 fig.add_trace(go.Indicator(
     mode = "number+gauge+delta", value = 220,
-    delta = {'reference': 200}, 
+    delta = {'reference': 200},
     domain = {'x': [0.25, 1], 'y': [0.7, 0.9]},
-    title = {'text' :"Satisfaction"}, 
+    title = {'text' :"Satisfaction"},
     gauge = {
-        'shape': "bullet", 
+        'shape': "bullet",
         'axis': {'range': [None, 300]},
         'threshold': {
-            'line': {'color': "black", 'width': 2}, 
-            'thickness': 0.75, 
+            'line': {'color': "black", 'width': 2},
+            'thickness': 0.75,
             'value': 210},
         'steps': [
             {'range': [0, 150], 'color': "gray"},

python/gauge-charts.md

@@ -45,15 +45,15 @@ A radial gauge chart has a circular arc, which displays a single value to estima
   The bar shows the target value, and the shading represents the progress toward that goal. Gauge charts, known as
   speedometer charts as well. This chart type is usually used to illustrate key business indicators.
 
-  The example below displays a basic gauge chart with default attributes. For more information about different added attributes check [indicator](https://plot.ly/javascript/indicator/) tutorial.
+  The example below displays a basic gauge chart with default attributes. For more information about different added attributes check [indicator](https://plot.ly/python/indicator/) tutorial.
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "gauge+number", 
-    value = 270, 
-    domain = {'x': [0, 1], 'y': [0, 1]}, 
+    mode = "gauge+number",
+    value = 270,
+    domain = {'x': [0, 1], 'y': [0, 1]},
     title = {'text': "Speed"}))
 
 fig.show()
@@ -67,44 +67,44 @@ The following examples include "steps" attribute shown as shading inside the rad
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    domain = {'x': [0, 1], 'y': [0, 1]}, 
-    value = 450, 
+    domain = {'x': [0, 1], 'y': [0, 1]},
+    value = 450,
     mode = "gauge+number+delta",
     title = {'text': "Speed"},
-    delta = {'reference': 380}, 
-    gauge = {'axis': {'range': [None, 500]}, 
+    delta = {'reference': 380},
+    gauge = {'axis': {'range': [None, 500]},
              'steps' : [
-                 {'range': [0, 250], 'color': "lightgray"}, 
-                 {'range': [250, 400], 'color': "gray"}], 
+                 {'range': [0, 250], 'color': "lightgray"},
+                 {'range': [250, 400], 'color': "gray"}],
              'threshold' : {'line': {'color': "red", 'width': 4}, 'thickness': 0.75, 'value': 490}}))
 
 fig.show()
 ```
 
 #### Custom Gauge Chart
-The following example shows how to style your gauge charts. For more information about all possible options check our [reference page](https://plot.ly/javascript/reference/#indicator).
+The following example shows how to style your gauge charts. For more information about all possible options check our [reference page](https://plot.ly/python/reference/#indicator).
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "gauge+number+delta", 
-    value = 420, 
-    domain = {'x': [0, 1], 'y': [0, 1]}, 
-    title = {'text': "Speed", 'font': {'size': 24}}, 
+    mode = "gauge+number+delta",
+    value = 420,
+    domain = {'x': [0, 1], 'y': [0, 1]},
+    title = {'text': "Speed", 'font': {'size': 24}},
     delta = {'reference': 400, 'increasing': {'color': "RebeccaPurple"}},
     gauge = {
         'axis': {'range': [None, 500], 'tickwidth': 1, 'tickcolor': "darkblue"},
-        'bar': {'color': "darkblue"}, 
-        'bgcolor': "white", 
-        'borderwidth': 2, 
-        'bordercolor': "gray", 
+        'bar': {'color': "darkblue"},
+        'bgcolor': "white",
+        'borderwidth': 2,
+        'bordercolor': "gray",
         'steps': [
-            {'range': [0, 250], 'color': 'cyan'}, 
+            {'range': [0, 250], 'color': 'cyan'},
             {'range': [250, 400], 'color': 'royalblue'}],
         'threshold': {
-            'line': {'color': "red", 'width': 4}, 
-            'thickness': 0.75, 
+            'line': {'color': "red", 'width': 4},
+            'thickness': 0.75,
             'value': 490}}))
 
 fig.update_layout(paper_bgcolor = "lavender", font = {'color': "darkblue", 'family': "Arial"})

python/indicator.md

@@ -67,41 +67,41 @@ In this tutorial we introduce a new trace named "Indicator". The purpose of "ind
       <li> position: position relative to `number` (either top, left, bottom, right)</li>
     </ol>
     Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
-    There are two gauge types: [angular](https://plot.ly/javascript/gauge-charts/) and [bullet](https://plot.ly/javascript/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (guage, delta, and value):
+    There are two gauge types: [angular](https://plot.ly/python/gauge-charts/) and [bullet](https://plot.ly/python/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (guage, delta, and value):
 
 ```python
 import plotly.graph_objects as go
 
 fig = go.Figure()
 
 fig.add_trace(go.Indicator(
-    value = 200, 
+    value = 200,
     delta = {'reference': 160},
     gauge = {
-        'axis': {'visible': False}}, 
+        'axis': {'visible': False}},
     domain = {'row': 0, 'column': 0}))
-   
+
 fig.add_trace(go.Indicator(
-    value = 120, 
+    value = 120,
     gauge = {
-        'shape': "bullet", 
-        'axis' : {'visible': False}}, 
+        'shape': "bullet",
+        'axis' : {'visible': False}},
     domain = {'x': [0.05, 0.5], 'y': [0.15, 0.35]}))
 
 fig.add_trace(go.Indicator(
-    mode = "number+delta", 
-    value = 300, 
+    mode = "number+delta",
+    value = 300,
     domain = {'row': 0, 'column': 1}))
 
 fig.add_trace(go.Indicator(
-    mode = "delta", 
-    value = 40, 
+    mode = "delta",
+    value = 40,
     domain = {'row': 1, 'column': 1}))
 
 fig.update_layout(
-    grid = {'rows': 2, 'columns': 2, 'pattern': "independent"}, 
+    grid = {'rows': 2, 'columns': 2, 'pattern': "independent"},
     template = {'data' : {'indicator': [{
-        'title': {'text': "Speed"}, 
+        'title': {'text': "Speed"},
         'mode' : "number+delta+gauge",
         'delta' : {'reference': 90}}]
                          }})
@@ -113,9 +113,9 @@ fig.update_layout(
 import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "gauge+number", 
+    mode = "gauge+number",
     value = 450,
-    title = {'text': "Speed"}, 
+    title = {'text': "Speed"},
     domain = {'x': [0, 1], 'y': [0, 1]}
 ))
 
@@ -126,14 +126,14 @@ fig.show()
 The equivalent of above "angular gauge":
 
 ```python
-import plotly.graph_objects as go 
+import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "number+gauge+delta", 
-    gauge = {'shape': "bullet"}, 
+    mode = "number+gauge+delta",
+    gauge = {'shape': "bullet"},
     delta = {'reference': 300},
-    value = 220, 
-    domain = {'x': [0.1, 1], 'y': [0.2, 0.9]}, 
+    value = 220,
+    domain = {'x': [0.1, 1], 'y': [0.2, 0.9]},
     title = {'text': "Avg order size"}))
 
 fig.show()
@@ -143,10 +143,10 @@ fig.show()
 Another interesting feature is that indicator trace sits above the other traces (even the 3d ones). This way, it can be easily used as an overlay as demonstrated below
 
 ```python
-import plotly.graph_objects as go 
+import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
-    mode = "number+delta", 
+    mode = "number+delta",
     value = 492,
     delta = {"reference": 512, "valueformat": ".0f"},
     title = {"text": "Users online"},
@@ -166,9 +166,9 @@ import plotly.graph_objects as go
 
 fig = go.Figure(go.Indicator(
     mode = "number+delta",
-    value = 400, 
+    value = 400,
     number = {'prefix': "$"},
-    delta = {'position': "top", 'reference': 320}, 
+    delta = {'position': "top", 'reference': 320},
     domain = {'x': [0, 1], 'y': [0, 1]}))
 
 fig.update_layout(paper_bgcolor = "lightgray")
@@ -184,22 +184,22 @@ import plotly.graph_objects as go
 fig = go.Figure()
 
 fig.add_trace(go.Indicator(
-    mode = "number+delta", 
-    value = 200, 
-    domain = {'x': [0, 0.5], 'y': [0, 0.5]}, 
+    mode = "number+delta",
+    value = 200,
+    domain = {'x': [0, 0.5], 'y': [0, 0.5]},
     delta = {'reference': 400, 'relative': True, 'position' : "top"}))
 
 fig.add_trace(go.Indicator(
-    mode = "number+delta", 
-    value = 350, 
-    delta = {'reference': 400, 'relative': True},  
+    mode = "number+delta",
+    value = 350,
+    delta = {'reference': 400, 'relative': True},
     domain = {'x': [0, 0.5], 'y': [0.5, 1]}))
 
 fig.add_trace(go.Indicator(
-    mode = "number+delta", 
-    value = 450, 
+    mode = "number+delta",
+    value = 450,
     title = {"text": "Accounts<br><span style='font-size:0.8em;color:gray'>Subtitle</span><br><span style='font-size:0.8em;color:gray'>Subsubtitle</span>"},
-    delta = {'reference': 400, 'relative': True}, 
+    delta = {'reference': 400, 'relative': True},
     domain = {'x': [0.6, 1], 'y': [0, 1]}))
 
 fig.show()