evolvingweb · dberga · Dec 31, 2013 · Dec 31, 2013 · Dec 31, 2013 · Dec 31, 2013
diff --git a/README.md b/README.md
@@ -1,3 +1,18 @@
+* Play with the [DEMO page with both widgets][9]
+    * If demo page does not work (solr server is down) check the [static pdf demo files][12] 
+
+# BubbleChartWidget
+
+BubbleChartWidget is a widget implemented in .js which is implemented using AbstractFacetWidget structure and uses facets taken from the m AJAX Solr.
+This witget uses the d3.js library to represent its data. 
+* See the widget code [BubbleChartWidget.js][10]
+
+# TreeMapWidget
+
+TreeMapWidget is a widget implemented in .js which is implemented using AbstractFacetWidget structure and uses facets taken from the m AJAX Solr.
+This witget uses the d3.js library to represent its data. 
+* See the widget code [TreeMapWidget.js][11]
+
 # AJAX Solr
 
 AJAX Solr is a JavaScript library for creating user interfaces to [Apache Solr][1].
@@ -23,3 +38,7 @@ Documentation is generated by [JsDoc Toolkit][4] with the command:
 [6]: http://github.com/evolvingweb/ajax-solr
 [7]: http://wiki.github.com/evolvingweb/ajax-solr/reuters-tutorial
 [8]: http://groups.google.com/group/ajax-solr
+[9]: http://rawgithub.com/dberga/ajax-solr/master/examples/reuters/index.html
+[10]: https://github.com/dberga/ajax-solr/blob/master/examples/reuters/widgets/BubbleChartWidget.js
+[11]: https://github.com/dberga/ajax-solr/blob/master/examples/reuters/widgets/TreeMapWidget.js
+[12]: https://github.com/dberga/ajax-solr/tree/master/demo
diff --git a/demo/AJAX Solr1.pdf b/demo/AJAX Solr1.pdf
diff --git a/demo/AJAX Solr2.pdf b/demo/AJAX Solr2.pdf
diff --git a/examples/.DS_Store b/examples/.DS_Store
diff --git a/examples/reuters/.DS_Store b/examples/reuters/.DS_Store
diff --git a/examples/reuters/css/reuters.css b/examples/reuters/css/reuters.css
@@ -6,9 +6,13 @@
 body {
   background: #fff url(../images/header.gif) repeat-x;
   color: #333;
-  font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 18px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  margin: auto;
+  position: relative;
+  width: 960px;
+  height: 500px;
 }
 img {
   border: none;
@@ -110,6 +114,7 @@ a:hover {
 #search_help {
   font-size: 80%;
 }
+
 .tagcloud {
   padding: 10px 15px 0;
 }
@@ -158,3 +163,19 @@ font-size: 170%;
 a.tagcloud_size_10 {
 font-size: 180%;
 }
+
+
+/*  NODE */
+.node {
+  border: solid 1px white;
+  font: 10px sans-serif;
+  line-height: 12px;
+  overflow: hidden;
+  position: absolute;
+  text-indent: 2px;
+
+}
+
+
+}
+
diff --git a/examples/reuters/index.html b/examples/reuters/index.html
@@ -23,6 +23,13 @@
   <script src="widgets/AutocompleteWidget.js"></script>
   <script src="widgets/CountryCodeWidget.js"></script>
   <script src="widgets/CalendarWidget.js"></script>
+
+
+  <script src="http://d3js.org/d3.v3.min.js"></script>
+  <script src="widgets/BubbleChartWidget.js"></script>
+  <script src="widgets/TreeMapWidget.js"></script>
+
+
 </head>
 <body>
   <div id="wrap"> 
@@ -59,14 +66,22 @@ <h2>Top Organisations</h2>
 
       <h2>Top Exchanges</h2>
       <div class="tagcloud" id="exchanges"></div>
-
-      <h2>By Country</h2>
+
+		<h2>Bubbles</h2>
+		  <div id="bubbles_topics"></div>
+		<h2>TreeMap</h2>
+		  <div id="treemap_topics"></div>
+
+
+
+      <!--<h2>By Country</h2>
       <div id="countries"></div>
       <div id="preview"></div>
 
       <h2>By Date</h2>
       <div id="calendar"></div>
-
+		-->
+
       <div class="clear"></div>
     </div>
     <div class="clear"></div>

diff --git a/examples/reuters/js/reuters.js b/examples/reuters/js/reuters.js
@@ -4,8 +4,9 @@ var Manager;
 
   $(function () {
     Manager = new AjaxSolr.Manager({
-      solrUrl: 'http://evolvingweb.ca/solr/reuters/'
+      solrUrl: 'http://reuters-demo.tree.ewdev.ca:9090/reuters/'
     });
+
     Manager.addWidget(new AjaxSolr.ResultWidget({
       id: 'result',
       target: '#docs'
@@ -20,7 +21,12 @@ var Manager;
         $('#pager-header').html($('<span></span>').text('displaying ' + Math.min(total, offset + 1) + ' to ' + Math.min(total, offset + perPage) + ' of ' + total));
       }
     }));
-    var fields = [ 'topics', 'organisations', 'exchanges' ];
+
+
+
+	var fields = [ 'topics', 'organisations', 'exchanges' ];
+
+
     for (var i = 0, l = fields.length; i < l; i++) {
       Manager.addWidget(new AjaxSolr.TagcloudWidget({
         id: fields[i],
@@ -37,7 +43,9 @@ var Manager;
       target: '#search',
       fields: [ 'topics', 'organisations', 'exchanges' ]
     }));
-    Manager.addWidget(new AjaxSolr.CountryCodeWidget({
+
+
+	/*Manager.addWidget(new AjaxSolr.CountryCodeWidget({
       id: 'countries',
       target: '#countries',
       field: 'countryCodes'
@@ -46,7 +54,32 @@ var Manager;
       id: 'calendar',
       target: '#calendar',
       field: 'date'
-    }));
+    }));*/
+
+
+	Manager.addWidget(new AjaxSolr.BubbleChartWidget({
+		id: 'bubbles_topics',
+		target: '#' + 'bubbles_topics',
+		field: 'topics',
+		diameter: 382,
+		padding: 1.5
+	  }));
+
+
+	  Manager.addWidget(new AjaxSolr.TreeMapWidget({
+                id: 'treemap_topics',
+                target: '#' + 'treemap_topics',
+                field: 'topics',
+                width: 382,
+                height: 202,
+                margin: {top: 40,right: 10,bottom: 10,left: 10}
+      }));
+
+
+
+
+
+
     Manager.init();
     Manager.store.addByValue('q', '*:*');
     var params = {

diff --git a/examples/reuters/widgets/.DS_Store b/examples/reuters/widgets/.DS_Store
diff --git a/examples/reuters/widgets/BubbleChartWidget.js b/examples/reuters/widgets/BubbleChartWidget.js
@@ -0,0 +1,117 @@
+(function ($) {
+
+	AjaxSolr.BubbleChartWidget = AjaxSolr.AbstractFacetWidget.extend({
+		afterRequest: function () 
+		{
+            $(this.target).empty();
+			//default values
+	        var diameter = 960;
+			var padding = 1.5;
+			var env = this;
+
+			if (this.manager.response.facet_counts.facet_fields[this.field] === undefined) {
+				$(this.target).html('no items found in current selection');
+				return;
+			}
+
+
+				//objectedItems is my list of facets & counts
+				var maxCount = 0;
+				var objectedItems2 = [];
+				for (var facet in this.manager.response.facet_counts.facet_fields[this.field]) {
+				  var count = parseInt(this.manager.response.facet_counts.facet_fields[this.field][facet]);
+				  if (count > maxCount) {
+					maxCount = count;
+				  }
+				  objectedItems2.push({ name: facet, children : [{name: facet, size: count}] });
+				}
+
+
+				//see print values
+					/*for(var i=0; i<objectedItems2.length;i++){
+						document.write(objectedItems2[i].name); 
+						document.write(",");
+						document.write(objectedItems2[i].children[0].size);
+						document.write("\n");
+					}*/
+
+				var json1= JSON.stringify(objectedItems2);
+				//document.write(json1);
+
+				//adding root
+				var json2 = '{ "name" : "node" , "children" : ';
+				json2 += json1;
+				json2 += '}';
+				//document.write(json2); 
+
+				  diameter = this.diameter;
+				  padding = this.padding;
+				var format = d3.format(",d");
+				var color = d3.scale.category20c();
+
+				var bubble = d3.layout.pack()
+					.sort(null)
+					.size([diameter, diameter])
+					.padding(padding);
+
+				var svg = d3.select(this.target).append("svg")
+					.attr("width", diameter)
+					.attr("height", diameter)
+					.attr("class", "bubble");
+
+
+				d3.json("", function(error, root) {
+					root=JSON.parse( json2 );
+				  var node = svg.selectAll(".node")
+					  .data(bubble.nodes(classes(root))
+					  .filter(function(d) { return !d.children; }))
+					.enter().append("g")
+					  .attr("class", "node")
+					  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+				  node.append("title")
+					  .text(function(d) { return d.className + ": " + format(d.value); });
+
+
+				  node.append("circle")
+					  .attr("r", function(d) { return d.r; })
+					  .style("fill", function(d) { return color(d.packageName); });
+
+				  node.append("text")
+					  .attr("dy", ".3em")
+					  .style("text-anchor", "middle")
+					  .text(function(d) { return d.className.substring(0, d.r / 3); })
+					  .on("click", function(d) { //clickhandler function
+						  var self = env, meth = env.multivalue ? 'add' : 'set';			
+							self[meth].call(self, d.className);
+							self.doRequest();
+					   }); 
+
+				});
+
+				// Returns a flattened hierarchy containing all leaf nodes under the root.
+				function classes(root) {
+				  var classes = [];
+
+				  function recurse(name, node) {
+					if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
+					else classes.push({packageName: name, className: node.name, value: node.size});
+				  }
+
+				  recurse(null, root);
+				  return {children: classes};
+				}
+
+				d3.select(self.frameElement).style("height", diameter + "px");
+
+				//$(this.target).empty();
+
+
+
+		}
+
+
+	});
+
+})(jQuery);
+