@@ -497,74 +497,6 @@ <h4 id="tick-placement-color-and-style"><a class="no_underline plot-blue" href="
497
497
498
498
</ div >
499
499
500
- < div class ="section ">
501
- < div class ="row auto-eg-padding ">
502
- < div class =" row twelve columns ">
503
- < h4 id ="styling-and-coloring-axes-and-the-zero-line "> < a class ="no_underline plot-blue " href ="#styling-and-coloring-axes-and-the-zero-line "> Styling and Coloring Axes and the Zero-Line</ a > </ h4 >
504
- </ div >
505
- < div class ="row ">
506
- < div class ="twelve columns ">
507
-
508
-
509
- < div class ="z-depth-1 ">
510
- < pre > < code class ="plotly_js "> var trace1 = {
511
- x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
512
- y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
513
- type: 'scatter'
514
- };
515
- var trace2 = {
516
- x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
517
- y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
518
- type: 'scatter'
519
- };
520
- var data = [trace1, trace2];
521
- var layout = {
522
- xaxis: {
523
- showgrid: true,
524
- zeroline: true,
525
- showline: true,
526
- mirror: 'ticks',
527
- gridcolor: '#bdbdbd',
528
- gridwidth: 2,
529
- zerolinecolor: '#969696',
530
- zerolinewidth: 4,
531
- linecolor: '#636363',
532
- linewidth: 6
533
- },
534
- yaxis: {
535
- showgrid: true,
536
- zeroline: true,
537
- showline: true,
538
- mirror: 'ticks',
539
- gridcolor: '#bdbdbd',
540
- gridwidth: 2,
541
- zerolinecolor: '#969696',
542
- zerolinewidth: 4,
543
- linecolor: '#636363',
544
- linewidth: 6
545
- }
546
- };
547
- Plotly.newPlot('myDiv', data, layout);
548
- </ code > </ pre >
549
- </ div >
550
-
551
-
552
- </ div >
553
-
554
- < div class ="twelve columns ">
555
- < div class ="border " style ="text-align:center; ">
556
-
557
- < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/f7d6db9779e017aad66b28c45121a9b6/?height=500&theme-id=15263&default-tab=result "
558
- style ="width: 100%; height: 550px; border: none; "> </ iframe >
559
-
560
- </ div >
561
- </ div >
562
-
563
- </ div >
564
- </ div >
565
-
566
- </ div >
567
-
568
500
< div class ="section ">
569
501
< div class ="row auto-eg-padding ">
570
502
< div class =" row twelve columns ">
@@ -654,6 +586,74 @@ <h4 id="set-and-style-axes-title-labels-and-ticks"><a class="no_underline plot-b
654
586
655
587
</ div >
656
588
589
+ < div class ="section ">
590
+ < div class ="row auto-eg-padding ">
591
+ < div class =" row twelve columns ">
592
+ < h4 id ="styling-and-coloring-axes-and-the-zero-line "> < a class ="no_underline plot-blue " href ="#styling-and-coloring-axes-and-the-zero-line "> Styling and Coloring Axes and the Zero-Line</ a > </ h4 >
593
+ </ div >
594
+ < div class ="row ">
595
+ < div class ="twelve columns ">
596
+
597
+
598
+ < div class ="z-depth-1 ">
599
+ < pre > < code class ="plotly_js "> var trace1 = {
600
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
601
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
602
+ type: 'scatter'
603
+ };
604
+ var trace2 = {
605
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
606
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
607
+ type: 'scatter'
608
+ };
609
+ var data = [trace1, trace2];
610
+ var layout = {
611
+ xaxis: {
612
+ showgrid: true,
613
+ zeroline: true,
614
+ showline: true,
615
+ mirror: 'ticks',
616
+ gridcolor: '#bdbdbd',
617
+ gridwidth: 2,
618
+ zerolinecolor: '#969696',
619
+ zerolinewidth: 4,
620
+ linecolor: '#636363',
621
+ linewidth: 6
622
+ },
623
+ yaxis: {
624
+ showgrid: true,
625
+ zeroline: true,
626
+ showline: true,
627
+ mirror: 'ticks',
628
+ gridcolor: '#bdbdbd',
629
+ gridwidth: 2,
630
+ zerolinecolor: '#969696',
631
+ zerolinewidth: 4,
632
+ linecolor: '#636363',
633
+ linewidth: 6
634
+ }
635
+ };
636
+ Plotly.newPlot('myDiv', data, layout);
637
+ </ code > </ pre >
638
+ </ div >
639
+
640
+
641
+ </ div >
642
+
643
+ < div class ="twelve columns ">
644
+ < div class ="border " style ="text-align:center; ">
645
+
646
+ < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/f7d6db9779e017aad66b28c45121a9b6/?height=500&theme-id=15263&default-tab=result "
647
+ style ="width: 100%; height: 550px; border: none; "> </ iframe >
648
+
649
+ </ div >
650
+ </ div >
651
+
652
+ </ div >
653
+ </ div >
654
+
655
+ </ div >
656
+
657
657
< div class ="section ">
658
658
< div class ="row auto-eg-padding ">
659
659
< div class =" row twelve columns ">
@@ -765,39 +765,32 @@ <h4 id="toggling-axes-lines-ticks-labels-and-autorange"><a class="no_underline p
765
765
< div class ="section ">
766
766
< div class ="row auto-eg-padding ">
767
767
< div class =" row twelve columns ">
768
- < h4 id ="enumerated-ticks-with-tickvals- and-ticktext "> < a class ="no_underline plot-blue " href ="#enumerated-ticks-with-tickvals- and-ticktext " > Enumerated Ticks with Tickvals and Ticktext </ a > </ h4 >
768
+ < h4 id ="nonnegative-tozero- and-normal-rangemode "> < a class ="no_underline plot-blue " href ="#nonnegative-tozero- and-normal-rangemode " > < code > nonnegative </ code > , < code > tozero </ code > , and < code > normal </ code > Rangemode </ a > </ h4 >
769
769
</ div >
770
770
< div class ="row ">
771
771
< div class ="twelve columns ">
772
772
773
773
774
774
< div class ="z-depth-1 ">
775
- < pre > < code class ="plotly_js "> Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/stockdata.csv', function(err, rows){
776
- function unpack(rows, key) {
777
- return rows.map(function(row)
778
- { return row[key]; });}
779
-
780
- var trace1 = {
781
- x:unpack(rows, 'Date'),
782
- y: unpack(rows, 'IBM'),
783
- mode: 'markers',
784
- marker: {
785
- size: 7,
786
- line: {
787
- width: 0.5},
788
- opacity: 0.8},
789
- type: 'scatter'
790
- };
791
-
775
+ < pre > < code class ="plotly_js "> var data = [
776
+ {
777
+ x: [2, 4, 6],
778
+ y: [-3, 0, 3],
779
+ type: 'scatter'
780
+ }
781
+ ];
792
782
var layout = {
793
- title: 'IBM Stock Data: Jan 2007 - Mar 2016',
794
- xaxis: {tickvals:['2007-01-01', '2007-09-01', '2008-01-01', '2008-09-01', '2009-01-01', '2010-01-01', '2011-01-01', '2011-02-14', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
795
- ticktext : ['2007', 'Financial Crisis Starts', '2008', 'Financial Crisis Ends', '2009', '2010', '2011', 'IBM wins Jeopardy!', '2012', '2013', '2014', '2015', '2016']},
796
- }
797
-
798
- var data = [trace1];
783
+ showlegend: false,
784
+ xaxis: {
785
+ rangemode: 'tozero',
786
+ autorange: true
787
+ },
788
+ yaxis: {
789
+ rangemode: 'nonnegative',
790
+ autorange: true
791
+ }
792
+ };
799
793
Plotly.newPlot('myDiv', data, layout);
800
- });
801
794
</ code > </ pre >
802
795
</ div >
803
796
@@ -807,7 +800,7 @@ <h4 id="enumerated-ticks-with-tickvals-and-ticktext"><a class="no_underline plot
807
800
< div class ="twelve columns ">
808
801
< div class ="border " style ="text-align:center; ">
809
802
810
- < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/ozYOEg /?height=500&theme-id=15263&default-tab=result "
803
+ < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/10e8cfd24616e2ee37ce316442f00b35 /?height=500&theme-id=15263&default-tab=result "
811
804
style ="width: 100%; height: 550px; border: none; "> </ iframe >
812
805
813
806
</ div >
@@ -821,32 +814,39 @@ <h4 id="enumerated-ticks-with-tickvals-and-ticktext"><a class="no_underline plot
821
814
< div class ="section ">
822
815
< div class ="row auto-eg-padding ">
823
816
< div class =" row twelve columns ">
824
- < h4 id ="nonnegative-tozero-and-normal-rangemode "> < a class ="no_underline plot-blue " href ="#nonnegative-tozero-and-normal-rangemode " > < code > nonnegative </ code > , < code > tozero </ code > , and < code > normal </ code > Rangemode </ a > </ h4 >
817
+ < h4 id ="enumerated-ticks-with-tickvals-and-ticktext "> < a class ="no_underline plot-blue " href ="#enumerated-ticks-with-tickvals-and-ticktext " > Enumerated Ticks with Tickvals and Ticktext </ a > </ h4 >
825
818
</ div >
826
819
< div class ="row ">
827
820
< div class ="twelve columns ">
828
821
829
822
830
823
< div class ="z-depth-1 ">
831
- < pre > < code class ="plotly_js "> var data = [
832
- {
833
- x: [2, 4, 6],
834
- y: [-3, 0, 3],
835
- type: 'scatter'
836
- }
837
- ];
838
- var layout = {
839
- showlegend: false,
840
- xaxis: {
841
- rangemode: 'tozero',
842
- autorange: true
843
- },
844
- yaxis: {
845
- rangemode: 'nonnegative',
846
- autorange: true
847
- }
824
+ < pre > < code class ="plotly_js "> Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/stockdata.csv', function(err, rows){
825
+ function unpack(rows, key) {
826
+ return rows.map(function(row)
827
+ { return row[key]; });}
828
+
829
+ var trace1 = {
830
+ x:unpack(rows, 'Date'),
831
+ y: unpack(rows, 'IBM'),
832
+ mode: 'markers',
833
+ marker: {
834
+ size: 7,
835
+ line: {
836
+ width: 0.5},
837
+ opacity: 0.8},
838
+ type: 'scatter'
848
839
};
840
+
841
+ var layout = {
842
+ title: 'IBM Stock Data: Jan 2007 - Mar 2016',
843
+ xaxis: {tickvals:['2007-01-01', '2007-09-01', '2008-01-01', '2008-09-01', '2009-01-01', '2010-01-01', '2011-01-01', '2011-02-14', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
844
+ ticktext : ['2007', 'Financial Crisis Starts', '2008', 'Financial Crisis Ends', '2009', '2010', '2011', 'IBM wins Jeopardy!', '2012', '2013', '2014', '2015', '2016']},
845
+ }
846
+
847
+ var data = [trace1];
849
848
Plotly.newPlot('myDiv', data, layout);
849
+ });
850
850
</ code > </ pre >
851
851
</ div >
852
852
@@ -856,7 +856,7 @@ <h4 id="nonnegative-tozero-and-normal-rangemode"><a class="no_underline plot-blu
856
856
< div class ="twelve columns ">
857
857
< div class ="border " style ="text-align:center; ">
858
858
859
- < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/10e8cfd24616e2ee37ce316442f00b35 /?height=500&theme-id=15263&default-tab=result "
859
+ < iframe id ="auto-examples " src ="https://codepen.io/plotly/embed/ozYOEg /?height=500&theme-id=15263&default-tab=result "
860
860
style ="width: 100%; height: 550px; border: none; "> </ iframe >
861
861
862
862
</ div >
0 commit comments