-
@@ -611,7 +611,7 @@
{% if style_options %}
-
@@ -637,7 +637,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
{% include layouts/dashplug.html %}
-
-
-
Read more about plotly.js features
+
+
plotly.js Features
- Sophisticated chart types
+ Sophisticated Chart Types
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/all_static/css/improve.css b/all_static/css/improve.css
index e92cc5a02..311905bd2 100644
--- a/all_static/css/improve.css
+++ b/all_static/css/improve.css
@@ -308,11 +308,11 @@ 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; }
/*********fix dark sidebar*********/
body p a {
@@ -445,6 +445,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,7 +1000,7 @@ 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 .\--tutorial-section .\--grid-item {
background: transparent !important; }
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..dd3ba4328 100644
--- a/scss/improve.scss
+++ b/scss/improve.scss
@@ -457,13 +457,16 @@ 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;
}
}
@@ -661,6 +664,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,7 +1524,10 @@ 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;
}