Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 366e4dd

Browse files
dikshagabhadikshagabha
committed
examples updated to codepen
1 parent 15d9182 commit 366e4dd

7 files changed

+119
-71
lines changed

‎_posts/plotly_js/histogram/2015-04-09-basic-histogram.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
22
name: Basic Histogram
3-
plot_url: https://plot.ly/~PlotBot/52
3+
plot_url: https://codepen.io/plotly/embed/OXXwOY/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
77
order: 4
88
sitemap: false
99
---
1010
var x = [];
11-
for (var i = 0; i < 500; i ++) {
11+
for (var i = 0; i < 500; i ++) {
1212
x[i] = Math.random();
1313
}
1414

1515
var data = [
1616
{
1717
x: x,
18-
type: 'histogram'
18+
type: 'histogram',
19+
marker: {
20+
color: 'rgba(100,250,100,0.7)',
21+
},
1922
}
2023
];
2124
Plotly.newPlot('myDiv', data);

‎_posts/plotly_js/histogram/2015-04-09-histogram_plotly_js_index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
display_as: statistical
1212
redirect_from: javascript-graphing-library/histograms/
1313
plottype: histogram
14-
order: 3
14+
order: 15
1515
---
1616
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","histogram" | sort: "order" %}
1717
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/histogram/2015-04-09-horizontal-histogram.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
22
name: Horizontal Histogram
3-
plot_url: https://plot.ly/~PlotBot/53
3+
plot_url: https://codepen.io/plotly/embed/dXXjJK/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
77
order: 5
88
sitemap: false
99
---
1010
var y = [];
11-
for (var i = 0; i &lt; 500; i ++) {
11+
for (var i = 0; i < 500; i ++) {
1212
y[i] = Math.random();
1313
}
1414

1515
var data = [
1616
{
1717
y: y,
18-
type: 'histogram'
18+
type: 'histogram',
19+
marker: {
20+
color: 'pink',
21+
},
1922
}
2023
];
2124
Plotly.newPlot('myDiv', data);

‎_posts/plotly_js/histogram/2015-04-09-normalized-histogram.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
name: Normalized Histogram
3-
plot_url: https://plot.ly/~PlotBot/52
3+
plot_url: https://codepen.io/plotly/embed/RRqpVP/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
@@ -16,7 +16,10 @@
1616
{
1717
x: x,
1818
type: 'histogram',
19-
histnorm: 'probability'
19+
histnorm: 'probability',
20+
marker: {
21+
color: 'rgb(255,255,100)',
22+
},
2023
}
2124
];
22-
Plotly.newPlot('potato', data);
25+
Plotly.newPlot('myDiv', data);

‎_posts/plotly_js/histogram/2015-04-09-overlaid-histogram.html

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,38 @@
11
---
22
name: Overlaid Histgram
3-
plot_url: https://plot.ly/~PlotBot/54
3+
plot_url: https://codepen.io/plotly/embed/EyypQv/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
77
order: 6
88
sitemap: false
99
---
10-
var x0 = [];
1110
var x1 = [];
12-
for (var i = 0; i &lt; 500; i ++) {
13-
x0[i] = Math.random();
14-
x1[i] = Math.random() + 1;
11+
var x2 = [];
12+
for (var i = 1; i < 500; i++)
13+
{
14+
k = Math.random();
15+
x1.push(Math.random() + 1);
16+
x2.push(Math.random() + 1.1);
1517
}
16-
1718
var trace1 = {
18-
x: x0,
19-
opacity: 0.75,
20-
type: 'histogram'
19+
x: x1,
20+
type: "histogram",
21+
opacity: 0.5,
22+
marker: {
23+
color: 'green',
24+
},
2125
};
2226
var trace2 = {
23-
x: x1,
24-
opacity: 0.75,
25-
type: 'histogram'
27+
x: x2,
28+
type: "histogram",
29+
opacity: 0.6,
30+
marker: {
31+
color: 'red',
32+
},
2633
};
34+
2735
var data = [trace1, trace2];
28-
var layout = {barmode: 'overlay'};
29-
Plotly.newPlot('myDiv', data, layout);
36+
var layout = {barmode: "overlay"};
37+
Plotly.newPlot("myDiv", data, layout);
38+

‎_posts/plotly_js/histogram/2015-04-09-stacked-histogram.html

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,38 @@
11
---
22
name: Stacked Histograms
3-
plot_url: https://plot.ly/~PlotBot/56
3+
plot_url: https://codepen.io/plotly/embed/BzqwbE/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
77
order: 7
88
sitemap: false
99
---
10-
var x0 = Math.random() * 500;
11-
var x1 = Math.random() * 500 + 1;
10+
var x1 = [];
11+
var y1 = [];
12+
var y2 = [];
13+
for (var i = 1; i < 500; i++)
14+
{
15+
k = Math.random();
16+
x1.push(k);
17+
y1.push(Math.random() + 1);
18+
y2.push(Math.random() + 2);
19+
}
1220
var trace1 = {
13-
x: x0,
14-
type: 'histogram'
21+
x: x1,
22+
y: y1,
23+
type: "histogram",
24+
marker: {
25+
color: 'pink',
26+
},
1527
};
1628
var trace2 = {
1729
x: x1,
18-
type: 'histogram'
30+
y: y2,
31+
type: "histogram",
32+
marker: {
33+
color: 'lightblue',
34+
},
1935
};
2036
var data = [trace1, trace2];
21-
var layout = {barmode: 'stack'};
22-
Plotly.newPlot('myDiv', data, layout);
37+
var layout = {barmode: "stack"};
38+
Plotly.newPlot("myDiv", data, layout);

‎_posts/plotly_js/histogram/2015-04-09-style-histogram.html

Lines changed: 53 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
11
---
22
name: Colored and Styled Histograms
3-
plot_url: https://plot.ly/~PlotBot/55
3+
plot_url: https://codepen.io/plotly/embed/KrGyXN/?height=601&theme-id=15263&default-tab=result
44
arrangement: horizontal
55
language: plotly_js
66
suite: histogram
77
order: 8
88
sitemap: false
99
---
10-
var x0 = [];
1110
var x1 = [];
12-
for (var i = 0; i &lt; 500; i ++) {
13-
x0[i] = Math.random();
14-
x1[i] = Math.random() + 1;
11+
var x2 = [];
12+
var y1 = [];
13+
var y2 = [];
14+
for (var i = 1; i < 500; i++)
15+
{
16+
k = Math.random();
17+
x1.push(k*5);
18+
x2.push(k*10);
19+
y1.push(k);
20+
y2.push(k*2);
1521
}
16-
1722
var trace1 = {
18-
x: x0,
19-
histnorm: 'count',
23+
x: x1,
24+
y: y1,
2025
name: 'control',
21-
autobinx: false,
22-
xbins: {
23-
start: -3.2,
24-
end: 2.8,
25-
size: 0.2
26-
},
26+
autobinx: false,
27+
histnorm: "count",
2728
marker: {
28-
color: 'fuchsia',
29-
line: {
30-
color: 'grey',
31-
width: 0
32-
},
33-
opacity: 0.75
34-
},
35-
type: 'histogram'
29+
color: "rgba(255, 100, 102, 0.7)",
30+
line: {
31+
color: "rgba(255, 100, 102, 1)",
32+
width: 1
33+
}
34+
},
35+
opacity: 0.5,
36+
type: "histogram",
37+
xbins: {
38+
end: 2.8,
39+
size: 0.06,
40+
start: .5
41+
}
3642
};
3743
var trace2 = {
38-
x: x1,
39-
name: 'experimental',
40-
autobinx: false,
41-
xbins: {
42-
start: -1.8,
43-
end: 4.2,
44-
size: 0.2
45-
},
46-
marker: {color: 'rgb(255, 217, 102)'},
47-
opacity: 0.75,
48-
type: 'histogram'
44+
x: x2,
45+
y: y2,
46+
autobinx: false,
47+
marker: {
48+
color: "rgba(100, 200, 102, 0.7)",
49+
line: {
50+
color: "rgba(100, 200, 102, 1)",
51+
width: 1
52+
}
53+
},
54+
name: "experimental",
55+
opacity: 0.75,
56+
type: "histogram",
57+
xbins: {
58+
end: 4,
59+
size: 0.06,
60+
start: -3.2
61+
62+
}
4963
};
5064
var data = [trace1, trace2];
5165
var layout = {
52-
title: 'Sampled Results',
53-
xaxis: {title: 'Value'},
54-
yaxis: {title: 'Count'},
55-
barmode: 'overlay',
56-
bargap: 0.25,
57-
bargroupgap: 0.3
66+
bargap: 0.05,
67+
bargroupgap: 0.2,
68+
barmode: "overlay",
69+
title: "Sampled Results",
70+
xaxis: {title: "Value"},
71+
yaxis: {title: "Count"}
5872
};
5973
Plotly.newPlot('myDiv', data, layout);

0 commit comments

Comments
 (0)