diff --git a/org.eclipse.osbp.xtext.chart/META-INF/MANIFEST.MF b/org.eclipse.osbp.xtext.chart/META-INF/MANIFEST.MF
index 6ab4ca4..ddee591 100644
--- a/org.eclipse.osbp.xtext.chart/META-INF/MANIFEST.MF
+++ b/org.eclipse.osbp.xtext.chart/META-INF/MANIFEST.MF
@@ -70,7 +70,8 @@
  org.eclipse.osbp.xtext.table.common;bundle-version="0.9.0",
  org.eclipse.osbp.utils.ui;bundle-version="0.9.0",
  org.eclipse.osbp.xtext.action;bundle-version="0.9.0";visibility:=reexport,
- org.eclipse.e4.ui.workbench;bundle-version="1.4.0"
+ org.eclipse.e4.ui.workbench;bundle-version="1.4.0",
+ sizereporter.osgi;bundle-version="0.1.4"
 Import-Package: com.vaadin.ui,
  javax.validation,
  javax.validation.constraints,
diff --git a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.xtend b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.xtend
index 89058e5..1294fbd 100644
--- a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.xtend
+++ b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.xtend
@@ -19,12 +19,18 @@
  
 package org.eclipse.osbp.xtext.chart.jvmmodel
 
+import com.ejt.vaadin.sizereporter.ComponentResizeListener
+import com.ejt.vaadin.sizereporter.SizeReporter
+import com.vaadin.server.StreamResource
+import com.vaadin.shared.ui.JavaScriptComponentState
+import com.vaadin.ui.AbstractJavaScriptComponent
 import com.vaadin.ui.Component
 import com.vaadin.ui.VerticalLayout
 import elemental.json.JsonException
 import java.util.ArrayList
 import java.util.HashMap
 import java.util.HashSet
+import java.util.List
 import java.util.Locale
 import java.util.Set
 import javax.annotation.PostConstruct
@@ -34,6 +40,8 @@
 import org.eclipse.e4.core.contexts.IEclipseContext
 import org.eclipse.e4.ui.di.Focus
 import org.eclipse.e4.ui.model.application.MApplication
+import org.eclipse.e4.ui.workbench.IPresentationEngine
+import org.eclipse.emf.common.notify.Adapter
 import org.eclipse.osbp.dsl.semantic.common.types.LAttribute
 import org.eclipse.osbp.dsl.semantic.entity.LEntity
 import org.eclipse.osbp.osgi.hybrid.api.AbstractHybridVaaclipseView
@@ -45,7 +53,9 @@
 import org.eclipse.osbp.ui.api.layout.IViewLayoutManager
 import org.eclipse.osbp.ui.api.metadata.IDSLMetadataService
 import org.eclipse.osbp.ui.api.themes.EnumCssClass
+import org.eclipse.osbp.ui.api.themes.IThemeResourceService
 import org.eclipse.osbp.ui.api.user.IUser
+import org.eclipse.osbp.xtext.action.ActionPackage
 import org.eclipse.osbp.xtext.chart.Chart
 import org.eclipse.osbp.xtext.chart.ChartAxis
 import org.eclipse.osbp.xtext.chart.ChartBar
@@ -74,26 +84,22 @@
 import org.eclipse.osbp.xtext.datamartdsl.DatamartPackage
 import org.eclipse.osbp.xtext.datamartdsl.ValueScaleEnum
 import org.eclipse.osbp.xtext.datamartdsl.jvmmodel.DatamartDSLJvmModelInferrer
+import org.eclipse.osbp.xtext.table.common.PropertyLookup
+import org.eclipse.xtext.common.types.JvmAnnotationReference
+import org.eclipse.xtext.common.types.JvmConstructor
 import org.eclipse.xtext.common.types.JvmDeclaredType
 import org.eclipse.xtext.common.types.JvmField
 import org.eclipse.xtext.common.types.JvmOperation
+import org.eclipse.xtext.common.types.JvmStringAnnotationValue
 import org.eclipse.xtext.common.types.JvmVisibility
+import org.eclipse.xtext.common.types.TypesFactory
 import org.eclipse.xtext.naming.IQualifiedNameProvider
 import org.eclipse.xtext.xbase.jvmmodel.AbstractModelInferrer
 import org.eclipse.xtext.xbase.jvmmodel.IJvmDeclaredTypeAcceptor
 import org.eclipse.xtext.xbase.jvmmodel.JvmTypesBuilder
 import org.osgi.service.event.EventHandler
 import org.slf4j.Logger
-import org.eclipse.osbp.xtext.table.common.PropertyLookup
-import org.eclipse.osbp.xtext.action.ActionPackage
-import org.eclipse.osbp.ui.api.themes.IThemeResourceService
-import org.eclipse.e4.ui.workbench.IPresentationEngine
-import com.vaadin.server.StreamResource
-import java.io.ByteArrayOutputStream
-import java.io.ByteArrayInputStream
-import javax.imageio.ImageIO
-import com.vaadin.server.StreamResource.StreamSource
-import java.io.InputStream
+import com.vaadin.annotations.JavaScript
 
 /**
  * <p>
@@ -115,7 +121,8 @@
 	@Inject extension JvmTypesBuilder
 	@Inject extension IQualifiedNameProvider
 	@Inject extension DatamartDSLJvmModelInferrer datamartInferrer
-	@Inject extension ChartDSLD3JavaComponentsCreator
+	@Inject extension D3JsJavaUtil
+	@Inject	private TypesFactory typesFactory
 	
 	/**
 	 * <p>infer method dispatches the necessary routines to build fields, setter, getter, constructors and methods of the generated code.</p> 
@@ -209,6 +216,16 @@
 			field = chart.toField("toolbarClass", _typeReferenceBuilder.typeRef('''«packageName».«chart.toolbar.name.toString.toFirstUpper»Toolbar'''))
 			type.members += field
 		}
+		field = chart.toField("panelWidth", _typeReferenceBuilder.typeRef(int))
+		type.members += field
+		field = chart.toField("panelHeight", _typeReferenceBuilder.typeRef(int))
+		type.members += field
+		field = chart.toField("splitAdapter", _typeReferenceBuilder.typeRef(Adapter.Internal))
+		type.members += field
+		field = chart.toField("resizeListener", _typeReferenceBuilder.typeRef(ComponentResizeListener))
+		type.members += field
+		field = chart.toField("sizeReporter", _typeReferenceBuilder.typeRef(SizeReporter));
+		type.members += field
 	}
 
 	/**
@@ -236,6 +253,9 @@
 				super.initView();
 				user.addUserLocaleListener(this);
 				filterGenerator.addFilterChangeListener(this);
+				// to resize the chart according to split positions of partsashcontainer - setContainerData is tracked
+				((EObject)getPart()).eAdapters().add(splitAdapter);
+				sizeReporter.addResizeListener(resizeListener);
 				eventDispatcher.addEventReceiver(this);''')]
 			])
 
@@ -247,6 +267,8 @@
 				'''
 				user.removeUserLocaleListener(this);
 				filterGenerator.removeFilterChangeListener(this);
+				((EObject)getPart()).eAdapters().remove(splitAdapter);
+				sizeReporter.removeResizeListener(resizeListener);
 				eventDispatcher.removeEventReceiver(this);
 				super.destroyView();''')]
 			])
@@ -353,6 +375,36 @@
 		parent.setSizeFull();
 		layoutManager = new ViewLayoutManager();
 		layoutManager.init(parent);
+		splitAdapter = new AdapterImpl() {
+			@Override
+			public void notifyChanged(Notification notification) {
+				if (notification.getEventType()==Notification.SET && 
+						notification.getFeatureID(UIElementImpl.class) == UiPackageImpl.UI_ELEMENT__CONTAINER_DATA)
+				{
+					log.debug("render due to split position changed");
+					renderData();
+				}
+			}
+		};
+		sizeReporter = new SizeReporter(layoutManager.getDataArea());
+		resizeListener = new ComponentResizeListener() {
+			@Override
+			public void sizeChanged(ComponentResizeEvent event) {
+				boolean changed = false;
+				if (panelWidth != event.getWidth()) {
+					changed = true;
+					panelWidth = event.getWidth();
+				}
+				if (panelHeight != event.getHeight()) {
+					changed = true;
+					panelHeight = event.getHeight();
+				}
+				if (changed) {
+					log.debug("Panel size changed : " + event.getWidth() + " x " + event.getHeight());
+					renderData();
+				}
+			}
+		};
 		datamartInstance = new «getSourceDataMartRefName(chart)»Datamart();
 		datamartInstance.setUser(user);
 		filterGenerator = new DatamartFilterGenerator(datamartInstance, eclipseContext, «chart.source.datamartRef.showCaption.booleanValue», «Integer.max(10,chart.source.datamartRef.numMultiRows)»);
@@ -401,6 +453,9 @@
 			var isCube = ((chart.source as ChartDatamart).datamartRef.source instanceof DatamartCube)
 			body = '''
 			«body»// get the results
+			if (panelWidth == 0 && panelHeight == 0) {
+				return;
+			}
 			final DerivedCellSet cellSet = datamartInstance.getResults(«IF !isCube»false, getTaskOperativeDtoClass(), getTaskInitialOperativeDtos()«ENDIF»);
 			getCoordinateSystem().clear();
 			charts.clear();
@@ -1254,4 +1309,124 @@
 			}
 		}, layoutManager.getCaption() + chart.getChartImageFormat().getFormatExtension());
 		'''
+
+	def void createJsJavaComponent(Chart chart, IJvmDeclaredTypeAcceptor acceptor){
+		val stateClassName = chart.createStateFilename
+		var chart_cls = chart.toClass(chart.createfullyQualifiedChartFilename)
+		// JavaScript-Java-State-Component creation
+		var state_cls = chart.toClass(chart.createfullyQualifiedStateFilename)
+		if (chart.charttype instanceof ChartTree){
+			val ChartTree chartTree = chart.charttype as ChartTree
+			// JavaScript-Java-Component creation
+	   		acceptor.accept(chart_cls)
+	   			.initializeLater([
+	   				superTypes += _typeReferenceBuilder.typeRef(AbstractJavaScriptComponent)
+					var JvmAnnotationReference jsAnnotationRef = chartTree.toAnnotation(typeof(JavaScript))
+					var jsAnnotationList = newArrayList(
+						"theme://plugin/org.eclipse.osbp.utils.js/org/eclipse/osbp/utils/js/d3.js",
+						"theme://plugin/org.eclipse.osbp.utils.js/org/eclipse/osbp/utils/js/d3-scale-chromatic.js", 
+						chart.createChartJsFilename
+					)
+					jsAnnotationRef.addStringValuesToAnnotation(jsAnnotationList)
+					annotations += jsAnnotationRef
+					if (chartTree.map){
+	   					it.toTreeMapConstructor(chart)
+					} else if (chartTree.collapsible) {
+	   					it.toChartConstructor(chart)
+					}
+					it.toChartOperations(chart, stateClassName)
+	   			])
+			// JavaScript-Java-State-Component creation
+	   		acceptor.accept(state_cls)
+	   			.initializeLater([
+	   				superTypes += _typeReferenceBuilder.typeRef(JavaScriptComponentState)
+					if (chartTree.map){
+						it.toTreeMapStateFields(chart)
+					} else if (chartTree.collapsible) {
+	   					it.toChartStateFields(chart)
+					}
+	   			])
+		}
+	}
+	
+	def void toChartOperations(JvmDeclaredType type, Chart chart, String stateClassName){
+		// create view
+   		type.members += chart.toMethod("getState", _typeReferenceBuilder.typeRef(stateClassName), [
+   			body = [ append('''return («stateClassName») super.getState();''')]
+   		])
+		
+	}
+
+	def getD3StateVars()
+		'''
+		getState().jsonData = _jsonData;
+		getState().htmlTagId=_htmlTagId;
+		getState().panelWidth = new Integer(width).toString();
+		getState().panelHeight = new Integer(height).toString();
+		'''
+
+	def JvmConstructor getChartConstructor(JvmDeclaredType type, Chart chart) {
+		return chart.toConstructor([
+			parameters += chart.toParameter("_htmlTagId", _typeReferenceBuilder.typeRef(String))
+			parameters += chart.toParameter("_jsonData", _typeReferenceBuilder.typeRef(String))
+			parameters += chart.toParameter("width", _typeReferenceBuilder.typeRef(int))
+			parameters += chart.toParameter("height", _typeReferenceBuilder.typeRef(int))
+			body = [ append(getD3StateVars)]
+		])
+	}
+		
+	def void toTreeMapConstructor(JvmDeclaredType type, Chart chart) {
+		var JvmConstructor constructor = type.getChartConstructor(chart)
+		constructor.parameters += chart.toParameter("dataColumns", _typeReferenceBuilder.typeRef(List, _typeReferenceBuilder.typeRef(String)))
+		constructor.body = [ append(
+		'''
+		«d3StateVars»
+		getState().dataColumnList = dataColumns;''')]
+		type.members += constructor
+	}
+	
+	def void toChartConstructor(JvmDeclaredType type, Chart chart) {
+		var JvmConstructor constructor = type.getChartConstructor(chart)
+		type.members += constructor
+	}
+	
+	def void addStringValuesToAnnotation(JvmAnnotationReference annotationRef, ArrayList<String> annotationStringList){
+		var JvmStringAnnotationValue value = typesFactory.createJvmStringAnnotationValue
+		for (annotationString : annotationStringList){
+			value.values += annotationString
+		}
+		annotationRef.explicitValues += value
+	}
+		
+	def void toTreeMapStateFields(JvmDeclaredType type, Chart chart){
+		type.toChartStateFields(chart)
+		type.members += chart.toField("dataColumnList", _typeReferenceBuilder.typeRef(List, _typeReferenceBuilder.typeRef(String)))[
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''new ArrayList<String>()''')])]
+	}
+
+	def void toChartStateFields(JvmDeclaredType type, Chart chart){
+		type.members += chart.toField("jsonData", _typeReferenceBuilder.typeRef(String))[
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''""''')])]
+		type.members += chart.toField("htmlTagId", _typeReferenceBuilder.typeRef(String))[
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''""''')])]
+		type.members += chart.toField("panelWidth", _typeReferenceBuilder.typeRef(String)) [
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''""''')])
+		]
+		type.members += chart.toField("panelHeight", _typeReferenceBuilder.typeRef(String)) [
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''""''')])
+		]
+		type.members += chart.toField("inputValue", _typeReferenceBuilder.typeRef(String))[
+			visibility = JvmVisibility::PUBLIC
+			setInitializer([append('''""''')])]
+	}
+
+	def createD3Chart(Chart chart)
+		'''
+		CellSetToD3JsonConverter jsonConverter = new CellSetToD3JsonConverter();
+		return new «val d3ChartFileName = chart.createChartFilename»«d3ChartFileName»("«d3ChartFileName»", jsonConverter.getD3JsonString(cxCellSet, «IF chart.charttype instanceof ChartTree && (chart.charttype as ChartTree).collapsible»true«ELSE»false«ENDIF»), panelWidth, panelHeight«IF chart.treeMap», jsonConverter.getDataColumnNameList(cxCellSet)«ENDIF»);'''
 }
diff --git a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.xtend b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.xtend
index 7ea699d..36b53ac 100644
--- a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.xtend
+++ b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.xtend
@@ -19,10 +19,16 @@
  
 package org.eclipse.osbp.xtext.chart.jvmmodel
 
+import com.ejt.vaadin.sizereporter.ComponentResizeEvent
+import com.ejt.vaadin.sizereporter.ComponentResizeListener
+import com.ejt.vaadin.sizereporter.SizeReporter
 import com.vaadin.data.Property.ValueChangeListener
+import com.vaadin.server.FileDownloader
 import com.vaadin.server.Page
 import com.vaadin.server.Page.Styles
 import com.vaadin.server.StreamResource
+import com.vaadin.server.StreamResource.StreamSource
+import com.vaadin.ui.Button
 import com.vaadin.ui.HorizontalLayout
 import com.vaadin.ui.JavaScriptFunction
 import com.vaadin.ui.Label
@@ -34,6 +40,7 @@
 import elemental.json.JsonObject
 import java.io.ByteArrayInputStream
 import java.io.ByteArrayOutputStream
+import java.io.InputStream
 import java.util.ArrayList
 import java.util.Collection
 import java.util.Date
@@ -91,7 +98,9 @@
 import org.eclipse.e4.ui.model.application.ui.impl.UIElementImpl
 import org.eclipse.e4.ui.model.application.ui.impl.UiPackageImpl
 import org.eclipse.e4.ui.model.application.ui.menu.MToolBarElement
+import org.eclipse.emf.common.notify.Adapter
 import org.eclipse.emf.common.notify.Notification
+import org.eclipse.emf.common.notify.impl.AdapterImpl
 import org.eclipse.emf.ecore.EObject
 import org.eclipse.emf.ecore.resource.Resource
 import org.eclipse.osbp.eventbroker.EventBrokerMsg
@@ -119,10 +128,6 @@
 import org.eclipse.xtext.xbase.compiler.ImportManager
 import org.osgi.service.event.Event
 import org.osgi.service.event.EventHandler
-import com.vaadin.ui.Button
-import com.vaadin.server.FileDownloader
-import com.vaadin.server.StreamResource.StreamSource
-import java.io.InputStream
 
 class ChartModelGenerator extends I18NModelGenerator {
 	@Inject extension IQualifiedNameProvider
@@ -229,7 +234,11 @@
 			, ImageIO
 			, ByteArrayInputStream
 			, InputStream
-			
+			, Adapter
+			, AdapterImpl
+			, SizeReporter
+			, ComponentResizeListener
+			, ComponentResizeEvent 
 		)
 		super.createAppendable(context, importManager, config)
 	}
@@ -247,16 +256,12 @@
    			for (chart : pkg.charts) {
    				if ((chart.charttype instanceof ChartTree)) {
    					var pckgName = pkg.fullyQualifiedName.toString
-//					println(pckgName)
 					var strBuilder = new StringBuilder
 					var pckgNamePath = pckgName.replaceAll("\\.","/")
-//					var propOutputFile = '''«pckgNamePath»/«chart.createChartJsFilename(chartTree)»'''
 					var propOutputFile = '''«pckgNamePath»/«chart.createChartJsFilename»'''
-//					println("********************* Property-Output *********************")
 					chart.generateJsFile(strBuilder)
 					if (strBuilder.length > 0){
 						fsa.generateFile(propOutputFile, strBuilder)
-//						println(strBuilder.toString)
 					}
    				}
    			}
@@ -276,276 +281,299 @@
 	}
 	
 	def void generateTreeMapJsFile(StringBuilder strBuilder, String chartJavaFileName){
-		strBuilder.append('''«chartJavaFileName» = function() {
-	
-		var margin = {
-		    top: 40,
-		    right: 10,
-		    bottom: 10,
-		    left: 10
-		},
-		    width = 960 - margin.left - margin.right,
-		    height = 500 - margin.top - margin.bottom;
-
-		var color = d3.scale.category20c();
-
-		function position() {
-		    this.style("left", function (d) {
-		        return d.x + "px";
-		    })
-		        .style("top", function (d) {
-		            return d.y + "px";
-		        })
-		        .style("width", function (d) {
-		            return Math.max(0, d.dx - 1) + "px";
-		        })
-		        .style("height", function (d) {
-		            return Math.max(0, d.dy - 1) + "px";
-		        });
-		}
-
-		var cxD3TreeMapJsHTMLRootComponent = this.getElement();
-		var cxD3TreeMapJsComponentHtmlTagId = this.getState().htmlTagId;
-		var checked = "";
-		var connector = this;
-		var dataColumn = "";
-
-		var preValueLabel = "";
-
-		for (var i=0;i < this.getState().dataColumnList.length;i++) {
-			if (i == 0){
-				checked = " checked";
-				preValueLabel = this.getState().dataColumnList[0];
-			} else {
-				checked = "";
+		strBuilder.append(
+		'''
+		«chartJavaFileName» = function() {
+			var margin = {
+			    top: 10,
+			    right: 10,
+			    bottom: 40,
+			    left: 10
+			};
+			var width = this.getState().panelWidth;
+			var height = this.getState().panelHeight;
+			var color = d3.scaleOrdinal(d3.schemeCategory10);
+			var divId = this.getState().htmlTagId+"_div";
+			var inputId = this.getState().htmlTagId+"_input";
+			var element = this.getElement();
+			var data = JSON.parse(this.getState().jsonData);
+			var checked = "";
+			var connector = this;
+			var dataColumn = "";
+			var preValueLabel = "";
+			for (var i=0;i < this.getState().dataColumnList.length;i++) {
+				if (i == 0){
+					checked = " checked";
+					preValueLabel = this.getState().dataColumnList[0];
+				} else {
+					checked = "";
+				}
+				dataColumn = dataColumn + "\t<label><input id='"+inputId+"' type='radio' name='mode' onChange='update(\""+this.getState().dataColumnList[i]+"\")' value='"+ this.getState().dataColumnList[i] + "'" + checked + "> "+ this.getState().dataColumnList[i] + "</label>\n";
 			}
-			dataColumn = dataColumn + "\t<label><input id=\""+this.getState().htmlTagId+"_input\" type=\"radio\" name=\"mode\" value=\""+ this.getState().dataColumnList[i] + "\"" + checked + "> "+ this.getState().dataColumnList[i] + "</label>\n";
-		}
-		var treemap = d3.layout.treemap()
-		.size([width, height])
-		.sticky(true)
-		.value(function (d) {
-			return eval("d." + preValueLabel);
-		});
-//		alert("dataColumn: " + dataColumn);
-		cxD3TreeMapJsHTMLRootComponent.innerHTML = 	"<form>\n" +
-						dataColumn +
-						"</form>\n" +
-						"<div id=\""+this.getState().htmlTagId+"_div\">" + "</div>";
-			var cxD3TreeMapJsHTMLRootComponentSelection = d3.select(cxD3TreeMapJsHTMLRootComponent).select("#"+this.getState().htmlTagId+"_div");
-//			alert("selection: " + selection);
-			var cxD3TreeMapJsHTMLRootComponentDiv = cxD3TreeMapJsHTMLRootComponentSelection.append("div")
-							    .style("position", "relative")
-								.style("width", (width + margin.left + margin.right) + "px")
-								.style("height", (height + margin.top + margin.bottom) + "px")
-							    .style("left", margin.left + "px")
-							    .style("top", margin.top + "px");
-			
-			jsonTreeMapFunction = function(jsonObj) {
-				var node = cxD3TreeMapJsHTMLRootComponentDiv.datum(jsonObj).selectAll(".node")
-				.data(treemap.nodes)
-				.enter().append("div")
-				.attr("class", "node")
-				.attr("title", function(d) { return d.children ? "" : d.tooltipName + "\n" + preValueLabel + ": " + eval("d." + preValueLabel); })
-				.call(position)
-				.style("background", function(d) { return d.children ? color(d.name) : null; })
-//					      .style("background", function(d) { return d.children ? d3.rgb("red") : null; })
-				.text(function(d) { return d.children ? null : d.name; });
-				
-				d3.select(cxD3TreeMapJsHTMLRootComponent).selectAll("#"+cxD3TreeMapJsComponentHtmlTagId+"_input").on("change", function change() {
-					var valueLabel = this.value;
-//				    alert("valueOut: " + valueOut);
-				    var value = this.value === "count"
-				        ? function() { return 1; }
-				        : function (d) { return eval("d." + valueLabel); };
-		//				        : function (d) { return d.size; };
-					  
-					    node.data(treemap.value(value).nodes)
-					      	.attr("title", function(d) { return d.children ? "" : d.tooltipName + "\n" + valueLabel + ": " + eval("d." + valueLabel); })
-					      	.transition()
-					        .duration(1500)
-					        .call(position);
-					  });
+			var treemap = d3.treemap()
+				.size([width-margin.right-margin.left, height-margin.top-margin.bottom])
+				.paddingInner(1)
+				.round(true)
+				.tile(d3.treemapSquarify);
+			element.innerHTML = "<form>\n"+dataColumn+"</form>\n"+"<div id=\""+divId+"\">" + "</div>";
+			var div = d3.select(element).select("#"+divId);
+			var treeDiv = div.append("div")
+					    .style("position", "relative")
+						.style("width", width + "px")
+						.style("height", height + "px")
+					    .style("left", margin.left + "px")
+					    .style("top", margin.top + "px");
+			update = function(valueLabel) {
+				const newRoot = d3.hierarchy(data);
+				newRoot.sum((d) => 
+					d.children).sum((d) => 
+					eval("d." + valueLabel));
+				newRoot.sort((a,b) => 
+					eval("b." + valueLabel)-eval("a." + valueLabel));
+				const node = treeDiv.datum(newRoot).selectAll(".node")
+			    	.data(treemap(newRoot).leaves())
+					.attr("class", "node")
+			      	.attr("title", function(d) { return d.children ? "" : d.data.tooltipName + "\n" + valueLabel + ": " + eval("d.data." + valueLabel); })
+			      	.transition()
+			        .duration(1500)
+					.style("left", (d) => d.x0 + "px")
+					.style("top", (d) => d.y0 + "px")
+					.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
+					.style("height", (d) => Math.max(0, d.y1 - d.y0  - 1) + "px");
+			} 
+			render = function() {
+				const root = d3.hierarchy(data);
+				root.sum((d) => 
+					d.children).sum((d) => 
+					eval("d." + preValueLabel));
+				root.sort((a,b) => 
+					eval("b." + preValueLabel)-eval("a." + preValueLabel));
+				const node = treeDiv.datum(root).selectAll(".node")
+					.data(treemap(root).leaves())
+					.enter().append("div")
+					.attr("class", "node")
+					.attr("title", 	function(d) { 
+						return d.data.tooltipName + "\n" + preValueLabel + ": " + eval("d.data." + preValueLabel);
+					})
+					.style("left", (d) => d.x0 + "px")
+					.style("top", (d) => d.y0 + "px")
+					.style("width", (d) => Math.max(0, d.x1 - d.x0 - 1) + "px")
+					.style("height", (d) => Math.max(0, d.y1 - d.y0  - 1) + "px")
+					.style("background", (d) => { 
+						while (d.depth > 2) d = d.parent; 
+						return color(d.data.name);}) 
+					.text(function(d) { 
+						return d.data.name;
+					});
 			}
-			
-			var jsonString = this.getState().jsonData;
-			jsonTreeMapFunction(JSON.parse(jsonString));
-	}
-		''')
+			render();
+		}
+	''')
 	}
 	
 	def void generateCollTreeJsFile(StringBuilder strBuilder, String chartJavaFileName){
-		strBuilder.append('''«chartJavaFileName» = function() {
-	
-	var margin = {top: 20, right: 120, bottom: 20, left: 120},
-    width = 1460 - margin.right - margin.left,
-    height = 1000 - margin.top - margin.bottom;
-    
-	var i = 0,
-	    duration = 750,
-	    cxD3TreeJsComponent_jsonRoot;
-	
-	var tree = d3.layout.tree()
-	    .size([height, width]);
-	
-	var diagonal = d3.svg.diagonal()
-	    .projection(function(d) { return [d.y, d.x]; });
-	
-	var cxD3TreeJsHTMLRootComponent = this.getElement();
-	cxD3TreeJsHTMLRootComponent.innerHTML = 	
-					"<label><input id=\""+this.getState().htmlTagId+"_input\" type=\"radio\" name=\"mode\" value=\"expand\">Expand</label>\n" +
-					"<label><input id=\""+this.getState().htmlTagId+"_input\" type=\"radio\" name=\"mode\" value=\"collapse\" checked>Collapse</label>\n" +
-					"<div id=\""+this.getState().htmlTagId+"_div\">" + "</div>";	
-	
-	var cxD3TreeJsHTMLRootComponentSelection = d3.select(cxD3TreeJsHTMLRootComponent).select("#"+this.getState().htmlTagId+"_div");
-	
-	var cxD3TreeJsHTMLRootComponentSvg = cxD3TreeJsHTMLRootComponentSelection.append("svg")
-	    .attr("width", width + margin.right + margin.left)
-	    .attr("height", height + margin.top + margin.bottom)
-	  .append("g")
-	    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-	function collapse(d) {
-		if (d.children) {
-			d._children = d.children;
-			d._children.forEach(collapse);
-			d.children = null;
-		}
-	}
-	
-	function expand(d) {
-		if (d._children) {
-			d.children = d._children;
-			d.children.forEach(expand);
-			d._children = null;
-		}
-	}
-	
-	jsonTreeFunction = function(jsonData) {
-		cxD3TreeJsComponent_jsonRoot = jsonData;
-		cxD3TreeJsComponent_jsonRoot.x0 = height / 2;
-		cxD3TreeJsComponent_jsonRoot.y0 = 0;
+		strBuilder.append(
+		'''
+		«chartJavaFileName» = function() {
+			var margin = {
+				top: 10, 
+				right: 10, 
+				bottom: 40, 
+				left: 10
+			};
+			var width = this.getState().panelWidth;
+			var height = this.getState().panelHeight;
+		    
+			var i = 0,
+			    duration = 750,
+			    root;
+			var divId = this.getState().htmlTagId+"_div";
+			var inputId = this.getState().htmlTagId+"_input";
+			var element = this.getElement();
+			var data = JSON.parse(this.getState().jsonData);
 		
-		
-		  cxD3TreeJsComponent_jsonRoot.children.forEach(collapse);
-		  update(cxD3TreeJsComponent_jsonRoot);
+			function collapse(d) {
+				if (d.children) {
+					d._children = d.children;
+					d._children.forEach(collapse);
+					d.children = null;
+				}
+			}
+			
+			function expand(d) {
+				if (d._children) {
+					d.children = d._children;
+					d.children.forEach(expand);
+					d._children = null;
+				}
+			}
+
+			change = function(value) {
+				//alert("value = " + value);
+			    if (value === "expand"){
+			    	data.children.forEach(expand);
+			    } else {
+			    	data.children.forEach(collapse);
+			    }
+			    update(data);
+			}
+
+			element.innerHTML = 	
+							"<label><input id=\""+inputId+"\" type=\"radio\" name=\"mode\" onChange='change(\"expand\")' value=\"expand\">Expand</label>\n" +
+							"<label><input id=\""+inputId+"\" type=\"radio\" name=\"mode\" onChange='change(\"collapse\")' value=\"collapse\" checked>Collapse</label>\n" +
+							"<div id=\""+divId+"\">" + "</div>";	
+			var div = d3.select(element).select("#"+divId);
+			
+			var svg = div.append("svg")
+			    .attr("width", width)
+			    .attr("height", height)
+			  	.append("g")
+			    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+			
+			function update(source) {
+				// Toggle children on click.
+				function click(d) {
+					if (d.children) {
+						d._children = d.children;
+						d.children = null;
+					} else {
+						d.children = d._children;
+						d._children = null;
+					}
+					update(d);
+				}
+				var tree = d3.tree()
+					.size([width>height?height:width, width>height?height:width]);
+				var treeData = tree(root);
+				
+				// Compute the new tree layout.
+				var nodes = treeData.descendants();
+				var links = treeData.descendants().slice(1);
+				
+				// Normalize for fixed-depth.
+				nodes.forEach(function(d) { 
+					d.y = d.depth * 180;
+				});
+				
+				// ****************** Nodes section ***************************
+				// Update the nodes
+				var node = svg.selectAll("g.node").data(nodes, function(d) {
+						return d.id || (d.id = ++i);
+					});
+				
+				// Enter any new nodes at the parent's previous position.
+				var nodeEnter = node.enter().append("g")
+					.attr("class", "node")
+					.attr("transform", function(d) {
+						return "translate(" + source.y0 + "," + source.x0 + ")";
+					})
+					.on("click", click);
+				
+				nodeEnter.append("circle")
+					.attr("class", "node")
+					.attr("r", 1e-6)
+					.style("fill", function(d) {
+						return d._children ? "lightsteelblue" : "#fff";
+					});
+				
+				nodeEnter.append("text")
+					.attr("dy", ".35em")
+					.attr("x", function(d) {
+						return d.children || d._children ? -13 : 13;
+					})
+					.attr("text-anchor", function(d) {
+						return d.children || d._children ? "end" : "start";
+					})
+					.text(function(d) { 
+						return d.data.name;
+					});
+
+				// UPDATE
+				var nodeUpdate = nodeEnter.merge(node);
+				
+				// Transition nodes to their new position.
+				nodeUpdate.transition()
+					.duration(duration)
+					.attr("transform", function(d) {
+						return "translate(" + d.y + "," + d.x + ")";
+					});
+				
+				nodeUpdate.select("circle.node")
+					.attr("r", 4.5)
+					.style("fill", function(d) {
+						return d._children ? "lightsteelblue" : "#fff";
+					})
+					.attr('cursor', 'pointer');
+				
+				// Transition exiting nodes to the parent's new position.
+				var nodeExit = node.exit().transition()
+					.duration(duration)
+					.attr("transform", function(d) {
+						return "translate(" + source.y + "," + source.x + ")";
+					})
+					.remove();
+				
+				nodeExit.select("circle").attr("r", 1e-6);
+				
+				nodeExit.select("text").style("fill-opacity", 1e-6);
+				
+				// ****************** links section ***************************
+				
+				// Update the links...
+				var link = svg.selectAll('path.link')
+					.data(links, function(d) { return d.id; });
+				
+				// Enter any new links at the parent's previous position.
+				var linkEnter = link.enter().insert('path', "g")
+					.attr("class", "link")
+					.attr('d', function(d){
+						var o = {x: source.x0, y: source.y0}
+						return diagonal(o, o)
+						});
+				
+				// UPDATE
+				var linkUpdate = linkEnter.merge(link);
+				
+				// Transition back to the parent element position
+				linkUpdate.transition()
+					.duration(duration)
+					.attr('d', function(d){
+						return diagonal(d, d.parent)
+					});
+				
+				// Remove any exiting links
+				var linkExit = link.exit().transition()
+					.duration(duration)
+					.attr('d', function(d) {
+						var o = {x: source.x, y: source.y}
+						return diagonal(o, o)
+						})
+					.remove();
+				
+				// Store the old positions for transition.
+				nodes.forEach(function(d){
+					d.x0 = d.x;
+					d.y0 = d.y;
+				});
+			
+				// Creates a curved (diagonal) path from parent to the child nodes
+				function diagonal(s, d) {
+					path = `M ${s.y} ${s.x}
+					C ${(s.y + d.y) / 2} ${s.x},
+					${(s.y + d.y) / 2} ${d.x},
+					${d.y} ${d.x}`
+					return path
+				}
+			}
+
+			root = d3.hierarchy(data, function(d) {
+				return d.children;
+			});
+			root.x0 = height / 2;
+			root.y0 = 0;
+			root.children.forEach(expand);
+			update(root);
 		}
-	
-	jsonTreeFunction(JSON.parse(this.getState().jsonData));
-
-	d3.select(cxD3TreeJsHTMLRootComponent).select(self.frameElement).style("height", "800px");
-	
-	d3.select(cxD3TreeJsHTMLRootComponent).selectAll("#"+this.getState().htmlTagId+"_input").on("change", function change() {
-//		alert("this.value = " + this.value);
-	    if (this.value === "expand"){
-	    	cxD3TreeJsComponent_jsonRoot.children.forEach(expand);
-	    } else {
-	    	cxD3TreeJsComponent_jsonRoot.children.forEach(collapse);
-	    }
-	    update(cxD3TreeJsComponent_jsonRoot);
-	});
-
-	function update(source) {
-
-	  // Compute the new tree layout.
-	  var nodes = tree.nodes(cxD3TreeJsComponent_jsonRoot).reverse(),
-	      links = tree.links(nodes);
-
-	  // Normalize for fixed-depth.
-	  nodes.forEach(function(d) { d.y = d.depth * 180; });
-
-	  // Update the nodes€¦
-	  var node = cxD3TreeJsHTMLRootComponentSvg.selectAll("g.node")
-	      .data(nodes, function(d) { return d.id || (d.id = ++i); });
-
-	  // Enter any new nodes at the parent's previous position.
-	  var nodeEnter = node.enter().append("g")
-	      .attr("class", "node")
-	      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
-	      .on("click", click);
-
-	  nodeEnter.append("circle")
-	      .attr("r", 1e-6)
-	      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
-
-	  nodeEnter.append("text")
-	      .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
-	      .attr("dy", ".35em")
-	      .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
-	      .text(function(d) { return d.name; })
-	      .style("fill-opacity", 1e-6);
-
-	  // Transition nodes to their new position.
-	  var nodeUpdate = node.transition()
-	      .duration(duration)
-	      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
-
-	  nodeUpdate.select("circle")
-	      .attr("r", 4.5)
-	      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
-
-	  nodeUpdate.select("text")
-	      .style("fill-opacity", 1);
-
-	  // Transition exiting nodes to the parent's new position.
-	  var nodeExit = node.exit().transition()
-	      .duration(duration)
-	      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
-	      .remove();
-
-	  nodeExit.select("circle")
-	      .attr("r", 1e-6);
-
-	  nodeExit.select("text")
-	      .style("fill-opacity", 1e-6);
-
-	  // Update the links€¦
-	  var link = cxD3TreeJsHTMLRootComponentSvg.selectAll("path.link")
-	      .data(links, function(d) { return d.target.id; });
-
-	  // Enter any new links at the parent's previous position.
-	  link.enter().insert("path", "g")
-	      .attr("class", "link")
-	      .attr("d", function(d) {
-	        var o = {x: source.x0, y: source.y0};
-	        return diagonal({source: o, target: o});
-	      });
-
-	  // Transition links to their new position.
-	  link.transition()
-	      .duration(duration)
-	      .attr("d", diagonal);
-
-	  // Transition exiting nodes to the parent's new position.
-	  link.exit().transition()
-	      .duration(duration)
-	      .attr("d", function(d) {
-	        var o = {x: source.x, y: source.y};
-	        return diagonal({source: o, target: o});
-	      })
-	      .remove();
-
-	  // Stash the old positions for transition.
-	  nodes.forEach(function(d) {
-	    d.x0 = d.x;
-	    d.y0 = d.y;
-	  });
+	''')
 	}
-
-	// Toggle children on click.
-	function click(d) {
-	  if (d.children) {
-	    d._children = d.children;
-	    d.children = null;
-	  } else {
-	    d.children = d._children;
-	    d._children = null;
-	  }
-	  update(d);
-	}
-
-}
-''')
-	}
-		
 }
diff --git a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.xtend b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.xtend
index 3f248df..dca1cbb 100644
--- a/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.xtend
+++ b/org.eclipse.osbp.xtext.chart/src/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.xtend
@@ -20,15 +20,10 @@
 package org.eclipse.osbp.xtext.chart.jvmmodel
 
 import org.eclipse.osbp.xtext.chart.Chart
-import org.eclipse.osbp.xtext.chart.ChartTree
-import javax.inject.Inject
-import org.eclipse.xtext.naming.IQualifiedNameProvider
 import org.eclipse.osbp.xtext.chart.ChartPackage
+import org.eclipse.osbp.xtext.chart.ChartTree
 
 class D3JsJavaUtil {
-	
-	@Inject extension IQualifiedNameProvider
-
 	def ChartTree getChartTreeMap(Chart chart){
 		if (chart.charttype instanceof ChartTree){
 			return chart.charttype as ChartTree
diff --git a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.java b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.java
index c52b153..a83f74e 100644
--- a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.java
+++ b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartDSLJvmModelInferrer.java
@@ -16,8 +16,13 @@
  */
 package org.eclipse.osbp.xtext.chart.jvmmodel;
 
+import com.ejt.vaadin.sizereporter.ComponentResizeListener;
+import com.ejt.vaadin.sizereporter.SizeReporter;
 import com.google.common.base.Objects;
+import com.vaadin.annotations.JavaScript;
 import com.vaadin.server.StreamResource;
+import com.vaadin.shared.ui.JavaScriptComponentState;
+import com.vaadin.ui.AbstractJavaScriptComponent;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.VerticalLayout;
 import elemental.json.JsonException;
@@ -25,6 +30,7 @@
 import java.util.Arrays;
 import java.util.HashMap;
 import java.util.HashSet;
+import java.util.List;
 import java.util.Locale;
 import java.util.Set;
 import javax.annotation.PostConstruct;
@@ -35,6 +41,7 @@
 import org.eclipse.e4.ui.di.Focus;
 import org.eclipse.e4.ui.model.application.MApplication;
 import org.eclipse.e4.ui.workbench.IPresentationEngine;
+import org.eclipse.emf.common.notify.Adapter;
 import org.eclipse.emf.common.util.EList;
 import org.eclipse.emf.ecore.EObject;
 import org.eclipse.osbp.dsl.semantic.common.types.LAttribute;
@@ -72,7 +79,7 @@
 import org.eclipse.osbp.xtext.chart.ChartRangeElement;
 import org.eclipse.osbp.xtext.chart.ChartSegmentColor;
 import org.eclipse.osbp.xtext.chart.ChartTree;
-import org.eclipse.osbp.xtext.chart.jvmmodel.ChartDSLD3JavaComponentsCreator;
+import org.eclipse.osbp.xtext.chart.jvmmodel.D3JsJavaUtil;
 import org.eclipse.osbp.xtext.cubedsl.CubeLevel;
 import org.eclipse.osbp.xtext.datamart.common.olap.DerivedCellSet;
 import org.eclipse.osbp.xtext.datamartdsl.DatamartAttribute;
@@ -93,6 +100,7 @@
 import org.eclipse.osbp.xtext.table.common.PropertyLookup;
 import org.eclipse.xtend2.lib.StringConcatenation;
 import org.eclipse.xtext.common.types.JvmAnnotationReference;
+import org.eclipse.xtext.common.types.JvmAnnotationValue;
 import org.eclipse.xtext.common.types.JvmConstructor;
 import org.eclipse.xtext.common.types.JvmDeclaredType;
 import org.eclipse.xtext.common.types.JvmField;
@@ -100,8 +108,10 @@
 import org.eclipse.xtext.common.types.JvmGenericType;
 import org.eclipse.xtext.common.types.JvmMember;
 import org.eclipse.xtext.common.types.JvmOperation;
+import org.eclipse.xtext.common.types.JvmStringAnnotationValue;
 import org.eclipse.xtext.common.types.JvmTypeReference;
 import org.eclipse.xtext.common.types.JvmVisibility;
+import org.eclipse.xtext.common.types.TypesFactory;
 import org.eclipse.xtext.naming.IQualifiedNameProvider;
 import org.eclipse.xtext.naming.QualifiedName;
 import org.eclipse.xtext.xbase.compiler.output.ITreeAppendable;
@@ -137,7 +147,10 @@
   
   @Inject
   @Extension
-  private ChartDSLD3JavaComponentsCreator _chartDSLD3JavaComponentsCreator;
+  private D3JsJavaUtil _d3JsJavaUtil;
+  
+  @Inject
+  private TypesFactory typesFactory;
   
   /**
    * <p>infer method dispatches the necessary routines to build fields, setter, getter, constructors and methods of the generated code.</p>
@@ -167,7 +180,7 @@
         acceptor.<JvmGenericType>accept(cls, _function);
         ChartOption _charttype = chart.getCharttype();
         if ((_charttype instanceof ChartTree)) {
-          this._chartDSLD3JavaComponentsCreator.createJsJavaComponent(chart, acceptor);
+          this.createJsJavaComponent(chart, acceptor);
         }
       }
     }
@@ -320,6 +333,21 @@
       EList<JvmMember> _members_16 = type.getMembers();
       this._jvmTypesBuilder.<JvmField>operator_add(_members_16, field);
     }
+    field = this._jvmTypesBuilder.toField(chart, "panelWidth", this._typeReferenceBuilder.typeRef(int.class));
+    EList<JvmMember> _members_17 = type.getMembers();
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_17, field);
+    field = this._jvmTypesBuilder.toField(chart, "panelHeight", this._typeReferenceBuilder.typeRef(int.class));
+    EList<JvmMember> _members_18 = type.getMembers();
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_18, field);
+    field = this._jvmTypesBuilder.toField(chart, "splitAdapter", this._typeReferenceBuilder.typeRef(Adapter.Internal.class));
+    EList<JvmMember> _members_19 = type.getMembers();
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_19, field);
+    field = this._jvmTypesBuilder.toField(chart, "resizeListener", this._typeReferenceBuilder.typeRef(ComponentResizeListener.class));
+    EList<JvmMember> _members_20 = type.getMembers();
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_20, field);
+    field = this._jvmTypesBuilder.toField(chart, "sizeReporter", this._typeReferenceBuilder.typeRef(SizeReporter.class));
+    EList<JvmMember> _members_21 = type.getMembers();
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_21, field);
   }
   
   /**
@@ -350,6 +378,12 @@
         _builder.newLine();
         _builder.append("filterGenerator.addFilterChangeListener(this);");
         _builder.newLine();
+        _builder.append("// to resize the chart according to split positions of partsashcontainer - setContainerData is tracked");
+        _builder.newLine();
+        _builder.append("((EObject)getPart()).eAdapters().add(splitAdapter);");
+        _builder.newLine();
+        _builder.append("sizeReporter.addResizeListener(resizeListener);");
+        _builder.newLine();
         _builder.append("eventDispatcher.addEventReceiver(this);");
         it_1.append(_builder);
       };
@@ -368,6 +402,10 @@
         _builder.newLine();
         _builder.append("filterGenerator.removeFilterChangeListener(this);");
         _builder.newLine();
+        _builder.append("((EObject)getPart()).eAdapters().remove(splitAdapter);");
+        _builder.newLine();
+        _builder.append("sizeReporter.removeResizeListener(resizeListener);");
+        _builder.newLine();
         _builder.append("eventDispatcher.removeEventReceiver(this);");
         _builder.newLine();
         _builder.append("super.destroyView();");
@@ -453,7 +491,7 @@
         this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters, _parameter);
         final Procedure1<ITreeAppendable> _function_7 = (ITreeAppendable it_1) -> {
           StringConcatenation _builder = new StringConcatenation();
-          CharSequence _createD3Chart = this._chartDSLD3JavaComponentsCreator.createD3Chart(chart);
+          CharSequence _createD3Chart = this.createD3Chart(chart);
           _builder.append(_createD3Chart);
           it_1.append(_builder);
         };
@@ -604,6 +642,91 @@
     _builder.newLine();
     _builder.append("layoutManager.init(parent);");
     _builder.newLine();
+    _builder.append("splitAdapter = new AdapterImpl() {");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("@Override");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("public void notifyChanged(Notification notification) {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("if (notification.getEventType()==Notification.SET && ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("notification.getFeatureID(UIElementImpl.class) == UiPackageImpl.UI_ELEMENT__CONTAINER_DATA)");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("{");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("log.debug(\"render due to split position changed\");");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("renderData();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("};");
+    _builder.newLine();
+    _builder.append("sizeReporter = new SizeReporter(layoutManager.getDataArea());");
+    _builder.newLine();
+    _builder.append("resizeListener = new ComponentResizeListener() {");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("@Override");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("public void sizeChanged(ComponentResizeEvent event) {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("boolean changed = false;");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("if (panelWidth != event.getWidth()) {");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("changed = true;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("panelWidth = event.getWidth();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("if (panelHeight != event.getHeight()) {");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("changed = true;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("panelHeight = event.getHeight();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("if (changed) {");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("log.debug(\"Panel size changed : \" + event.getWidth() + \" x \" + event.getHeight());");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("renderData();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("};");
+    _builder.newLine();
     _builder.append("datamartInstance = new ");
     String _sourceDataMartRefName = this.getSourceDataMartRefName(chart);
     _builder.append(_sourceDataMartRefName);
@@ -694,6 +817,13 @@
       _builder.append(body);
       _builder.append("// get the results");
       _builder.newLineIfNotEmpty();
+      _builder.append("if (panelWidth == 0 && panelHeight == 0) {");
+      _builder.newLine();
+      _builder.append("\t");
+      _builder.append("return;");
+      _builder.newLine();
+      _builder.append("}");
+      _builder.newLine();
       _builder.append("final DerivedCellSet cellSet = datamartInstance.getResults(");
       {
         if ((!isCube)) {
@@ -2762,6 +2892,248 @@
     return _builder;
   }
   
+  public void createJsJavaComponent(final Chart chart, final IJvmDeclaredTypeAcceptor acceptor) {
+    final String stateClassName = this._d3JsJavaUtil.createStateFilename(chart);
+    JvmGenericType chart_cls = this._jvmTypesBuilder.toClass(chart, this._d3JsJavaUtil.createfullyQualifiedChartFilename(chart));
+    JvmGenericType state_cls = this._jvmTypesBuilder.toClass(chart, this._d3JsJavaUtil.createfullyQualifiedStateFilename(chart));
+    ChartOption _charttype = chart.getCharttype();
+    if ((_charttype instanceof ChartTree)) {
+      ChartOption _charttype_1 = chart.getCharttype();
+      final ChartTree chartTree = ((ChartTree) _charttype_1);
+      final Procedure1<JvmGenericType> _function = (JvmGenericType it) -> {
+        EList<JvmTypeReference> _superTypes = it.getSuperTypes();
+        JvmTypeReference _typeRef = this._typeReferenceBuilder.typeRef(AbstractJavaScriptComponent.class);
+        this._jvmTypesBuilder.<JvmTypeReference>operator_add(_superTypes, _typeRef);
+        JvmAnnotationReference jsAnnotationRef = this._jvmTypesBuilder.toAnnotation(chartTree, JavaScript.class);
+        ArrayList<String> jsAnnotationList = CollectionLiterals.<String>newArrayList(
+          "theme://plugin/org.eclipse.osbp.utils.js/org/eclipse/osbp/utils/js/d3.js", 
+          "theme://plugin/org.eclipse.osbp.utils.js/org/eclipse/osbp/utils/js/d3-scale-chromatic.js", 
+          this._d3JsJavaUtil.createChartJsFilename(chart));
+        this.addStringValuesToAnnotation(jsAnnotationRef, jsAnnotationList);
+        EList<JvmAnnotationReference> _annotations = it.getAnnotations();
+        this._jvmTypesBuilder.<JvmAnnotationReference>operator_add(_annotations, jsAnnotationRef);
+        boolean _isMap = chartTree.isMap();
+        if (_isMap) {
+          this.toTreeMapConstructor(it, chart);
+        } else {
+          boolean _isCollapsible = chartTree.isCollapsible();
+          if (_isCollapsible) {
+            this.toChartConstructor(it, chart);
+          }
+        }
+        this.toChartOperations(it, chart, stateClassName);
+      };
+      acceptor.<JvmGenericType>accept(chart_cls).initializeLater(_function);
+      final Procedure1<JvmGenericType> _function_1 = (JvmGenericType it) -> {
+        EList<JvmTypeReference> _superTypes = it.getSuperTypes();
+        JvmTypeReference _typeRef = this._typeReferenceBuilder.typeRef(JavaScriptComponentState.class);
+        this._jvmTypesBuilder.<JvmTypeReference>operator_add(_superTypes, _typeRef);
+        boolean _isMap = chartTree.isMap();
+        if (_isMap) {
+          this.toTreeMapStateFields(it, chart);
+        } else {
+          boolean _isCollapsible = chartTree.isCollapsible();
+          if (_isCollapsible) {
+            this.toChartStateFields(it, chart);
+          }
+        }
+      };
+      acceptor.<JvmGenericType>accept(state_cls).initializeLater(_function_1);
+    }
+  }
+  
+  public void toChartOperations(final JvmDeclaredType type, final Chart chart, final String stateClassName) {
+    EList<JvmMember> _members = type.getMembers();
+    final Procedure1<JvmOperation> _function = (JvmOperation it) -> {
+      final Procedure1<ITreeAppendable> _function_1 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("return (");
+        _builder.append(stateClassName);
+        _builder.append(") super.getState();");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setBody(it, _function_1);
+    };
+    JvmOperation _method = this._jvmTypesBuilder.toMethod(chart, "getState", this._typeReferenceBuilder.typeRef(stateClassName), _function);
+    this._jvmTypesBuilder.<JvmOperation>operator_add(_members, _method);
+  }
+  
+  public CharSequence getD3StateVars() {
+    StringConcatenation _builder = new StringConcatenation();
+    _builder.append("getState().jsonData = _jsonData;");
+    _builder.newLine();
+    _builder.append("getState().htmlTagId=_htmlTagId;");
+    _builder.newLine();
+    _builder.append("getState().panelWidth = new Integer(width).toString();");
+    _builder.newLine();
+    _builder.append("getState().panelHeight = new Integer(height).toString();");
+    _builder.newLine();
+    return _builder;
+  }
+  
+  public JvmConstructor getChartConstructor(final JvmDeclaredType type, final Chart chart) {
+    final Procedure1<JvmConstructor> _function = (JvmConstructor it) -> {
+      EList<JvmFormalParameter> _parameters = it.getParameters();
+      JvmFormalParameter _parameter = this._jvmTypesBuilder.toParameter(chart, "_htmlTagId", this._typeReferenceBuilder.typeRef(String.class));
+      this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters, _parameter);
+      EList<JvmFormalParameter> _parameters_1 = it.getParameters();
+      JvmFormalParameter _parameter_1 = this._jvmTypesBuilder.toParameter(chart, "_jsonData", this._typeReferenceBuilder.typeRef(String.class));
+      this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters_1, _parameter_1);
+      EList<JvmFormalParameter> _parameters_2 = it.getParameters();
+      JvmFormalParameter _parameter_2 = this._jvmTypesBuilder.toParameter(chart, "width", this._typeReferenceBuilder.typeRef(int.class));
+      this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters_2, _parameter_2);
+      EList<JvmFormalParameter> _parameters_3 = it.getParameters();
+      JvmFormalParameter _parameter_3 = this._jvmTypesBuilder.toParameter(chart, "height", this._typeReferenceBuilder.typeRef(int.class));
+      this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters_3, _parameter_3);
+      final Procedure1<ITreeAppendable> _function_1 = (ITreeAppendable it_1) -> {
+        it_1.append(this.getD3StateVars());
+      };
+      this._jvmTypesBuilder.setBody(it, _function_1);
+    };
+    return this._jvmTypesBuilder.toConstructor(chart, _function);
+  }
+  
+  public void toTreeMapConstructor(final JvmDeclaredType type, final Chart chart) {
+    JvmConstructor constructor = this.getChartConstructor(type, chart);
+    EList<JvmFormalParameter> _parameters = constructor.getParameters();
+    JvmFormalParameter _parameter = this._jvmTypesBuilder.toParameter(chart, "dataColumns", this._typeReferenceBuilder.typeRef(List.class, this._typeReferenceBuilder.typeRef(String.class)));
+    this._jvmTypesBuilder.<JvmFormalParameter>operator_add(_parameters, _parameter);
+    final Procedure1<ITreeAppendable> _function = (ITreeAppendable it) -> {
+      StringConcatenation _builder = new StringConcatenation();
+      CharSequence _d3StateVars = this.getD3StateVars();
+      _builder.append(_d3StateVars);
+      _builder.newLineIfNotEmpty();
+      _builder.append("getState().dataColumnList = dataColumns;");
+      it.append(_builder);
+    };
+    this._jvmTypesBuilder.setBody(constructor, _function);
+    EList<JvmMember> _members = type.getMembers();
+    this._jvmTypesBuilder.<JvmConstructor>operator_add(_members, constructor);
+  }
+  
+  public void toChartConstructor(final JvmDeclaredType type, final Chart chart) {
+    JvmConstructor constructor = this.getChartConstructor(type, chart);
+    EList<JvmMember> _members = type.getMembers();
+    this._jvmTypesBuilder.<JvmConstructor>operator_add(_members, constructor);
+  }
+  
+  public void addStringValuesToAnnotation(final JvmAnnotationReference annotationRef, final ArrayList<String> annotationStringList) {
+    JvmStringAnnotationValue value = this.typesFactory.createJvmStringAnnotationValue();
+    for (final String annotationString : annotationStringList) {
+      EList<String> _values = value.getValues();
+      this._jvmTypesBuilder.<String>operator_add(_values, annotationString);
+    }
+    EList<JvmAnnotationValue> _explicitValues = annotationRef.getExplicitValues();
+    this._jvmTypesBuilder.<JvmStringAnnotationValue>operator_add(_explicitValues, value);
+  }
+  
+  public void toTreeMapStateFields(final JvmDeclaredType type, final Chart chart) {
+    this.toChartStateFields(type, chart);
+    EList<JvmMember> _members = type.getMembers();
+    final Procedure1<JvmField> _function = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_1 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("new ArrayList<String>()");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_1);
+    };
+    JvmField _field = this._jvmTypesBuilder.toField(chart, "dataColumnList", this._typeReferenceBuilder.typeRef(List.class, this._typeReferenceBuilder.typeRef(String.class)), _function);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members, _field);
+  }
+  
+  public void toChartStateFields(final JvmDeclaredType type, final Chart chart) {
+    EList<JvmMember> _members = type.getMembers();
+    final Procedure1<JvmField> _function = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_1 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("\"\"");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_1);
+    };
+    JvmField _field = this._jvmTypesBuilder.toField(chart, "jsonData", this._typeReferenceBuilder.typeRef(String.class), _function);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members, _field);
+    EList<JvmMember> _members_1 = type.getMembers();
+    final Procedure1<JvmField> _function_1 = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_2 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("\"\"");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_2);
+    };
+    JvmField _field_1 = this._jvmTypesBuilder.toField(chart, "htmlTagId", this._typeReferenceBuilder.typeRef(String.class), _function_1);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_1, _field_1);
+    EList<JvmMember> _members_2 = type.getMembers();
+    final Procedure1<JvmField> _function_2 = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_3 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("\"\"");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_3);
+    };
+    JvmField _field_2 = this._jvmTypesBuilder.toField(chart, "panelWidth", this._typeReferenceBuilder.typeRef(String.class), _function_2);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_2, _field_2);
+    EList<JvmMember> _members_3 = type.getMembers();
+    final Procedure1<JvmField> _function_3 = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_4 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("\"\"");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_4);
+    };
+    JvmField _field_3 = this._jvmTypesBuilder.toField(chart, "panelHeight", this._typeReferenceBuilder.typeRef(String.class), _function_3);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_3, _field_3);
+    EList<JvmMember> _members_4 = type.getMembers();
+    final Procedure1<JvmField> _function_4 = (JvmField it) -> {
+      it.setVisibility(JvmVisibility.PUBLIC);
+      final Procedure1<ITreeAppendable> _function_5 = (ITreeAppendable it_1) -> {
+        StringConcatenation _builder = new StringConcatenation();
+        _builder.append("\"\"");
+        it_1.append(_builder);
+      };
+      this._jvmTypesBuilder.setInitializer(it, _function_5);
+    };
+    JvmField _field_4 = this._jvmTypesBuilder.toField(chart, "inputValue", this._typeReferenceBuilder.typeRef(String.class), _function_4);
+    this._jvmTypesBuilder.<JvmField>operator_add(_members_4, _field_4);
+  }
+  
+  public CharSequence createD3Chart(final Chart chart) {
+    StringConcatenation _builder = new StringConcatenation();
+    _builder.append("CellSetToD3JsonConverter jsonConverter = new CellSetToD3JsonConverter();");
+    _builder.newLine();
+    _builder.append("return new ");
+    final String d3ChartFileName = this._d3JsJavaUtil.createChartFilename(chart);
+    _builder.append(d3ChartFileName);
+    _builder.append("(\"");
+    _builder.append(d3ChartFileName);
+    _builder.append("\", jsonConverter.getD3JsonString(cxCellSet, ");
+    {
+      if (((chart.getCharttype() instanceof ChartTree) && ((ChartTree) chart.getCharttype()).isCollapsible())) {
+        _builder.append("true");
+      } else {
+        _builder.append("false");
+      }
+    }
+    _builder.append("), panelWidth, panelHeight");
+    {
+      boolean _isTreeMap = this._d3JsJavaUtil.isTreeMap(chart);
+      if (_isTreeMap) {
+        _builder.append(", jsonConverter.getDataColumnNameList(cxCellSet)");
+      }
+    }
+    _builder.append(");");
+    return _builder;
+  }
+  
   public void infer(final EObject pckg, final IJvmDeclaredTypeAcceptor acceptor, final boolean isPreIndexingPhase) {
     if (pckg instanceof ChartPackage) {
       _infer((ChartPackage)pckg, acceptor, isPreIndexingPhase);
diff --git a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.java b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.java
index feecc51..5cdf6c8 100644
--- a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.java
+++ b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/ChartModelGenerator.java
@@ -16,6 +16,9 @@
  */
 package org.eclipse.osbp.xtext.chart.jvmmodel;
 
+import com.ejt.vaadin.sizereporter.ComponentResizeEvent;
+import com.ejt.vaadin.sizereporter.ComponentResizeListener;
+import com.ejt.vaadin.sizereporter.SizeReporter;
 import com.vaadin.data.Property;
 import com.vaadin.server.FileDownloader;
 import com.vaadin.server.Page;
@@ -91,7 +94,9 @@
 import org.eclipse.e4.ui.model.application.ui.impl.UIElementImpl;
 import org.eclipse.e4.ui.model.application.ui.impl.UiPackageImpl;
 import org.eclipse.e4.ui.model.application.ui.menu.MToolBarElement;
+import org.eclipse.emf.common.notify.Adapter;
 import org.eclipse.emf.common.notify.Notification;
+import org.eclipse.emf.common.notify.impl.AdapterImpl;
 import org.eclipse.emf.common.util.EList;
 import org.eclipse.emf.ecore.EObject;
 import org.eclipse.emf.ecore.resource.Resource;
@@ -150,7 +155,7 @@
       importManager.addImportFor(this._typeReferenceBuilder.typeRef(HashMap.class, this._typeReferenceBuilder.typeRef(String.class), this._typeReferenceBuilder.typeRef(String.class)).getType());
       importManager.addImportFor(this._typeReferenceBuilder.typeRef(Map.class, this._typeReferenceBuilder.typeRef(String.class), this._typeReferenceBuilder.typeRef(String.class)).getType());
       importManager.addImportFor(this._typeReferenceBuilder.typeRef(Collection.class, this._typeReferenceBuilder.typeRef(String.class)).getType());
-      this._basicDslGeneratorUtils.addImportFor(this, importManager, this._typeReferenceBuilder, Property.ValueChangeListener.class, DCharts.class, Label.class, List.class, ArrayList.class, Page.class, Page.Styles.class, DerivedAxis.class, DerivedCell.class, DerivedPosition.class, DerivedMember.class, HorizontalLayout.class, TabSheet.class, Series.class, XYseries.class, Ticks.class, DataSeries.class, SeriesDefaults.class, SeriesRenderers.class, CanvasAxisTickRenderer.class, DonutRenderer.class, PieRenderer.class, BubbleRenderer.class, BarRenderer.class, BarDirections.class, MeterGaugeRenderer.class, PyramidRenderer.class, PyramidSides.class, Trendline.class, Cursor.class, Legend.class, LegendPlacements.class, EnhancedLegendRenderer.class, SeriesToggles.class, Highlighter.class, Title.class, TooltipLocations.class, TooltipAxes.class, Axes.class, XYaxes.class, XYaxis.class, Xaxes.class, Yaxes.class, AxisTickRenderer.class, AxisRenderers.class, LinearAxisRenderer.class, AxesDefaults.class, DownloadButtonLocation.class, Options.class, DerivedHierarchy.class, DerivedLevel.class, CellSetToD3JsonConverter.class, Date.class, JavaScriptFunction.class, JsonArray.class, JsonObject.class, JsonException.class, EventHandler.class, Event.class, EventUtils.class, EventBrokerMsg.class, Executors.class, Notification.class, EObject.class, UIElementImpl.class, UiPackageImpl.class, MUIElement.class, MPartStack.class, UI.class, ResourceBundle.class, Locale.class, DatamartFilterGenerator.class, ViewLayoutManager.class, IDatamartFilterGenerator.FilterChangeListener.class, EventDispatcherEvent.class, EventDispatcherEvent.EventDispatcherDataTag.class, EventDispatcherEvent.EventDispatcherCommand.class, DatamartFilter.class, Member.MemberType.class, Panel.class, MPerspective.class, ChartActionEnum.class, UUID.class, StreamResource.class, MToolBarElement.class, Button.class, FileDownloader.class, StreamResource.StreamSource.class, ByteArrayOutputStream.class, ImageIO.class, ByteArrayInputStream.class, InputStream.class);
+      this._basicDslGeneratorUtils.addImportFor(this, importManager, this._typeReferenceBuilder, Property.ValueChangeListener.class, DCharts.class, Label.class, List.class, ArrayList.class, Page.class, Page.Styles.class, DerivedAxis.class, DerivedCell.class, DerivedPosition.class, DerivedMember.class, HorizontalLayout.class, TabSheet.class, Series.class, XYseries.class, Ticks.class, DataSeries.class, SeriesDefaults.class, SeriesRenderers.class, CanvasAxisTickRenderer.class, DonutRenderer.class, PieRenderer.class, BubbleRenderer.class, BarRenderer.class, BarDirections.class, MeterGaugeRenderer.class, PyramidRenderer.class, PyramidSides.class, Trendline.class, Cursor.class, Legend.class, LegendPlacements.class, EnhancedLegendRenderer.class, SeriesToggles.class, Highlighter.class, Title.class, TooltipLocations.class, TooltipAxes.class, Axes.class, XYaxes.class, XYaxis.class, Xaxes.class, Yaxes.class, AxisTickRenderer.class, AxisRenderers.class, LinearAxisRenderer.class, AxesDefaults.class, DownloadButtonLocation.class, Options.class, DerivedHierarchy.class, DerivedLevel.class, CellSetToD3JsonConverter.class, Date.class, JavaScriptFunction.class, JsonArray.class, JsonObject.class, JsonException.class, EventHandler.class, Event.class, EventUtils.class, EventBrokerMsg.class, Executors.class, Notification.class, EObject.class, UIElementImpl.class, UiPackageImpl.class, MUIElement.class, MPartStack.class, UI.class, ResourceBundle.class, Locale.class, DatamartFilterGenerator.class, ViewLayoutManager.class, IDatamartFilterGenerator.FilterChangeListener.class, EventDispatcherEvent.class, EventDispatcherEvent.EventDispatcherDataTag.class, EventDispatcherEvent.EventDispatcherCommand.class, DatamartFilter.class, Member.MemberType.class, Panel.class, MPerspective.class, ChartActionEnum.class, UUID.class, StreamResource.class, MToolBarElement.class, Button.class, FileDownloader.class, StreamResource.StreamSource.class, ByteArrayOutputStream.class, ImageIO.class, ByteArrayInputStream.class, InputStream.class, Adapter.class, AdapterImpl.class, SizeReporter.class, ComponentResizeListener.class, ComponentResizeEvent.class);
       _xblockexpression = super.createAppendable(context, importManager, config);
     }
     return _xblockexpression;
@@ -217,266 +222,254 @@
     _builder.append(" = function() {");
     _builder.newLineIfNotEmpty();
     _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t\t");
     _builder.append("var margin = {");
     _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("top: 40,");
+    _builder.append("\t    ");
+    _builder.append("top: 10,");
     _builder.newLine();
-    _builder.append("\t\t    ");
+    _builder.append("\t    ");
     _builder.append("right: 10,");
     _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("bottom: 10,");
+    _builder.append("\t    ");
+    _builder.append("bottom: 40,");
     _builder.newLine();
-    _builder.append("\t\t    ");
+    _builder.append("\t    ");
     _builder.append("left: 10");
     _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("},");
-    _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("width = 960 - margin.left - margin.right,");
-    _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("height = 500 - margin.top - margin.bottom;");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var color = d3.scale.category20c();");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("function position() {");
-    _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("this.style(\"left\", function (d) {");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append("return d.x + \"px\";");
-    _builder.newLine();
-    _builder.append("\t\t    ");
-    _builder.append("})");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append(".style(\"top\", function (d) {");
-    _builder.newLine();
-    _builder.append("\t\t            ");
-    _builder.append("return d.y + \"px\";");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append("})");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append(".style(\"width\", function (d) {");
-    _builder.newLine();
-    _builder.append("\t\t            ");
-    _builder.append("return Math.max(0, d.dx - 1) + \"px\";");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append("})");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append(".style(\"height\", function (d) {");
-    _builder.newLine();
-    _builder.append("\t\t            ");
-    _builder.append("return Math.max(0, d.dy - 1) + \"px\";");
-    _builder.newLine();
-    _builder.append("\t\t        ");
-    _builder.append("});");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var cxD3TreeMapJsHTMLRootComponent = this.getElement();");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var cxD3TreeMapJsComponentHtmlTagId = this.getState().htmlTagId;");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var checked = \"\";");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var connector = this;");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var dataColumn = \"\";");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var preValueLabel = \"\";");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("for (var i=0;i < this.getState().dataColumnList.length;i++) {");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("if (i == 0){");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append("checked = \" checked\";");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append("preValueLabel = this.getState().dataColumnList[0];");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("} else {");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append("checked = \"\";");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("dataColumn = dataColumn + \"\\t<label><input id=\\\"\"+this.getState().htmlTagId+\"_input\\\" type=\\\"radio\\\" name=\\\"mode\\\" value=\\\"\"+ this.getState().dataColumnList[i] + \"\\\"\" + checked + \"> \"+ this.getState().dataColumnList[i] + \"</label>\\n\";");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("var treemap = d3.layout.treemap()");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append(".size([width, height])");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append(".sticky(true)");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append(".value(function (d) {");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("return eval(\"d.\" + preValueLabel);");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("});");
-    _builder.newLine();
-    _builder.append("//\t\talert(\"dataColumn: \" + dataColumn);");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("cxD3TreeMapJsHTMLRootComponent.innerHTML = \t\"<form>\\n\" +");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t");
-    _builder.append("dataColumn +");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t");
-    _builder.append("\"</form>\\n\" +");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t");
-    _builder.append("\"<div id=\\\"\"+this.getState().htmlTagId+\"_div\\\">\" + \"</div>\";");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("var cxD3TreeMapJsHTMLRootComponentSelection = d3.select(cxD3TreeMapJsHTMLRootComponent).select(\"#\"+this.getState().htmlTagId+\"_div\");");
-    _builder.newLine();
-    _builder.append("//\t\t\talert(\"selection: \" + selection);");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("var cxD3TreeMapJsHTMLRootComponentDiv = cxD3TreeMapJsHTMLRootComponentSelection.append(\"div\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t\t    ");
-    _builder.append(".style(\"position\", \"relative\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t\t\t");
-    _builder.append(".style(\"width\", (width + margin.left + margin.right) + \"px\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t\t\t");
-    _builder.append(".style(\"height\", (height + margin.top + margin.bottom) + \"px\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t\t    ");
-    _builder.append(".style(\"left\", margin.left + \"px\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t\t\t    ");
-    _builder.append(".style(\"top\", margin.top + \"px\");");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("jsonTreeMapFunction = function(jsonObj) {");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append("var node = cxD3TreeMapJsHTMLRootComponentDiv.datum(jsonObj).selectAll(\".node\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".data(treemap.nodes)");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".enter().append(\"div\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".attr(\"class\", \"node\")");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".attr(\"title\", function(d) { return d.children ? \"\" : d.tooltipName + \"\\n\" + preValueLabel + \": \" + eval(\"d.\" + preValueLabel); })");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".call(position)");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".style(\"background\", function(d) { return d.children ? color(d.name) : null; })");
-    _builder.newLine();
-    _builder.append("//\t\t\t\t\t      .style(\"background\", function(d) { return d.children ? d3.rgb(\"red\") : null; })");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append(".text(function(d) { return d.children ? null : d.name; });");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.newLine();
-    _builder.append("\t\t\t\t");
-    _builder.append("d3.select(cxD3TreeMapJsHTMLRootComponent).selectAll(\"#\"+cxD3TreeMapJsComponentHtmlTagId+\"_input\").on(\"change\", function change() {");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t");
-    _builder.append("var valueLabel = this.value;");
-    _builder.newLine();
-    _builder.append("//\t\t\t\t    alert(\"valueOut: \" + valueOut);");
-    _builder.newLine();
-    _builder.append("\t\t\t\t    ");
-    _builder.append("var value = this.value === \"count\"");
-    _builder.newLine();
-    _builder.append("\t\t\t\t        ");
-    _builder.append("? function() { return 1; }");
-    _builder.newLine();
-    _builder.append("\t\t\t\t        ");
-    _builder.append(": function (d) { return eval(\"d.\" + valueLabel); };");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("//\t\t\t\t        : function (d) { return d.size; };");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t  ");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t    ");
-    _builder.append("node.data(treemap.value(value).nodes)");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t      \t");
-    _builder.append(".attr(\"title\", function(d) { return d.children ? \"\" : d.tooltipName + \"\\n\" + valueLabel + \": \" + eval(\"d.\" + valueLabel); })");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t      \t");
-    _builder.append(".transition()");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t        ");
-    _builder.append(".duration(1500)");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t        ");
-    _builder.append(".call(position);");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t  ");
-    _builder.append("});");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("var jsonString = this.getState().jsonData;");
-    _builder.newLine();
-    _builder.append("\t\t\t");
-    _builder.append("jsonTreeMapFunction(JSON.parse(jsonString));");
+    _builder.append("\t");
+    _builder.append("};");
     _builder.newLine();
     _builder.append("\t");
+    _builder.append("var width = this.getState().panelWidth;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var height = this.getState().panelHeight;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var color = d3.scaleOrdinal(d3.schemeCategory10);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var divId = this.getState().htmlTagId+\"_div\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var inputId = this.getState().htmlTagId+\"_input\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var element = this.getElement();");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var data = JSON.parse(this.getState().jsonData);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var checked = \"\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var connector = this;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var dataColumn = \"\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var preValueLabel = \"\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("for (var i=0;i < this.getState().dataColumnList.length;i++) {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("if (i == 0){");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("checked = \" checked\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("preValueLabel = this.getState().dataColumnList[0];");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("} else {");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("checked = \"\";");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("dataColumn = dataColumn + \"\\t<label><input id=\'\"+inputId+\"\' type=\'radio\' name=\'mode\' onChange=\'update(\\\"\"+this.getState().dataColumnList[i]+\"\\\")\' value=\'\"+ this.getState().dataColumnList[i] + \"\'\" + checked + \"> \"+ this.getState().dataColumnList[i] + \"</label>\\n\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var treemap = d3.treemap()");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append(".size([width-margin.right-margin.left, height-margin.top-margin.bottom])");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append(".paddingInner(1)");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append(".round(true)");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append(".tile(d3.treemapSquarify);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("element.innerHTML = \"<form>\\n\"+dataColumn+\"</form>\\n\"+\"<div id=\\\"\"+divId+\"\\\">\" + \"</div>\";");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var div = d3.select(element).select(\"#\"+divId);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var treeDiv = div.append(\"div\")");
+    _builder.newLine();
+    _builder.append("\t\t\t    ");
+    _builder.append(".style(\"position\", \"relative\")");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append(".style(\"width\", width + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append(".style(\"height\", height + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t    ");
+    _builder.append(".style(\"left\", margin.left + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t    ");
+    _builder.append(".style(\"top\", margin.top + \"px\");");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("update = function(valueLabel) {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("const newRoot = d3.hierarchy(data);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("newRoot.sum((d) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("d.children).sum((d) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("eval(\"d.\" + valueLabel));");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("newRoot.sort((a,b) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("eval(\"b.\" + valueLabel)-eval(\"a.\" + valueLabel));");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("const node = treeDiv.datum(newRoot).selectAll(\".node\")");
+    _builder.newLine();
+    _builder.append("\t    \t");
+    _builder.append(".data(treemap(newRoot).leaves())");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"class\", \"node\")");
+    _builder.newLine();
+    _builder.append("\t      \t");
+    _builder.append(".attr(\"title\", function(d) { return d.children ? \"\" : d.data.tooltipName + \"\\n\" + valueLabel + \": \" + eval(\"d.data.\" + valueLabel); })");
+    _builder.newLine();
+    _builder.append("\t      \t");
+    _builder.append(".transition()");
+    _builder.newLine();
+    _builder.append("\t        ");
+    _builder.append(".duration(1500)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"left\", (d) => d.x0 + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"top\", (d) => d.y0 + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"width\", (d) => Math.max(0, d.x1 - d.x0 - 1) + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"height\", (d) => Math.max(0, d.y1 - d.y0  - 1) + \"px\");");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("} ");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("render = function() {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("const root = d3.hierarchy(data);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("root.sum((d) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("d.children).sum((d) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("eval(\"d.\" + preValueLabel));");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("root.sort((a,b) => ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("eval(\"b.\" + preValueLabel)-eval(\"a.\" + preValueLabel));");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("const node = treeDiv.datum(root).selectAll(\".node\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".data(treemap(root).leaves())");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".enter().append(\"div\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"class\", \"node\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"title\", \tfunction(d) { ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.data.tooltipName + \"\\n\" + preValueLabel + \": \" + eval(\"d.data.\" + preValueLabel);");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"left\", (d) => d.x0 + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"top\", (d) => d.y0 + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"width\", (d) => Math.max(0, d.x1 - d.x0 - 1) + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"height\", (d) => Math.max(0, d.y1 - d.y0  - 1) + \"px\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"background\", (d) => { ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("while (d.depth > 2) d = d.parent; ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return color(d.data.name);}) ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".text(function(d) { ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.data.name;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("render();");
+    _builder.newLine();
     _builder.append("}");
     _builder.newLine();
     strBuilder.append(_builder);
@@ -488,15 +481,28 @@
     _builder.append(" = function() {");
     _builder.newLineIfNotEmpty();
     _builder.append("\t");
+    _builder.append("var margin = {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("top: 10, ");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("right: 10, ");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("bottom: 40, ");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("left: 10");
     _builder.newLine();
     _builder.append("\t");
-    _builder.append("var margin = {top: 20, right: 120, bottom: 20, left: 120},");
+    _builder.append("};");
     _builder.newLine();
-    _builder.append("    ");
-    _builder.append("width = 1460 - margin.right - margin.left,");
+    _builder.append("\t");
+    _builder.append("var width = this.getState().panelWidth;");
     _builder.newLine();
-    _builder.append("    ");
-    _builder.append("height = 1000 - margin.top - margin.bottom;");
+    _builder.append("\t");
+    _builder.append("var height = this.getState().panelHeight;");
     _builder.newLine();
     _builder.append("    ");
     _builder.newLine();
@@ -507,62 +513,19 @@
     _builder.append("duration = 750,");
     _builder.newLine();
     _builder.append("\t    ");
-    _builder.append("cxD3TreeJsComponent_jsonRoot;");
+    _builder.append("root;");
     _builder.newLine();
     _builder.append("\t");
+    _builder.append("var divId = this.getState().htmlTagId+\"_div\";");
     _builder.newLine();
     _builder.append("\t");
-    _builder.append("var tree = d3.layout.tree()");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append(".size([height, width]);");
+    _builder.append("var inputId = this.getState().htmlTagId+\"_input\";");
     _builder.newLine();
     _builder.append("\t");
+    _builder.append("var element = this.getElement();");
     _builder.newLine();
     _builder.append("\t");
-    _builder.append("var diagonal = d3.svg.diagonal()");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append(".projection(function(d) { return [d.y, d.x]; });");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("var cxD3TreeJsHTMLRootComponent = this.getElement();");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("cxD3TreeJsHTMLRootComponent.innerHTML = \t");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t");
-    _builder.append("\"<label><input id=\\\"\"+this.getState().htmlTagId+\"_input\\\" type=\\\"radio\\\" name=\\\"mode\\\" value=\\\"expand\\\">Expand</label>\\n\" +");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t");
-    _builder.append("\"<label><input id=\\\"\"+this.getState().htmlTagId+\"_input\\\" type=\\\"radio\\\" name=\\\"mode\\\" value=\\\"collapse\\\" checked>Collapse</label>\\n\" +");
-    _builder.newLine();
-    _builder.append("\t\t\t\t\t");
-    _builder.append("\"<div id=\\\"\"+this.getState().htmlTagId+\"_div\\\">\" + \"</div>\";\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("var cxD3TreeJsHTMLRootComponentSelection = d3.select(cxD3TreeJsHTMLRootComponent).select(\"#\"+this.getState().htmlTagId+\"_div\");");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("var cxD3TreeJsHTMLRootComponentSvg = cxD3TreeJsHTMLRootComponentSelection.append(\"svg\")");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append(".attr(\"width\", width + margin.right + margin.left)");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append(".attr(\"height\", height + margin.top + margin.bottom)");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append(".append(\"g\")");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append(".attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");");
+    _builder.append("var data = JSON.parse(this.getState().jsonData);");
     _builder.newLine();
     _builder.newLine();
     _builder.append("\t");
@@ -609,330 +572,475 @@
     _builder.append("\t");
     _builder.append("}");
     _builder.newLine();
-    _builder.append("\t");
     _builder.newLine();
     _builder.append("\t");
-    _builder.append("jsonTreeFunction = function(jsonData) {");
+    _builder.append("change = function(value) {");
     _builder.newLine();
     _builder.append("\t\t");
-    _builder.append("cxD3TreeJsComponent_jsonRoot = jsonData;");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("cxD3TreeJsComponent_jsonRoot.x0 = height / 2;");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("cxD3TreeJsComponent_jsonRoot.y0 = 0;");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.newLine();
-    _builder.append("\t\t  ");
-    _builder.append("cxD3TreeJsComponent_jsonRoot.children.forEach(collapse);");
-    _builder.newLine();
-    _builder.append("\t\t  ");
-    _builder.append("update(cxD3TreeJsComponent_jsonRoot);");
-    _builder.newLine();
-    _builder.append("\t\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("jsonTreeFunction(JSON.parse(this.getState().jsonData));");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("d3.select(cxD3TreeJsHTMLRootComponent).select(self.frameElement).style(\"height\", \"800px\");");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("d3.select(cxD3TreeJsHTMLRootComponent).selectAll(\"#\"+this.getState().htmlTagId+\"_input\").on(\"change\", function change() {");
-    _builder.newLine();
-    _builder.append("//\t\talert(\"this.value = \" + this.value);");
+    _builder.append("//alert(\"value = \" + value);");
     _builder.newLine();
     _builder.append("\t    ");
-    _builder.append("if (this.value === \"expand\"){");
+    _builder.append("if (value === \"expand\"){");
     _builder.newLine();
     _builder.append("\t    \t");
-    _builder.append("cxD3TreeJsComponent_jsonRoot.children.forEach(expand);");
+    _builder.append("data.children.forEach(expand);");
     _builder.newLine();
     _builder.append("\t    ");
     _builder.append("} else {");
     _builder.newLine();
     _builder.append("\t    \t");
-    _builder.append("cxD3TreeJsComponent_jsonRoot.children.forEach(collapse);");
+    _builder.append("data.children.forEach(collapse);");
     _builder.newLine();
     _builder.append("\t    ");
     _builder.append("}");
     _builder.newLine();
     _builder.append("\t    ");
-    _builder.append("update(cxD3TreeJsComponent_jsonRoot);");
+    _builder.append("update(data);");
     _builder.newLine();
     _builder.append("\t");
-    _builder.append("});");
+    _builder.append("}");
     _builder.newLine();
     _builder.newLine();
     _builder.append("\t");
+    _builder.append("element.innerHTML = \t");
+    _builder.newLine();
+    _builder.append("\t\t\t\t\t");
+    _builder.append("\"<label><input id=\\\"\"+inputId+\"\\\" type=\\\"radio\\\" name=\\\"mode\\\" onChange=\'change(\\\"expand\\\")\' value=\\\"expand\\\">Expand</label>\\n\" +");
+    _builder.newLine();
+    _builder.append("\t\t\t\t\t");
+    _builder.append("\"<label><input id=\\\"\"+inputId+\"\\\" type=\\\"radio\\\" name=\\\"mode\\\" onChange=\'change(\\\"collapse\\\")\' value=\\\"collapse\\\" checked>Collapse</label>\\n\" +");
+    _builder.newLine();
+    _builder.append("\t\t\t\t\t");
+    _builder.append("\"<div id=\\\"\"+divId+\"\\\">\" + \"</div>\";\t");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var div = d3.select(element).select(\"#\"+divId);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("var svg = div.append(\"svg\")");
+    _builder.newLine();
+    _builder.append("\t    ");
+    _builder.append(".attr(\"width\", width)");
+    _builder.newLine();
+    _builder.append("\t    ");
+    _builder.append(".attr(\"height\", height)");
+    _builder.newLine();
+    _builder.append("\t  \t");
+    _builder.append(".append(\"g\")");
+    _builder.newLine();
+    _builder.append("\t    ");
+    _builder.append(".attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.newLine();
+    _builder.append("\t");
     _builder.append("function update(source) {");
     _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Compute the new tree layout.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var nodes = tree.nodes(cxD3TreeJsComponent_jsonRoot).reverse(),");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append("links = tree.links(nodes);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Normalize for fixed-depth.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodes.forEach(function(d) { d.y = d.depth * 180; });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Update the nodes€¦");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var node = cxD3TreeJsHTMLRootComponentSvg.selectAll(\"g.node\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".data(nodes, function(d) { return d.id || (d.id = ++i); });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Enter any new nodes at the parent\'s previous position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var nodeEnter = node.enter().append(\"g\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"class\", \"node\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"transform\", function(d) { return \"translate(\" + source.y0 + \",\" + source.x0 + \")\"; })");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".on(\"click\", click);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeEnter.append(\"circle\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"r\", 1e-6)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".style(\"fill\", function(d) { return d._children ? \"lightsteelblue\" : \"#fff\"; });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeEnter.append(\"text\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"x\", function(d) { return d.children || d._children ? -10 : 10; })");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"dy\", \".35em\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"text-anchor\", function(d) { return d.children || d._children ? \"end\" : \"start\"; })");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".text(function(d) { return d.name; })");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".style(\"fill-opacity\", 1e-6);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Transition nodes to their new position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var nodeUpdate = node.transition()");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".duration(duration)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"transform\", function(d) { return \"translate(\" + d.y + \",\" + d.x + \")\"; });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeUpdate.select(\"circle\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"r\", 4.5)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".style(\"fill\", function(d) { return d._children ? \"lightsteelblue\" : \"#fff\"; });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeUpdate.select(\"text\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".style(\"fill-opacity\", 1);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Transition exiting nodes to the parent\'s new position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var nodeExit = node.exit().transition()");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".duration(duration)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"transform\", function(d) { return \"translate(\" + source.y + \",\" + source.x + \")\"; })");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".remove();");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeExit.select(\"circle\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"r\", 1e-6);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodeExit.select(\"text\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".style(\"fill-opacity\", 1e-6);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Update the links€¦");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("var link = cxD3TreeJsHTMLRootComponentSvg.selectAll(\"path.link\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".data(links, function(d) { return d.target.id; });");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Enter any new links at the parent\'s previous position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("link.enter().insert(\"path\", \"g\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"class\", \"link\")");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"d\", function(d) {");
-    _builder.newLine();
-    _builder.append("\t        ");
-    _builder.append("var o = {x: source.x0, y: source.y0};");
-    _builder.newLine();
-    _builder.append("\t        ");
-    _builder.append("return diagonal({source: o, target: o});");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append("});");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Transition links to their new position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("link.transition()");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".duration(duration)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"d\", diagonal);");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Transition exiting nodes to the parent\'s new position.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("link.exit().transition()");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".duration(duration)");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".attr(\"d\", function(d) {");
-    _builder.newLine();
-    _builder.append("\t        ");
-    _builder.append("var o = {x: source.x, y: source.y};");
-    _builder.newLine();
-    _builder.append("\t        ");
-    _builder.append("return diagonal({source: o, target: o});");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append("})");
-    _builder.newLine();
-    _builder.append("\t      ");
-    _builder.append(".remove();");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("// Stash the old positions for transition.");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("nodes.forEach(function(d) {");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append("d.x0 = d.x;");
-    _builder.newLine();
-    _builder.append("\t    ");
-    _builder.append("d.y0 = d.y;");
-    _builder.newLine();
-    _builder.append("\t  ");
-    _builder.append("});");
-    _builder.newLine();
-    _builder.append("\t");
-    _builder.append("}");
-    _builder.newLine();
-    _builder.newLine();
-    _builder.append("\t");
+    _builder.append("\t\t");
     _builder.append("// Toggle children on click.");
     _builder.newLine();
-    _builder.append("\t");
+    _builder.append("\t\t");
     _builder.append("function click(d) {");
     _builder.newLine();
-    _builder.append("\t  ");
+    _builder.append("\t\t\t");
     _builder.append("if (d.children) {");
     _builder.newLine();
-    _builder.append("\t    ");
+    _builder.append("\t\t\t\t");
     _builder.append("d._children = d.children;");
     _builder.newLine();
-    _builder.append("\t    ");
+    _builder.append("\t\t\t\t");
     _builder.append("d.children = null;");
     _builder.newLine();
-    _builder.append("\t  ");
+    _builder.append("\t\t\t");
     _builder.append("} else {");
     _builder.newLine();
-    _builder.append("\t    ");
+    _builder.append("\t\t\t\t");
     _builder.append("d.children = d._children;");
     _builder.newLine();
-    _builder.append("\t    ");
+    _builder.append("\t\t\t\t");
     _builder.append("d._children = null;");
     _builder.newLine();
-    _builder.append("\t  ");
+    _builder.append("\t\t\t");
     _builder.append("}");
     _builder.newLine();
-    _builder.append("\t  ");
+    _builder.append("\t\t\t");
     _builder.append("update(d);");
     _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var tree = d3.tree()");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".size([width>height?height:width, width>height?height:width]);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var treeData = tree(root);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Compute the new tree layout.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var nodes = treeData.descendants();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var links = treeData.descendants().slice(1);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Normalize for fixed-depth.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodes.forEach(function(d) { ");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("d.y = d.depth * 180;");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// ****************** Nodes section ***************************");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Update the nodes");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var node = svg.selectAll(\"g.node\").data(nodes, function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.id || (d.id = ++i);");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Enter any new nodes at the parent\'s previous position.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var nodeEnter = node.enter().append(\"g\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"class\", \"node\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"transform\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return \"translate(\" + source.y0 + \",\" + source.x0 + \")\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".on(\"click\", click);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeEnter.append(\"circle\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"class\", \"node\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"r\", 1e-6)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"fill\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d._children ? \"lightsteelblue\" : \"#fff\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeEnter.append(\"text\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"dy\", \".35em\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"x\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.children || d._children ? -13 : 13;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"text-anchor\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.children || d._children ? \"end\" : \"start\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".text(function(d) { ");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d.data.name;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// UPDATE");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var nodeUpdate = nodeEnter.merge(node);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Transition nodes to their new position.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeUpdate.transition()");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".duration(duration)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"transform\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return \"translate(\" + d.y + \",\" + d.x + \")\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeUpdate.select(\"circle.node\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"r\", 4.5)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".style(\"fill\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return d._children ? \"lightsteelblue\" : \"#fff\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\'cursor\', \'pointer\');");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Transition exiting nodes to the parent\'s new position.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var nodeExit = node.exit().transition()");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".duration(duration)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"transform\", function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return \"translate(\" + source.y + \",\" + source.x + \")\";");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".remove();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeExit.select(\"circle\").attr(\"r\", 1e-6);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodeExit.select(\"text\").style(\"fill-opacity\", 1e-6);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// ****************** links section ***************************");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Update the links...");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var link = svg.selectAll(\'path.link\')");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".data(links, function(d) { return d.id; });");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Enter any new links at the parent\'s previous position.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var linkEnter = link.enter().insert(\'path\', \"g\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\"class\", \"link\")");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\'d\', function(d){");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("var o = {x: source.x0, y: source.y0}");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return diagonal(o, o)");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// UPDATE");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var linkUpdate = linkEnter.merge(link);");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Transition back to the parent element position");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("linkUpdate.transition()");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".duration(duration)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\'d\', function(d){");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return diagonal(d, d.parent)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Remove any exiting links");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("var linkExit = link.exit().transition()");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".duration(duration)");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".attr(\'d\', function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("var o = {x: source.x, y: source.y}");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("return diagonal(o, o)");
+    _builder.newLine();
+    _builder.append("\t\t\t\t");
+    _builder.append("})");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append(".remove();");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Store the old positions for transition.");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("nodes.forEach(function(d){");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("d.x0 = d.x;");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("d.y0 = d.y;");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("// Creates a curved (diagonal) path from parent to the child nodes");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("function diagonal(s, d) {");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("path = `M ${s.y} ${s.x}");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("C ${(s.y + d.y) / 2} ${s.x},");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("${(s.y + d.y) / 2} ${d.x},");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("${d.y} ${d.x}`");
+    _builder.newLine();
+    _builder.append("\t\t\t");
+    _builder.append("return path");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("}");
+    _builder.newLine();
     _builder.append("\t");
     _builder.append("}");
     _builder.newLine();
     _builder.newLine();
+    _builder.append("\t");
+    _builder.append("root = d3.hierarchy(data, function(d) {");
+    _builder.newLine();
+    _builder.append("\t\t");
+    _builder.append("return d.children;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("});");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("root.x0 = height / 2;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("root.y0 = 0;");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("root.children.forEach(expand);");
+    _builder.newLine();
+    _builder.append("\t");
+    _builder.append("update(root);");
+    _builder.newLine();
     _builder.append("}");
     _builder.newLine();
     strBuilder.append(_builder);
diff --git a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.java b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.java
index 37ca15b..07019ba 100644
--- a/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.java
+++ b/org.eclipse.osbp.xtext.chart/xtend-gen/org/eclipse/osbp/xtext/chart/jvmmodel/D3JsJavaUtil.java
@@ -16,21 +16,14 @@
  */
 package org.eclipse.osbp.xtext.chart.jvmmodel;
 
-import javax.inject.Inject;
 import org.eclipse.emf.ecore.EObject;
 import org.eclipse.osbp.xtext.chart.Chart;
 import org.eclipse.osbp.xtext.chart.ChartOption;
 import org.eclipse.osbp.xtext.chart.ChartPackage;
 import org.eclipse.osbp.xtext.chart.ChartTree;
-import org.eclipse.xtext.naming.IQualifiedNameProvider;
-import org.eclipse.xtext.xbase.lib.Extension;
 
 @SuppressWarnings("all")
 public class D3JsJavaUtil {
-  @Inject
-  @Extension
-  private IQualifiedNameProvider _iQualifiedNameProvider;
-  
   public ChartTree getChartTreeMap(final Chart chart) {
     ChartOption _charttype = chart.getCharttype();
     if ((_charttype instanceof ChartTree)) {