Explore step-by-step tutorials and code examples for figure structures, updating figures, displaying figures, and framework integrations to master our Python graphing library.
+ {% endif %}-
@@ -96,7 +99,7 @@
{% if chart_type %}
Find copy-pasteable code snippets and interactive demos to create standard Python charts, including scatter plots, line graphs, bar charts, pie charts, and bubble charts.
+ {% endif %}-
@@ -135,7 +141,7 @@
{% if statistical %}
Browse code tutorials and live previews for complex data analysis, featuring box plots, histograms, error bars, and 2D density plots.
+ {% endif %}-
@@ -168,7 +177,7 @@
{% if scientific %}
Access interactive examples and code snippets for domain-specific visualizations. Build heatmaps, contour plots, ternary plots, and log plots.
+ {% endif %}-
@@ -201,7 +213,7 @@
{% if financial %}
Explore code guides and live examples for financial data, including candlestick charts, OHLC plots, waterfall diagrams, funnel charts, and time series lines to create interactive graphs in Python.
+ {% endif %}-
@@ -234,7 +249,7 @@
{% if maps %}
Learn how to build interactive geographic visualizations with step-by-step code snippets for Mapbox integration, tile choropleth maps, lines on maps, and bubble maps.
+ {% endif %}-
@@ -267,7 +285,7 @@
{% if ai_ml %}
Visualize machine learning models with tutorials for ML regression, kNN classification, ROC and PR curves, and PCA visualization.
+ {% endif %}-
@@ -301,9 +322,12 @@
{% if bio %}
Access specialized charts for computational biology, including volcano plots, Manhattan plots, clustergrams, and alignment charts.
+ {% endif %}-
{%- for page in languagelist -%}
@@ -321,7 +345,7 @@
{% if 3d_charts %}
View high-performance code examples for 3D axes, 3D scatter plots, 3D surface plots, and 3D subplots to enhance your Python graphs.
+ {% endif %}-
@@ -354,7 +381,7 @@
{% if multiple_axes %}
Find layout tutorials and code examples for combining multi-chart arrangements, map subplots, table subplots, and mixed layouts when plotting graphs in Python.
+ {% endif %}-
@@ -387,7 +417,7 @@
{% if chart_events and page.language =="python" %}
Learn how to connect your Python graph to interactive Jupyter environments using FigureWidget tutorials, interactive data analysis, and custom click events.
+ {% endif %}-
@@ -420,7 +453,7 @@
{% if chart_events and page.language =="r" %}
Discover code snippets and tutorials for building interactive UI controls directly into your visualizations, including dropdown menus, custom buttons, sliders, and range selectors to upgrade your graph in Python.
+ {% endif %}-
@@ -519,7 +555,7 @@
{% if animations %}
Explore code tutorials and interactive demos for animating data points, building time-series sliders, and creating smooth transitions to build a dynamic Python graph.
+ {% endif %}-
@@ -552,7 +591,7 @@
{% if financial_analysis %}
Take your interactive plots in Python to the next level with advanced Python graphing techniques, including plotting CSV data, generating random walks, peak finding, data smoothing, and rendering LaTeX.
+ {% endif %}-
@@ -611,7 +653,7 @@
{% if style_options %}
-
@@ -637,7 +679,7 @@
{% if layout_options %}
-
diff --git a/_posts/plotly_js/2015-04-05-plotly_js-index.html b/_posts/plotly_js/2015-04-05-plotly_js-index.html
index 1e7a81041..514f2cd2a 100755
--- a/_posts/plotly_js/2015-04-05-plotly_js-index.html
+++ b/_posts/plotly_js/2015-04-05-plotly_js-index.html
@@ -1,7 +1,7 @@
---
name: Plotly JavaScript Graphing Library
permalink: /javascript/
-description: A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts.
+description: Build interactive JavaScript charts and graphs with Plotly's open-source JavaScript chart library. Explore over 40+ advanced JavaScript data visualizations.
language: plotly_js
layout: langindex
display_as: false
@@ -15,10 +15,10 @@
Plotly JavaScript Open Source Graphing Library
+Open Source JavaScript Graphing & Chart Library
- Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
-
plotly.js is free and open source and you can view the source, report issues or contribute on GitHub.
+ Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative JavaScript charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
+
plotly.js is free and open source, and you can view the source, report issues, or contribute on GitHub.
Plotly JavaScript Open Source Graphing Library
-
Read more about plotly.js features
+plotly.js Features
plotly.js abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
@@ -41,7 +41,7 @@ Plotly JavaScript Open Source Graphing Library
+
d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){
var trace = {
@@ -82,7 +82,7 @@ Plotly JavaScript Open Source Graphing Library
- Fully customizable
+ Fully Customizable
plotly.js charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
@@ -132,15 +132,15 @@ Plotly JavaScript Open Source Graphing Library
- High performance
+ High Performance
- Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.
- plotly.js uses stack.gl for high performance 2D and 3D charting.
+ Most Plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.
+ plotly.js uses stack.gl for high performance 2D and 3D JavaScript charting.
- 
+
This chart was drawn with the plotly.js chart type scattergl. scattergl charts render an order of magnitude faster than their SVG counterparts.
@@ -148,19 +148,16 @@ Plotly JavaScript Open Source Graphing Library
-
-
All 3D charts in plotly.js are rendered with WebGL, leveraging the power of the GPU for fast interactivity.
- view the interactive version
Universal
diff --git a/_posts/python/2019-07-03-index.html b/_posts/python/2019-07-03-index.html
index d49c25230..fd0d5f9a2 100755
--- a/_posts/python/2019-07-03-index.html
+++ b/_posts/python/2019-07-03-index.html
@@ -8,7 +8,7 @@
- python/google-big-query/
- python/matrix-operations/
- python/random_walk/
-description: Plotly's Python graphing library makes interactive, publication-quality graphs. Examples of how to make line plots, scatter plots, area charts, bar charts, error bars, box plots, histograms, heatmaps, subplots, multiple-axes, polar charts, and bubble charts.
+description: Build interactive Python charts and graphs with Plotly's free, open-source Python graphing library. Explore 40+ advanced Python data visualization types.
layout: langindex
language: python
---
@@ -18,12 +18,15 @@
- Plotly Open Source Graphing Library for Python
+ Open Source Python Graphing and Data Visualization Library
- {{page.description}}
Plotly.py is
- free and open source and you can
+ Plotly's Python graphing library makes interactive,
+ publication-quality graphs. Examples of how to make line plots,
+ scatter plots, area charts, bar charts, error bars, box plots,
+ histograms, heatmaps, subplots, multiple-axes, polar charts, and
+ bubble charts.
Plotly.py is free and open source, and you can
view the source, report issues or contribute on GitHubview the source, report issues, or contribute on GitHub.
diff --git a/all_static/css/improve.css b/all_static/css/improve.css
index e92cc5a02..9a92d4479 100644
--- a/all_static/css/improve.css
+++ b/all_static/css/improve.css
@@ -308,11 +308,21 @@ aside.\--sidebar-container .\--sidebar-fixed.affix #modal-button {
width: 195px; }
.langindexlink {
- text-decoration: none;
- color: #506784; }
+ text-decoration: underline;
+ color: #2186f4; }
.langindexlink:hover {
text-decoration: underline;
- color: #2186f4 !important; }
+ color: #1266c4 !important; }
+
+/* Per-section intro copy on the language index pages. Lives outside
+ .--section-header, which is a flex row shared with the "More >>"
+ link, so a paragraph inside it would become a third item on that row. */
+.\--section-description {
+ margin: 0px 0px 15px 0px;
+ max-width: 60rem;
+ color: #506784;
+ font-size: 0.95rem;
+ line-height: 1.5rem; }
/*********fix dark sidebar*********/
body p a {
@@ -445,6 +455,34 @@ aside.\--sidebar-container .\--sidebar-fixed #modal-button {
summary::-webkit-details-marker {
display: none !important; }
+details.js-splash--features > summary {
+ cursor: pointer;
+ list-style: none;
+ padding-left: 22px;
+ position: relative; }
+ details.js-splash--features > summary::-webkit-details-marker {
+ display: none !important; }
+ details.js-splash--features > summary:before {
+ content: "";
+ position: absolute;
+ left: 4px;
+ top: 0.45em;
+ border: 5px solid transparent;
+ border-width: 5px 7px;
+ border-left-color: #506784;
+ transition: transform 0.15s ease; }
+ details.js-splash--features > summary .js-splash--features-title {
+ font-size: 22px;
+ font-weight: 500;
+ color: #506784;
+ text-decoration: underline; }
+ details.js-splash--features > summary:hover .js-splash--features-title {
+ color: #2186f4; }
+
+details.js-splash--features[open] > summary:before {
+ transform: rotate(90deg);
+ transform-origin: 30% 50%; }
+
.\--footer-meta {
border-top: none;
background: #fff; }
@@ -972,8 +1010,10 @@ body header.header-main.\--default nav.--nav-meta > ul > li.languages {
color: #a0aaba; }
.dark-mode .nav-breadcrumb-container .--fork svg path {
fill: #a0aaba; }
-.dark-mode .--section-header a {
+.dark-mode .--section-header a, .dark-mode .--section-header > span {
color: #fff !important; }
+.dark-mode .\--section-description {
+ color: #a0aaba; }
.dark-mode .\--tutorial-section .\--grid-item {
background: transparent !important; }
.dark-mode .\--tutorial-section:not(.no-image) .\--grid-item .\--item-meta {
diff --git a/all_static/css/main.css b/all_static/css/main.css
index 6a01a9a26..0116f6277 100644
--- a/all_static/css/main.css
+++ b/all_static/css/main.css
@@ -8382,7 +8382,7 @@ body:not(:-moz-handler-blocked) main.\--page .\--page-body {
padding-left: 0;
position: relative;
}
- .\--tutorial-index .\--tutorial-section header.\--section-header a::before {
+ .\--tutorial-index .\--tutorial-section header.\--section-header a::before, .\--tutorial-index .\--tutorial-section header.\--section-header > span::before {
display: none; }
.\--tutorial-index .\--tutorial-section header.\--section-header div.icon {
margin-top: 4px;
diff --git a/scss/_pages/_tutorial-index.scss b/scss/_pages/_tutorial-index.scss
index f21d11718..2d42b4f3b 100644
--- a/scss/_pages/_tutorial-index.scss
+++ b/scss/_pages/_tutorial-index.scss
@@ -160,7 +160,8 @@ body:not(:-moz-handler-blocked) {
position: absolute;
}
- a {
+ a,
+ > span {
&::before {
display: none;
}
diff --git a/scss/improve.scss b/scss/improve.scss
index 9c0de0232..a50e620d0 100644
--- a/scss/improve.scss
+++ b/scss/improve.scss
@@ -457,16 +457,30 @@ aside.\--sidebar-container .\--sidebar-fixed.affix #modal-button {
width: 195px;
}
+/* These "More >>" links previously had no underline and a muted
+ slate colour, so they didn't read as clickable until hover. Make the
+ affordance permanent rather than hover-only. */
.langindexlink {
- text-decoration: none;
- color: #506784;
+ text-decoration: underline;
+ color: #2186f4;
&:hover {
text-decoration: underline;
- color: #2186f4 !important;
+ color: #1266c4 !important;
}
}
+/* Per-section intro copy on the language index pages. Lives outside
+ .--section-header, which is a flex row shared with the "More >>"
+ link, so a paragraph inside it would become a third item on that row. */
+.\--section-description {
+ margin: 0px 0px 15px 0px;
+ max-width: 60rem;
+ color: #506784;
+ font-size: 0.95rem;
+ line-height: 1.5rem;
+}
+
/*********fix dark sidebar*********/
body p a {
@@ -661,6 +675,51 @@ summary::-webkit-details-marker {
display: none !important;
}
+/* The global rule above hides the native disclosure triangle, and the
+ replacement arrow is scoped to .--sidebar-fixed only -- so a in
+ page content had no affordance at all and read as static text. Give the
+ plotly.js features section its own arrow, colour and underline so it's
+ obviously an expandable control. */
+details.js-splash--features {
+ > summary {
+ cursor: pointer;
+ list-style: none;
+ padding-left: 22px;
+ position: relative;
+
+ &::-webkit-details-marker {
+ display: none !important;
+ }
+
+ &:before {
+ content: "";
+ position: absolute;
+ left: 4px;
+ top: 0.45em;
+ border: 5px solid transparent;
+ border-width: 5px 7px;
+ border-left-color: #506784;
+ transition: transform 0.15s ease;
+ }
+
+ .js-splash--features-title {
+ font-size: 22px;
+ font-weight: 500;
+ color: #506784;
+ text-decoration: underline;
+ }
+
+ &:hover .js-splash--features-title {
+ color: #2186f4;
+ }
+ }
+
+ &[open] > summary:before {
+ transform: rotate(90deg);
+ transform-origin: 30% 50%;
+ }
+}
+
.\--footer-meta {
border-top: none;
background: #fff;
@@ -1476,10 +1535,17 @@ body header.header-main.\--default nav.--nav-meta {
fill: #a0aaba;
}
- .--section-header a {
+ /* Section headings are now that their pointless self-links were
+ removed; keep the darkmode colour applying to both. */
+ .--section-header a,
+ .--section-header > span {
color: #fff !important;
}
+ .\--section-description {
+ color: #a0aaba;
+ }
+
.\--tutorial-section .\--grid-item {
background: transparent !important;
}