diff --git a/demosR/usage-animated-bfs.R b/demosR/usage-animated-bfs.R
new file mode 100644
index 00000000..f3a47219
--- /dev/null
+++ b/demosR/usage-animated-bfs.R
@@ -0,0 +1,71 @@
+# original demo: http://js.cytoscape.org/demos/animated-bfs/
+# code: https://github.com/cytoscape/cytoscape.js/tree/master/documentation/demos/animated-bfs
+#
+# note: animation not implemented yet, please refer to code.
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a')),
+  list('data' = list('id' = 'b')),
+  list('data' = list('id' = 'c')),
+  list('data' = list('id' = 'd')),
+  list('data' = list('id' = 'e')),
+  list('data' = list('id' = 'a"e', 'weight' = 1, 'source' = 'a', 'target' = 'e')),
+  list('data' = list('id' = 'ab', 'weight' = 3, 'source' = 'a', 'target' = 'b')),
+  list('data' = list('id' = 'be', 'weight' = 4, 'source' = 'b', 'target' = 'e')),
+  list('data' = list('id' = 'bc', 'weight' = 5, 'source' = 'b', 'target' = 'c')),
+  list('data' = list('id' = 'ce', 'weight' = 6, 'source' = 'c', 'target' = 'e')),
+  list('data' = list('id' = 'cd', 'weight' = 2, 'source' = 'c', 'target' = 'd')),
+  list('data' = list('id' = 'de', 'weight' = 7, 'source' = 'd', 'target' = 'e'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list(
+          'name' = 'breadthfirst',
+          'directed' = TRUE,
+          'roots' = '#a',
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'content' = 'data(id)'
+            )
+          ), list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'bezier',
+              'target-arrow-shape' = 'triangle',
+              'width' = 4,
+              'line-color' = '#ddd',
+              'target-arrow-color' = '#ddd'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0,
+          'z-index' = 999
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-breadthfirst-layout.R b/demosR/usage-breadthfirst-layout.R
new file mode 100644
index 00000000..73977b44
--- /dev/null
+++ b/demosR/usage-breadthfirst-layout.R
@@ -0,0 +1,128 @@
+# original demo: http://js.cytoscape.org/demos/images-breadthfirst-layout/
+#
+# note: click animation is not implemented
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'cat')),
+  list('data' = list('id' = 'bird')),
+  list('data' = list('id' = 'ladybug')),
+  list('data' = list('id' = 'aphid')),
+  list('data' = list('id' = 'rose')),
+  list('data' = list('id' = 'grasshopper')),
+  list('data' = list('id' = 'plant')),
+  list('data' = list('id' = 'wheat')),
+  list('data' = list('source' = 'cat', 'target' = 'bird')),
+  list('data' = list('source' = 'bird', 'target' = 'ladybug')),
+  list('data' = list('source' = 'bird', 'target' = 'grasshopper')),
+  list('data' = list('source' = 'grasshopper', 'target' = 'plant')),
+  list('data' = list('source' = 'grasshopper', 'target' = 'wheat')),
+  list('data' = list('source' = 'ladybug', 'target' = 'aphid')),
+  list('data' = list('source' = 'aphid', 'target' = 'rose'))
+)
+
+# define stylesheet
+stylesheet <- list(
+  list(
+    'selector' = 'node',
+    'style' = list(
+      'height' = 80,
+      'width' = 80,
+      'background-fit' = 'cover',
+      'border-color' = '#000',
+      'border-width' = 3,
+      'border-opacity' = 0.5
+    )
+  ),
+  list(
+    'selector' = 'edge',
+    'style' = list(
+      'curve-style' = 'bezier',
+      'width' = 6,
+      'target-arrow-shape' = 'triangle',
+      'line-color' = '#ffaaaa',
+      'target-arrow-color' = '#ffaaaa'
+    )
+  ),
+  list(
+    'selector' = '#bird',
+    'style' = list(
+      'background-image' = 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#cat',
+    'style' = list(
+      'background-image' = 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#ladybug',
+    'style' = list(
+      'background-image' = 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#aphid',
+    'style' = list(
+      'background-image' = 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#rose',
+    'style' = list(
+      'background-image' = 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#grasshopper',
+    'style' = list(
+      'background-image' = 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
+    )
+  ),
+  list(
+    'selector' = '#plant',
+    'style' = list(
+      'background-image' = 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
+    )
+  ),
+  list(
+    'selector' = '#wheat',
+    'style' = list(
+      'background-image' = 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
+    )
+  )
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        stylesheet = stylesheet,
+        layout = list(
+          'name' = 'breadthfirst',
+          'directed' = TRUE,
+          'padding' = 10
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-circle-layout.R b/demosR/usage-circle-layout.R
new file mode 100644
index 00000000..576d28ac
--- /dev/null
+++ b/demosR/usage-circle-layout.R
@@ -0,0 +1,53 @@
+# original demo: http://js.cytoscape.org/demos/circle-layout/
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# load data
+elements <- fromJSON("demos/data/circle-layout/data.json")
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list('name' = 'circle'),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'height' = 20,
+              'width' = 20,
+              'background-color' = '#e8e406'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'haystack',
+              'haystack-radius' = 0,
+              'width' = 5,
+              'opacity' = 0.5,
+              'line-color' = '#f2f08c'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0,
+          'z-index' = 999
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-compound-nodes.R b/demosR/usage-compound-nodes.R
new file mode 100644
index 00000000..cb20df65
--- /dev/null
+++ b/demosR/usage-compound-nodes.R
@@ -0,0 +1,83 @@
+# original demo: http://js.cytoscape.org/demos/compound-nodes/
+#
+
+library(dash)
+library(dashCytoscape)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a', 'parent' = 'b'), 'position' = list('x' = 215, 'y' = 85)),
+  list('data' = list('id' = 'b')),
+  list('data' = list('id' = 'c', 'parent' = 'b'), 'position' = list('x' = 300, 'y' = 85)),
+  list('data' = list('id' = 'd'), 'position' = list('x' = 215, 'y' = 175)),
+  list('data' = list('id' = 'e')),
+  list('data' = list('id' = 'f', 'parent' = 'e'), 'position' = list('x' = 300, 'y' = 175)),
+  list('data' = list('id' = 'ad', 'source' = 'a', 'target' = 'd')),
+  list('data' = list('id' = 'eb', 'source' = 'e', 'target' = 'b'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        boxSelectionEnabled = FALSE,
+        autounselectify = TRUE,
+        layout = list(
+          'name' = 'preset',
+          'padding' = 5
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'content' = 'data(id)',
+              'text-valign' = 'center',
+              'text-halign' = 'center'
+            )
+          ),
+          list(
+            'selector' = '$node > node',
+            'style' = list(
+              'padding-top' = '10px',
+              'padding-left' = '10px',
+              'padding-bottom' = '10px',
+              'padding-right' = '10px',
+              'text-valign' = 'top',
+              'text-halign' = 'center',
+              'background-color' = '#bbb'
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'background-color' = 'black',
+              'line-color' = 'black',
+              'target-arrow-color' = 'black',
+              'source-arrow-color' = 'black'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'target-arrow-shape' = 'triangle'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-events.R b/demosR/usage-events.R
new file mode 100644
index 00000000..a4efff0c
--- /dev/null
+++ b/demosR/usage-events.R
@@ -0,0 +1,280 @@
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define elements
+basic_elements <- list(
+  list(
+    'data' = list('id' = 'one', 'label' = 'Node 1'),
+    'position' = list('x' = 50, 'y' = 50)
+  ),
+  list(
+    'data' = list('id' = 'two', 'label' = 'Node 2'),
+    'position' = list('x' = 200, 'y' = 200)
+  ),
+  list(
+    'data' = list('id' = 'three', 'label' = 'Node 3'),
+    'position' = list('x' = 100, 'y' = 150)
+  ),
+  list(
+    'data' = list('id' = 'four', 'label' = 'Node 4'),
+    'position' = list('x' = 400, 'y' = 50)
+  ),
+  list(
+    'data' = list('id' = 'five', 'label' = 'Node 5'),
+    'position' = list('x' = 250, 'y' = 100)
+  ),
+  list(
+    'data' = list('id' = 'six', 'label' = 'Node 6', 'parent' = 'three'),
+    'position' = list('x' = 150, 'y' = 150)
+  ),
+  list(
+    'data' = list(
+      'id' = 'one-two',
+      'source' = 'one',
+      'target' = 'two',
+      'label' = 'Edge from Node1 to Node2'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'one-five',
+      'source' = 'one',
+      'target' = 'five',
+      'label' = 'Edge from Node 1 to Node 5'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'two-four',
+      'source' = 'two',
+      'target' = 'four',
+      'label' = 'Edge from Node 2 to Node 4'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'three-five',
+      'source' = 'three',
+      'target' = 'five',
+      'label' = 'Edge from Node 3 to Node 5'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'three-two',
+      'source' = 'three',
+      'target' = 'two',
+      'label' = 'Edge from Node 3 to Node 2'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'four-four',
+      'source' = 'four',
+      'target' = 'four',
+      'label' = 'Edge from Node 4 to Node 4'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'four-six',
+      'source' = 'four',
+      'target' = 'six',
+      'label' = 'Edge from Node 4 to Node 6'
+    )
+  ),
+  list(
+    'data' = list(
+      'id' = 'five-one',
+      'source' = 'five',
+      'target' = 'one',
+      'label' = 'Edge from Node 5 to Node 1'
+    )
+  )
+)
+
+styles <- list(
+  'json-output' = list(
+    'overflow-y' = 'scroll',
+    'height' = 'calc(50% - 25px)',
+    'border' = 'thin lightgrey solid'
+  ),
+  'tab' = list(
+    'height' = 'calc(98vh - 115px)'
+  )
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      htmlDiv(
+        className = 'eight columns',
+        children = list(
+          cytoCytoscape(
+            id = 'cytoscape',
+            elements = basic_elements,
+            layout = list(
+              'name' = 'preset'
+            ),
+            style = list(
+              'height' = '95vh',
+              'width' = '100%'
+            )
+          )
+        )
+      ),
+      htmlDiv(
+        className = 'four columns',
+        children = list(
+          dccTabs(
+            id = 'tabs',
+            children = list(
+              dccTab(
+                label = 'Tap Objects',
+                children = list(
+                  htmlDiv(
+                    style = styles[['tab']],
+                    children = list(
+                      htmlP('Node Object JSON:'),
+                      htmlPre(
+                        id = 'tap-node-json-output',
+                        style = styles[['json-output']]
+                      ),
+                      htmlP('Edge Object JSON:'),
+                      htmlPre(
+                        id = 'tap-edge-json-output',
+                        style = styles[['json-output']]
+                      )
+                    )
+                  )
+                )
+              ),
+              dccTab(
+                label = 'Tap Data',
+                children = list(
+                  htmlDiv(
+                    style = styles[['tab']],
+                    children = list(
+                      htmlP('Node Data JSON:'),
+                      htmlPre(
+                        id = 'tap-node-data-json-output',
+                        style = styles[['json-output']]
+                      ),
+                      htmlP('Edge Data JSON:'),
+                      htmlPre(
+                        id = 'tap-edge-data-json-output',
+                        style = styles[['json-output']]
+                      )
+                    )
+                  )
+                )
+              ),
+              dccTab(label = 'Mouseover Data', children = list(
+                  htmlDiv(
+                    style = styles[['tab']],
+                    children = list(
+                      htmlP('Node Data JSON:'),
+                      htmlPre(
+                        id = 'mouseover-node-data-json-output',
+                        style = styles[['json-output']]
+                      ),
+                      htmlP('Edge Data JSON:'),
+                      htmlPre(
+                        id = 'mouseover-edge-data-json-output',
+                        style = styles[['json-output']]
+                      )
+                    )
+                  )
+                )
+              ),
+              dccTab(
+                label = 'Selected Data',
+                children = list(
+                  htmlDiv(
+                    style = styles[['tab']],
+                    children = list(
+                      htmlP('Node Data JSON:'),
+                      htmlPre(
+                        id = 'selected-node-data-json-output',
+                        style = styles[['json-output']]
+                      ),
+                      htmlP('Edge Data JSON:'),
+                      htmlPre(
+                        id = 'selected-edge-data-json-output',
+                        style = styles[['json-output']]
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    )
+  )
+)
+
+# define callbacks
+app$callback(
+  output = list(id = 'tap-node-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'tapNode')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'tap-edge-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'tapEdge')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'tap-node-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'tapNodeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'tap-edge-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'tapEdgeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'mouseover-node-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'mouseoverNodeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'mouseover-edge-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'mouseoverEdgeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'selected-node-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'selectedNodeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+app$callback(
+  output = list(id = 'selected-edge-data-json-output', property = 'children'),
+  params = list(input(id = 'cytoscape', property = 'selectedEdgeData')),
+  function(data) {
+    return(toJSON(data, pretty = TRUE, null = 'null'))
+  }
+)
+
+app$run_server()
diff --git a/demosR/usage-grid-layout.R b/demosR/usage-grid-layout.R
new file mode 100644
index 00000000..bb640ed8
--- /dev/null
+++ b/demosR/usage-grid-layout.R
@@ -0,0 +1,53 @@
+# original demo: http://js.cytoscape.org/demos/grid-layout/
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# load data
+elements <- fromJSON("demos/data/grid-layout/data.json")
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list('name' = 'grid'),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'height' = 20,
+              'width' = 20,
+              'background-color' = '#18e018'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'haystack',
+              'haystack-radius' = 0,
+              'width' = 5,
+              'opacity' = 0.5,
+              'line-color' = '#a2efa2'
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0,
+          'z-index' = 999
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-multiple-instances.R b/demosR/usage-multiple-instances.R
new file mode 100644
index 00000000..7dd63c9c
--- /dev/null
+++ b/demosR/usage-multiple-instances.R
@@ -0,0 +1,144 @@
+# original demo: http://js.cytoscape.org/demos/multiple-instances/
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a', 'foo' = 3, 'bar' = 5, 'baz' = 7)),
+  list('data' = list('id' = 'b', 'foo' = 6, 'bar' = 1, 'baz' = 3)),
+  list('data' = list('id' = 'c', 'foo' = 2, 'bar' = 3, 'baz' = 6)),
+  list('data' = list('id' = 'd', 'foo' = 7, 'bar' = 1, 'baz' = 2)),
+  list('data' = list('id' = 'e', 'foo' = 2, 'bar' = 3, 'baz' = 5)),
+  list('data' = list('id' = 'ae', 'weight' = 1, 'source' = 'a', 'target' = 'e')),
+  list('data' = list('id' = 'ab', 'weight' = 3, 'source' = 'a', 'target' = 'b')),
+  list('data' = list('id' = 'be', 'weight' = 4, 'source' = 'b', 'target' = 'e')),
+  list('data' = list('id' = 'bc', 'weight' = 5, 'source' = 'b', 'target' = 'c')),
+  list('data' = list('id' = 'ce', 'weight' = 6, 'source' = 'c', 'target' = 'e')),
+  list('data' = list('id' = 'cd', 'weight' = 2, 'source' = 'c', 'target' = 'd')),
+  list('data' = list('id' = 'de', 'weight' = 7, 'source' = 'd', 'target' = 'e'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape-top',
+        elements = elements,
+        layout = list(
+          'name' = 'circle',
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'background-color' = '#B3767E',
+              'width' = 'mapData(baz, 0, 10, 10, 40)',
+              'height' = 'mapData(baz, 0, 10, 10, 40)',
+              'content' = 'data(id)'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'line-color' = '#F2B1BA',
+              'target-arrow-color' = '#F2B1BA',
+              'width' = 2,
+              'target-arrow-shape' = 'circle',
+              'opacity' = 0.8
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'background-color' = 'black',
+              'line-color' = 'black',
+              'target-arrow-color' = 'black',
+              'source-arrow-color' = 'black',
+              'opacity' = 1
+            )
+          ),
+          list(
+            'selector' = '.faded',
+            'style' = list(
+              'opacity' = 0.25,
+              'text-opacity' = 0
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '50%',
+          'position' = 'absolute',
+          'background-color' = '#FAEDEF',
+          'left' = 0,
+          'top' = 0
+        )
+      ),
+      cytoCytoscape(
+        id = 'cytoscape-bottom',
+        elements = elements,
+        layout = list(
+          'name' = 'breadthfirst',
+          'directed' = TRUE,
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'background-color' = '#6272A3',
+              'shape' = 'rectangle',
+              'width' = 'mapData(foo, 0, 10, 10, 30)',
+              'height' = 'mapData(bar, 0, 10, 10, 50)',
+              'content' = 'data(id)'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'width' = 'mapData(weight, 0, 10, 3, 9)',
+              'line-color' = '#B1C1F2',
+              'target-arrow-color' = '#B1C1F2',
+              'target-arrow-shape' = 'triangle',
+              'opacity' = 0.8
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'background-color' = 'black',
+              'line-color' = 'black',
+              'target-arrow-color' = 'black',
+              'source-arrow-color' = 'black',
+              'opacity' = 1
+            )
+          ),
+          list(
+            'selector' = '.faded',
+            'style' = list(
+              'opacity' = 0.25,
+              'text-opacity' = 0
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '50%',
+          'position' = 'absolute',
+          'background-color' = '#EDF1FA',
+          'left' = 0,
+          'top' = '50%',
+          'border-top' = '1px solid #ccc'
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-pie-style.R b/demosR/usage-pie-style.R
new file mode 100644
index 00000000..2851bcda
--- /dev/null
+++ b/demosR/usage-pie-style.R
@@ -0,0 +1,91 @@
+# original demo: http://js.cytoscape.org/demos/pie-style/
+
+library(dash)
+library(dashCytoscape)
+library(jsonlite)
+
+app <- Dash$new()
+
+# define data
+elements <- list(
+  list('data' = list('id' = 'a', 'foo' = 3, 'bar' = 5, 'baz' = 2)),
+  list('data' = list('id' = 'b', 'foo' = 6, 'bar' = 1, 'baz' = 3)),
+  list('data' = list('id' = 'c', 'foo' = 2, 'bar' = 3, 'baz' = 5)),
+  list('data' = list('id' = 'd', 'foo' = 7, 'bar' = 1, 'baz' = 2)),
+  list('data' = list('id' = 'e', 'foo' = 2, 'bar' = 3, 'baz' = 5)),
+  list('data' = list('id' = 'ae', 'weight' = 1, 'source' = 'a', 'target' = 'e')),
+  list('data' = list('id' = 'ab', 'weight' = 3, 'source' = 'a', 'target' = 'b')),
+  list('data' = list('id' = 'be', 'weight' = 4, 'source' = 'b', 'target' = 'e')),
+  list('data' = list('id' = 'bc', 'weight' = 5, 'source' = 'b', 'target' = 'c')),
+  list('data' = list('id' = 'ce', 'weight' = 6, 'source' = 'c', 'target' = 'e')),
+  list('data' = list('id' = 'cd', 'weight' = 2, 'source' = 'c', 'target' = 'd')),
+  list('data' = list('id' = 'de', 'weight' = 7, 'source' = 'd', 'target' = 'e'))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list(
+          'name' = 'circle',
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'width' = '60px',
+              'height' = '60px',
+              'content' = 'data(id)',
+              'pie-size' = '80%',
+              'pie-1-background-color' = '#E8747C',
+              'pie-1-background-size' = 'mapData(foo, 0, 10, 0, 100)',
+              'pie-2-background-color' = '#74CBE8',
+              'pie-2-background-size' = 'mapData(bar, 0, 10, 0, 100)',
+              'pie-3-background-color' = '#74E883',
+              'pie-3-background-size' = 'mapData(baz, 0, 10, 0, 100)'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'bezier',
+              'width' = 4,
+              'target-arrow-shape' = 'triangle',
+              'opacity' = 0.5
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'background-color' = 'black',
+              'line-color' = 'black',
+              'target-arrow-color' = 'black',
+              'source-arrow-color' = 'black',
+              'opacity' = 1
+            )
+          ),
+          list(
+            'selector' = '.faded',
+            'style' = list(
+              'opacity' = 0.25,
+              'text-opacity' = 0
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)
diff --git a/demosR/usage-visual-style.R b/demosR/usage-visual-style.R
new file mode 100644
index 00000000..8045befb
--- /dev/null
+++ b/demosR/usage-visual-style.R
@@ -0,0 +1,98 @@
+# original demo: http://js.cytoscape.org/demos/visual-style/
+#
+# note: animation has not been implemented yet, please refer to code.
+library(dash)
+library(dashCytoscape)
+
+app <- Dash$new()
+
+# define elements
+elements <- list(
+  list('data' = list('id' = 'j', 'name' = 'Jerry', 'weight' = 65, 'faveColor' = '#6FB1FC', 'faveShape' = 'triangle')),
+  list('data' = list('id' = 'e', 'name' = 'Elaine', 'weight' = 45, 'faveColor' = '#EDA1ED', 'faveShape' = 'ellipse')),
+  list('data' = list('id' = 'k', 'name' = 'Kramer', 'weight' = 75, 'faveColor' = '#86B342', 'faveShape' = 'octagon')),
+  list('data' = list('id' = 'g', 'name' = 'George', 'weight' = 70, 'faveColor' = '#F5A45D', 'faveShape' = 'rectangle')),
+  list('data' = list('source' = 'j', 'target' = 'e', 'faveColor' = '#6FB1FC', 'strength' = 90)),
+  list('data' = list('source' = 'j', 'target' = 'k', 'faveColor' = '#6FB1FC', 'strength' = 70)),
+  list('data' = list('source' = 'j', 'target' = 'g', 'faveColor' = '#6FB1FC', 'strength' = 80)),
+  list('data' = list('source' = 'e', 'target' = 'j', 'faveColor' = '#EDA1ED', 'strength' = 95)),
+  list('data' = list('source' = 'e', 'target' = 'k', 'faveColor' = '#EDA1ED', 'strength' = 60), 'classes' = 'questionable'),
+  list('data' = list('source' = 'k', 'target' = 'j', 'faveColor' = '#86B342', 'strength' = 100)),
+  list('data' = list('source' = 'k', 'target' = 'e', 'faveColor' = '#86B342', 'strength' = 100)),
+  list('data' = list('source' = 'k', 'target' = 'g', 'faveColor' = '#86B342', 'strength' = 100)),
+  list('data' = list('source' = 'g', 'target' = 'j', 'faveColor' = '#F5A45D', 'strength' = 90))
+)
+
+# define app layout
+app$layout(
+  htmlDiv(
+    list(
+      cytoCytoscape(
+        id = 'cytoscape',
+        elements = elements,
+        layout = list(
+          'name' = 'cose',
+          'padding' = 10
+        ),
+        stylesheet = list(
+          list(
+            'selector' = 'node',
+            'style' = list(
+              'shape' = 'data(faveShape)',
+              'width' = 'mapData(weight, 40, 80, 20, 60)',
+              'content' = 'data(name)',
+              'text-valign' = 'center',
+              'text-outline-width' = 2,
+              'text-outline-color' = 'data(faveColor)',
+              'background-color' = 'data(faveColor)',
+              'color' = '#fff'
+            )
+          ),
+          list(
+            'selector' = 'edge',
+            'style' = list(
+              'curve-style' = 'bezier',
+              'opacity' = 0.666,
+              'width' = 'mapData(strength, 70, 100, 2, 6)',
+              'target-arrow-shape' = 'triangle',
+              'source-arrow-shape' = 'circle',
+              'line-color' = 'data(faveColor)',
+              'source-arrow-color' = 'data(faveColor)',
+              'target-arrow-color' = 'data(faveColor)'
+            )
+          ),
+          list(
+            'selector' = ':selected',
+            'style' = list(
+              'border-width' = 3,
+              'border-color' = '#333'
+            )
+          ),
+          list(
+            'selector' = 'edge.questionable',
+            'style' = list(
+              'line-style' = 'dotted',
+              'target-arrow-shape' = 'diamond'
+            )
+          ),
+          list(
+            'selector' = '.faded',
+            'style' = list(
+              'opacity' = 0.25,
+              'text-opacity' = 0
+            )
+          )
+        ),
+        style = list(
+          'width' = '100%',
+          'height' = '100%',
+          'position' = 'absolute',
+          'left' = 0,
+          'top' = 0
+        )
+      )
+    )
+  )
+)
+
+app$run_server(debug = TRUE)