Skip to content

Commit 1ef41cb

Browse files
barionlegbarionleg
authored
Create index4.html
1 parent e270278 commit 1ef41cb

File tree

1 file changed

+235
-0
lines changed

1 file changed

+235
-0
lines changed

‎docs/examples/index4.html

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta http-equiv="x-ua-compatible" content="ie=edge">
8+
<link rel="shortcut icon" href="https://vega.github.io/favicon.ico"/>
9+
<link rel="stylesheet" href="/vega/assets/syntax.css">
10+
<link rel="stylesheet" href="/vega/assets/main.css">
11+
<script src="/vega/vega.min.js"></script>
12+
<!-- Begin Jekyll SEO tag v2.8.0 -->
13+
<title>Radial Tree Layout Example | Vega</title>
14+
<meta name="generator" content="Jekyll v3.10.0" />
15+
<meta property="og:title" content="Radial Tree Layout Example" />
16+
<meta property="og:locale" content="en_US" />
17+
<meta name="description" content="Vega - A Visualization Grammar. Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG." />
18+
<meta property="og:description" content="Vega - A Visualization Grammar. Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG." />
19+
<link rel="canonical" href="https://vega.github.io/vega/examples/radial-tree-layout/" />
20+
<meta property="og:url" content="https://vega.github.io/vega/examples/radial-tree-layout/" />
21+
<meta property="og:site_name" content="Vega" />
22+
<meta property="og:image" content="https://vega.github.io/vega/examples/img/radial-tree-layout.png" />
23+
<meta property="og:type" content="website" />
24+
<meta name="twitter:card" content="summary_large_image" />
25+
<meta property="twitter:image" content="https://vega.github.io/vega/examples/img/radial-tree-layout.png" />
26+
<meta property="twitter:title" content="Radial Tree Layout Example" />
27+
<meta name="twitter:site" content="@vega_vis" />
28+
<script type="application/ld+json">
29+
{"@context":"https://schema.org","@type":"WebPage","description":"Vega - A Visualization Grammar. Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.","headline":"Radial Tree Layout Example","image":"https://vega.github.io/vega/examples/img/radial-tree-layout.png","url":"https://vega.github.io/vega/examples/radial-tree-layout/"}</script>
30+
<!-- End Jekyll SEO tag -->
31+
32+
<div class="example">
33+
34+
<div class="embed">
35+
<div id="radial-tree-layout" class="view"></div>
36+
<a href="../radial-tree-layout.vg.json">View Source</a>
37+
<a id="radial-tree-layout-png" href="#">Export PNG</a>
38+
<a id="radial-tree-layout-svg" href="#">Export SVG</a>
39+
</div>
40+
</head>
41+
<body>
42+
43+
44+
<div class="fill">
45+
46+
47+
<script>
48+
var spec = {
49+
"$schema": "https://vega.github.io/schema/vega/v5.json",
50+
"description": "An example of a radial layout for a node-link diagram of hierarchical data.",
51+
"width": "container",
52+
"height": 920,
53+
"padding": 5,
54+
"autosize": "true",
55+
56+
"signals": [
57+
{
58+
"name": "labels", "value": true,
59+
"bind": {"input": "checkbox"}
60+
},
61+
{
62+
"name": "radius", "value": 280,
63+
"bind": {"input": "range", "min": 20, "max": 600}
64+
},
65+
{
66+
"name": "extent", "value": 360,
67+
"bind": {"input": "range", "min": 0, "max": 360, "step": 1}
68+
},
69+
{
70+
"name": "rotate", "value": 0,
71+
"bind": {"input": "range", "min": 0, "max": 360, "step": 1}
72+
},
73+
{
74+
"name": "layout", "value": "tidy",
75+
"bind": {"input": "radio", "options": ["tidy", "cluster"]}
76+
},
77+
{
78+
"name": "links", "value": "line",
79+
"bind": {
80+
"input": "select",
81+
"options": ["line", "curve", "diagonal", "orthogonal"]
82+
}
83+
},
84+
{ "name": "originX", "update": "width / 2" },
85+
{ "name": "originY", "update": "height / 2" }
86+
],
87+
88+
"data": [
89+
{
90+
"name": "tree",
91+
"url": "data/flare.json",
92+
"transform": [
93+
{
94+
"type": "stratify",
95+
"key": "id",
96+
"parentKey": "parent"
97+
},
98+
{
99+
"type": "tree",
100+
"method": {"signal": "layout"},
101+
"size": [1, {"signal": "radius"}],
102+
"as": ["alpha", "radius", "depth", "children"]
103+
},
104+
{
105+
"type": "formula",
106+
"expr": "(rotate + extent * datum.alpha + 270) % 360",
107+
"as": "angle"
108+
},
109+
{
110+
"type": "formula",
111+
"expr": "PI * datum.angle / 180",
112+
"as": "radians"
113+
},
114+
{
115+
"type": "formula",
116+
"expr": "inrange(datum.angle, [90, 270])",
117+
"as": "leftside"
118+
},
119+
{
120+
"type": "formula",
121+
"expr": "originX + datum.radius * cos(datum.radians)",
122+
"as": "x"
123+
},
124+
{
125+
"type": "formula",
126+
"expr": "originY + datum.radius * sin(datum.radians)",
127+
"as": "y"
128+
}
129+
]
130+
},
131+
{
132+
"name": "links",
133+
"source": "tree",
134+
"transform": [
135+
{ "type": "treelinks" },
136+
{
137+
"type": "linkpath",
138+
"shape": {"signal": "links"}, "orient": "radial",
139+
"sourceX": "source.radians", "sourceY": "source.radius",
140+
"targetX": "target.radians", "targetY": "target.radius"
141+
}
142+
]
143+
}
144+
],
145+
146+
"scales": [
147+
{
148+
"name": "color",
149+
"type": "linear",
150+
"range": {"scheme": "magma"},
151+
"domain": {"data": "tree", "field": "depth"},
152+
"zero": true
153+
}
154+
],
155+
156+
"marks": [
157+
{
158+
"type": "path",
159+
"from": {"data": "links"},
160+
"encode": {
161+
"update": {
162+
"x": {"signal": "originX"},
163+
"y": {"signal": "originY"},
164+
"path": {"field": "path"},
165+
"stroke": {"value": "#ccc"}
166+
}
167+
}
168+
},
169+
{
170+
"type": "symbol",
171+
"from": {"data": "tree"},
172+
"encode": {
173+
"enter": {
174+
"size": {"value": 100},
175+
"stroke": {"value": "#fff"}
176+
},
177+
"update": {
178+
"x": {"field": "x"},
179+
"y": {"field": "y"},
180+
"fill": {"scale": "color", "field": "depth"}
181+
}
182+
}
183+
},
184+
{
185+
"type": "text",
186+
"from": {"data": "tree"},
187+
"encode": {
188+
"enter": {
189+
"text": {"field": "name"},
190+
"fontSize": {"value": 9},
191+
"baseline": {"value": "middle"}
192+
},
193+
"update": {
194+
"x": {"field": "x"},
195+
"y": {"field": "y"},
196+
"dx": {"signal": "(datum.leftside ? -1 : 1) * 6"},
197+
"angle": {"signal": "datum.leftside ? datum.angle - 180 : datum.angle"},
198+
"align": {"signal": "datum.leftside ? 'right' : 'left'"},
199+
"opacity": {"signal": "labels ? 1 : 0"}
200+
}
201+
}
202+
}
203+
]
204+
}
205+
;
206+
207+
function image(view, type) {
208+
return function(event) {
209+
event.preventDefault();
210+
view.toImageURL(type).then(function(url) {
211+
var link = document.createElement('a');
212+
link.setAttribute('href', url);
213+
link.setAttribute('target', '_blank');
214+
link.setAttribute('download', 'radial-tree-layout.' + type);
215+
link.dispatchEvent(new MouseEvent('click'));
216+
}).catch(function(error) { console.error(error); });
217+
};
218+
}
219+
220+
var view = new vega.View(vega.parse(spec), {
221+
loader: vega.loader({baseURL: '/vega/'}),
222+
logLevel: vega.Warn,
223+
renderer: 'svg'
224+
}).initialize('#radial-tree-layout').hover().run();
225+
226+
document.querySelector('#radial-tree-layout-png').addEventListener('click', image(view, 'png'));
227+
document.querySelector('#radial-tree-layout-svg').addEventListener('click', image(view, 'svg'));
228+
</script>
229+
230+
231+
232+
</div>
233+
234+
</body>
235+
</html>

0 commit comments

Comments
 (0)