push updated cluster titles to svg data

src/shiny/server.R

@@ -125,6 +125,13 @@ function(input, output) {
     #write assignemnts to topics text file
   })
 
+  observeEvent(input$topics, {
+    if (is.null(data()))
+      return(NULL)
+
+    js$updateTitles(cluster.titles())
+  })
+
   bubbles.data <- reactive({
     if (is.null(data()))
       return(NULL)

src/shiny/ui.R

@@ -21,8 +21,8 @@ fluidPage(
   includeCSS("www/styling.css"),
   #tags$script(src="https://d3js.org/d3.v3.min.js"),
   #tags$script(src="bubbles.js"),
-  #useShinyjs(),
-  #extendShinyjs(script="www/bubbles.js"),
+  useShinyjs(),
+  extendShinyjs(script="www/bubbles.js"),
   sidebarLayout(
     sidebarPanel(width=3,
       titlePanel("Topic Aggregation"),

src/shiny/www/bubbles.js

@@ -1,22 +1,7 @@
-shinyjs.init = function() {
-  //Circle Data Set
-  var circleData = [
-    { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
-    { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
+shinyjs.updateTitles = function(titles) {
+  var svg = d3.select(".bubbles svg");
 
-  //Create the SVG Viewport
-  var svgContainer = d3.select("svg");
-
-  //Add circles to the svgContainer
-  var circles = svgContainer.selectAll("circle")
-                           .data(circleData)
-                           .enter()
-                           .append("circle");
-
-  //Add the circle attributes
-  var circleAttributes = circles
-                         .attr("cx", function (d) { return d.cx; })
-                         .attr("cy", function (d) { return d.cy; })
-                         .attr("r", function (d) { return d.radius; })
-                         .style("fill", function (d) { return d.color; });
+  svg.traverseTree(svg.data, function(node) {
+    node.terms = titles[node.id].split(" ");
+  });
 };