Comments of review 14/03/2017

This commit is contained in:
conker84 2017-03-14 14:24:34 +01:00
parent b31b7b7ac1
commit e98ca7a670
4 changed files with 49 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View file

@ -114,3 +114,51 @@ If you click on a node or edge on the bottom of the paragraph you find a list of
This kind of graph can be easily *flatten* in order to support other visualization formats provided by Zeppelin.
<img src="../assets/themes/zeppelin/img/screenshots/display_network_flatten.png" />
### How to use it?
An example of a simple graph
```
%spark
print(s"""
%network {
"nodes": [
{"id": 1},
{"id": 2},
{"id": 3}
],
"edges": [
{"source": 1, "target": 2, "id" : 1},
{"source": 2, "target": 3, "id" : 2},
{"source": 1, "target": 2, "id" : 3},
{"source": 1, "target": 2, "id" : 4},
{"source": 2, "target": 1, "id" : 5},
{"source": 2, "target": 1, "id" : 6}
]
}
""")
```
that will look like:
<img src="../assets/themes/zeppelin/img/screenshots/display_simple_network.png" />
A little more complex graph:
```
%spark
print(s"""
%network {
"nodes": [{"id": 1, "label": "User", "data": {"fullName":"Andrea Santurbano"}},{"id": 2, "label": "User", "data": {"fullName":"Lee Moon Soo"}},{"id": 3, "label": "Project", "data": {"name":"Zeppelin"}}],
"edges": [{"source": 2, "target": 1, "id" : 1, "label": "HELPS"},{"source": 2, "target": 3, "id" : 2, "label": "CREATE"},{"source": 1, "target": 3, "id" : 3, "label": "CONTRIBUTE_TO", "data": {"oldPR": "https://github.com/apache/zeppelin/pull/1582"}}],
"labels": {"User": "#8BC34A", "Project": "#3071A9"},
"directed": true,
"types": ["HELPS", "CREATE", "CONTRIBUTE_TO"]
}
""")
```
that will look like:
<img src="../assets/themes/zeppelin/img/screenshots/display_complex_network.png" />

View file

@ -40,7 +40,7 @@ limitations under the License.
<h4>Globals</h4>
<div class="form-check col-xs-4">
<div class="form-group">
<label for="{{$id}}_charge">Minumin scale to show node and edge labels</label>
<label for="{{$id}}_charge">Minimum scale to show node and edge labels</label>
<input type="text" class="form-control" ng-model="config.d3Graph.zoom.minScale" id="{{$id}}_minScale" />
</div>
</div>