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

Skip to content

Commit 17dc302

Browse files
authored
Merge pull request plotly#1300 from plotly/sunburst-docs
Add sunburst documentation
2 parents 2b23c87 + c0e27fd commit 17dc302

8 files changed

+1031
-0
lines changed
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
name: Basic Sunburst Chart
3+
plot_url: https://codepen.io/plotly/embed/mgwJOY/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: sunburst
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
var data = [{
11+
type: "sunburst",
12+
labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
13+
parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
14+
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
15+
outsidetextfont: {size: 20, color: "#377eb8"},
16+
leaf: {opacity: 0.4},
17+
marker: {line: {width: 2}},
18+
}];
19+
20+
var layout = {
21+
margin: {l: 0, r: 0, b: 0, t: 0},
22+
width: 500,
23+
height: 500
24+
};
25+
26+
27+
Plotly.newPlot('myDiv', data, layout);
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
name: Large Number of Slices
3+
plot_url: https://codepen.io/plotly/embed/mgwJLd/?height=463&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: sunburst
6+
order: 4
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
11+
function unpack(rows, key) {
12+
return rows.map(function(row) { return row[key]; });
13+
}
14+
15+
var data = [
16+
{
17+
type: "sunburst",
18+
maxdepth: 3,
19+
ids: unpack(rows, 'ids'),
20+
labels: unpack(rows, 'labels'),
21+
parents:unpack(rows, 'parents')
22+
}
23+
];
24+
25+
var layout = {
26+
margin: {l: 0, r: 0, b: 0, t:0},
27+
sunburstcolorway:[
28+
"#636efa","#EF553B","#00cc96","#ab63fa","#19d3f3",
29+
"#e763fa", "#FECB52","#FFA15A","#FF6692","#B6E880"
30+
],
31+
extendsunburstcolorway: true
32+
};
33+
34+
35+
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
36+
})
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
name: Sunburst with Repeated Labels
3+
plot_url: https://codepen.io/plotly/embed/GLEJWV/?height=463&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: sunburst
6+
order: 3
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var data = [{
12+
type: "sunburst",
13+
ids: [
14+
"North America", "Europe", "Australia", "North America - Football", "Soccer",
15+
"North America - Rugby", "Europe - Football", "Rugby",
16+
"Europe - American Football","Australia - Football", "Association",
17+
"Australian Rules", "Autstralia - American Football", "Australia - Rugby",
18+
"Rugby League", "Rugby Union"
19+
],
20+
labels: [
21+
"North<br>America", "Europe", "Australia", "Football", "Soccer", "Rugby",
22+
"Football", "Rugby", "American<br>Football", "Football", "Association",
23+
"Australian<br>Rules", "American<br>Football", "Rugby", "Rugby<br>League",
24+
"Rugby<br>Union"
25+
],
26+
parents: [
27+
"", "", "", "North America", "North America", "North America", "Europe",
28+
"Europe", "Europe","Australia", "Australia - Football", "Australia - Football",
29+
"Australia - Football", "Australia - Football", "Australia - Rugby",
30+
"Australia - Rugby"
31+
],
32+
outsidetextfont: {size: 20, color: "#377eb8"},
33+
// leaf: {opacity: 0.4},
34+
marker: {line: {width: 2}},
35+
}];
36+
37+
var layout = {
38+
margin: {l: 0, r: 0, b: 0, t:0},
39+
sunburstcolorway:["#636efa","#ef553b","#00cc96"],
40+
};
41+
42+
43+
Plotly.newPlot('myDiv', data, layout);
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Javascript Graphing Library D3.js-based Sunburst Plots | Examples | Plotly
3+
name: Sunburst Charts
4+
permalink: javascript/sunburst-charts/
5+
description: How to make a D3.js-based sunburst chart in javascript. Visualize hierarchical data spanning outward radially from root to leaves.
6+
layout: user-guide
7+
thumbnail: thumbnail/sunburst.gif
8+
language: plotly_js
9+
has_thumbnail: true
10+
display_as: basic
11+
order: 8.1
12+
---
13+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","sunburst" | sort: "order" %}
14+
{% include auto_examples.html examples=examples %}
15+
16+
See <a href="https://plot.ly/javascript/reference/#sunburst">https://plot.ly/javascript/reference/#sunburst</a> for more information and chart attribute options!

_posts/python/basic/sunburst/2015-06-30-sunburst-charts.html

Lines changed: 292 additions & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)