diff --git a/docs/index-d3v4-test.html b/docs/index-d3v4-test.html
index 55e2800..53736f6 100644
--- a/docs/index-d3v4-test.html
+++ b/docs/index-d3v4-test.html
@@ -53,6 +53,7 @@ <h4>Personality Insights Sunburst Chart</h4>
     </div>
 
     <script>
+      var chart = null;
       var options = {
         selector: '#sunburstChart',
         version: 'v2',
@@ -61,39 +62,81 @@ <h4>Personality Insights Sunburst Chart</h4>
       };
 
       $('#personality-insights-v2').click(function() {
-        options.version = 'v2';
-        $('#personality-insights-v2').removeClass('btn-default').addClass('btn-primary');
-        $('#personality-insights-v3').removeClass('btn-primary').addClass('btn-default');
-        show();
+        if (!chart || options.version === 'v3') {
+          options.version = 'v2';
+          show();
+        } else {
+          options.version = 'v2';
+          $.getJSON(getFilePath(), '', function ( profile ) {
+            // TODO: randomize data in profile
+            chart.setProfile(profile);
+          });
+        }
+        updateButtonClasses();
       });
 
       $('#personality-insights-v3').click(function() {
-        options.version = 'v3';
-        $('#personality-insights-v2').removeClass('btn-primary').addClass('btn-default');
-        $('#personality-insights-v3').removeClass('btn-default').addClass('btn-primary');
-        show();
+        if (!chart || options.version === 'v2') {
+          options.version = 'v3';
+          show();
+        } else {
+          options.version = 'v3';
+          $.getJSON(getFilePath(), '', function ( profile ) {
+            // TODO: randomize data in profile
+            chart.setProfile(profile);
+          });
+        }
+        updateButtonClasses();
       });
 
       $('#locale-en').click(function() {
         options.locale = 'en';
-        $('#locale-en').removeClass('btn-default').addClass('btn-primary');
-        $('#locale-es').removeClass('btn-primary').addClass('btn-default');
-        show();
+        if (chart) {
+          chart.setLocale('en', true);
+        } else {
+          show();
+        }
+        updateButtonClasses();
       });
 
       $('#locale-es').click(function() {
         options.locale = 'es';
-        $('#locale-en').removeClass('btn-primary').addClass('btn-default');
-        $('#locale-es').removeClass('btn-default').addClass('btn-primary');
-        show();
+        if (chart) {
+          chart.setLocale('es', true);
+        } else {
+          show();
+        }
+        updateButtonClasses();
       });
 
+      function updateButtonClasses() {
+        if (options.locale === 'es') {
+          $('#locale-en').removeClass('btn-primary').addClass('btn-default');
+          $('#locale-es').removeClass('btn-default').addClass('btn-primary');
+        } else {
+          $('#locale-en').removeClass('btn-default').addClass('btn-primary');
+          $('#locale-es').removeClass('btn-primary').addClass('btn-default');
+        }
+
+        if (options.version === 'v2') {
+          $('#personality-insights-v2').removeClass('btn-default').addClass('btn-primary');
+          $('#personality-insights-v3').removeClass('btn-primary').addClass('btn-default');
+        } else {
+          $('#personality-insights-v2').removeClass('btn-primary').addClass('btn-default');
+          $('#personality-insights-v3').removeClass('btn-default').addClass('btn-primary');
+        }
+      }
+
+      function getFilePath() {
+        var suffix = Math.random() > 0.5 ? '_2' : '';
+        return './profiles/en_' + options.version + suffix + '.json';
+      }
+
       function show() {
-        var file = './profiles/en_' + options.version + '.json';
-        $.getJSON(file, '', function ( profile ) {
+        $.getJSON(getFilePath(), '', function ( profile ) {
           $('#profile').empty();
           $('#profile').append('<pre>' + JSON.stringify(profile, null, 2) + '</pre>');
-          var chart = new PersonalitySunburstChart(options);
+          chart = new PersonalitySunburstChart(options);
           chart.show(profile, './profile_photo.jpg');
         });
       }
diff --git a/docs/index-test.html b/docs/index-test.html
index 3619390..929e6bb 100644
--- a/docs/index-test.html
+++ b/docs/index-test.html
@@ -51,6 +51,7 @@ <h4>Personality Insights Sunburst Chart</h4>
     </div>
 
     <script>
+      var chart = null;
       var options = {
         selector: '#sunburstChart',
         version: 'v2',
@@ -59,39 +60,79 @@ <h4>Personality Insights Sunburst Chart</h4>
       };
 
       $('#personality-insights-v2').click(function() {
-        options.version = 'v2';
-        $('#personality-insights-v2').removeClass('btn-default').addClass('btn-primary');
-        $('#personality-insights-v3').removeClass('btn-primary').addClass('btn-default');
-        show();
+        if (!chart || options.version === 'v3') {
+          options.version = 'v2';
+          show();
+        } else {
+          options.version = 'v2';
+          $.getJSON(getFilePath(), '', function ( profile ) {
+            chart.setProfile(profile);
+          });
+        }
+        updateButtonClasses();
       });
 
       $('#personality-insights-v3').click(function() {
-        options.version = 'v3';
-        $('#personality-insights-v2').removeClass('btn-primary').addClass('btn-default');
-        $('#personality-insights-v3').removeClass('btn-default').addClass('btn-primary');
-        show();
+        if (!chart || options.version === 'v2') {
+          options.version = 'v3';
+          show();
+        } else {
+          options.version = 'v3';
+          $.getJSON(getFilePath(), '', function ( profile ) {
+            chart.setProfile(profile);
+          });
+        }
+        updateButtonClasses();
       });
 
       $('#locale-en').click(function() {
         options.locale = 'en';
-        $('#locale-en').removeClass('btn-default').addClass('btn-primary');
-        $('#locale-es').removeClass('btn-primary').addClass('btn-default');
-        show();
+        if (chart) {
+          chart.setLocale('en', true);
+        } else {
+          show();
+        }
+        updateButtonClasses();
       });
 
       $('#locale-es').click(function() {
         options.locale = 'es';
-        $('#locale-en').removeClass('btn-primary').addClass('btn-default');
-        $('#locale-es').removeClass('btn-default').addClass('btn-primary');
-        show();
+        if (chart) {
+          chart.setLocale('es', true);
+        } else {
+          show();
+        }
+        updateButtonClasses();
       });
 
+      function updateButtonClasses() {
+        if (options.locale === 'es') {
+          $('#locale-en').removeClass('btn-primary').addClass('btn-default');
+          $('#locale-es').removeClass('btn-default').addClass('btn-primary');
+        } else {
+          $('#locale-en').removeClass('btn-default').addClass('btn-primary');
+          $('#locale-es').removeClass('btn-primary').addClass('btn-default');
+        }
+
+        if (options.version === 'v2') {
+          $('#personality-insights-v2').removeClass('btn-default').addClass('btn-primary');
+          $('#personality-insights-v3').removeClass('btn-primary').addClass('btn-default');
+        } else {
+          $('#personality-insights-v2').removeClass('btn-primary').addClass('btn-default');
+          $('#personality-insights-v3').removeClass('btn-default').addClass('btn-primary');
+        }
+      }
+
+      function getFilePath() {
+        var suffix = Math.random() > 0.5 ? '_2' : '';
+        return './profiles/en_' + options.version + suffix + '.json';
+      }
+
       function show() {
-        var file = './profiles/en_' + options.version + '.json';
-        $.getJSON(file, '', function ( profile ) {
+        $.getJSON(getFilePath(), '', function ( profile ) {
           $('#profile').empty();
           $('#profile').append('<pre>' + JSON.stringify(profile, null, 2) + '</pre>');
-          var chart = new PersonalitySunburstChart(options);
+          chart = new PersonalitySunburstChart(options);
           chart.show(profile, './profile_photo.jpg');
         });
       }
diff --git a/docs/profiles/en_v2_2.json b/docs/profiles/en_v2_2.json
new file mode 100644
index 0000000..78f0373
--- /dev/null
+++ b/docs/profiles/en_v2_2.json
@@ -0,0 +1,429 @@
+{
+  "id": "*UNKNOWN*",
+  "source": "*UNKNOWN*",
+  "word_count": 6582,
+  "processed_lang": "en",
+  "tree": {
+    "id": "r",
+    "name": "root",
+    "children": [
+      {
+        "id": "personality",
+        "name": "Big 5",
+        "children": [
+          {
+            "id": "Openness_parent",
+            "name": "Openness",
+            "category": "personality",
+            "percentage": 0.9805667785359738,
+            "children": [
+              {
+                "id": "Openness",
+                "name": "Openness",
+                "category": "personality",
+                "percentage": 0.1,
+                "sampling_error": 0.05055925272,
+                "children": [
+                  {
+                    "id": "Adventurousness",
+                    "name": "Adventurousness",
+                    "category": "personality",
+                    "percentage": 0.3,
+                    "sampling_error": 0.0446642816
+                  },
+                  {
+                    "id": "Artistic interests",
+                    "name": "Artistic interests",
+                    "category": "personality",
+                    "percentage": 0.4,
+                    "sampling_error": 0.09146252496
+                  },
+                  {
+                    "id": "Emotionality",
+                    "name": "Emotionality",
+                    "category": "personality",
+                    "percentage": 0.5,
+                    "sampling_error": 0.04151224904
+                  },
+                  {
+                    "id": "Imagination",
+                    "name": "Imagination",
+                    "category": "personality",
+                    "percentage": 0.6,
+                    "sampling_error": 0.05539459304
+                  },
+                  {
+                    "id": "Intellect",
+                    "name": "Intellect",
+                    "category": "personality",
+                    "percentage": 0.7,
+                    "sampling_error": 0.04812533736
+                  },
+                  {
+                    "id": "Liberalism",
+                    "name": "Authority-challenging",
+                    "category": "personality",
+                    "percentage": 0.8,
+                    "sampling_error": 0.07417368224
+                  }
+                ]
+              },
+              {
+                "id": "Conscientiousness",
+                "name": "Conscientiousness",
+                "category": "personality",
+                "percentage": 0.8936538116484918,
+                "sampling_error": 0.06413948688,
+                "children": [
+                  {
+                    "id": "Achievement striving",
+                    "name": "Achievement striving",
+                    "category": "personality",
+                    "percentage": 0.9216597978352439,
+                    "sampling_error": 0.08711601256
+                  },
+                  {
+                    "id": "Cautiousness",
+                    "name": "Cautiousness",
+                    "category": "personality",
+                    "percentage": 0.9589003591814163,
+                    "sampling_error": 0.08097586712
+                  },
+                  {
+                    "id": "Dutifulness",
+                    "name": "Dutifulness",
+                    "category": "personality",
+                    "percentage": 0.7565446465573455,
+                    "sampling_error": 0.05347717848
+                  },
+                  {
+                    "id": "Orderliness",
+                    "name": "Orderliness",
+                    "category": "personality",
+                    "percentage": 0.48132376796768517,
+                    "sampling_error": 0.06152930288
+                  },
+                  {
+                    "id": "Self-discipline",
+                    "name": "Self-discipline",
+                    "category": "personality",
+                    "percentage": 0.8215063478296609,
+                    "sampling_error": 0.04176505304
+                  },
+                  {
+                    "id": "Self-efficacy",
+                    "name": "Self-efficacy",
+                    "category": "personality",
+                    "percentage": 0.908624607288198,
+                    "sampling_error": 0.080106246
+                  }
+                ]
+              },
+              {
+                "id": "Extraversion",
+                "name": "Extraversion",
+                "category": "personality",
+                "percentage": 0.3362575928970771,
+                "sampling_error": 0.0484772776,
+                "children": [
+                  {
+                    "id": "Activity level",
+                    "name": "Activity level",
+                    "category": "personality",
+                    "percentage": 0.9789796271350255,
+                    "sampling_error": 0.06734960408
+                  },
+                  {
+                    "id": "Assertiveness",
+                    "name": "Assertiveness",
+                    "category": "personality",
+                    "percentage": 0.9825306758805727,
+                    "sampling_error": 0.07159494336
+                  },
+                  {
+                    "id": "Cheerfulness",
+                    "name": "Cheerfulness",
+                    "category": "personality",
+                    "percentage": 0.19465786707554655,
+                    "sampling_error": 0.08989876216
+                  },
+                  {
+                    "id": "Excitement-seeking",
+                    "name": "Excitement-seeking",
+                    "category": "personality",
+                    "percentage": 0.21503977702456123,
+                    "sampling_error": 0.07371680448000001
+                  },
+                  {
+                    "id": "Friendliness",
+                    "name": "Outgoing",
+                    "category": "personality",
+                    "percentage": 0.6005946078251523,
+                    "sampling_error": 0.06625280248
+                  },
+                  {
+                    "id": "Gregariousness",
+                    "name": "Gregariousness",
+                    "category": "personality",
+                    "percentage": 0.24206546142537544,
+                    "sampling_error": 0.051361828320000004
+                  }
+                ]
+              },
+              {
+                "id": "Agreeableness",
+                "name": "Agreeableness",
+                "category": "personality",
+                "percentage": 0.0533865832349148,
+                "sampling_error": 0.08605852776,
+                "children": [
+                  {
+                    "id": "Altruism",
+                    "name": "Altruism",
+                    "category": "personality",
+                    "percentage": 0.8722252950552395,
+                    "sampling_error": 0.0616772748
+                  },
+                  {
+                    "id": "Cooperation",
+                    "name": "Cooperation",
+                    "category": "personality",
+                    "percentage": 0.7599846803277625,
+                    "sampling_error": 0.07160543208
+                  },
+                  {
+                    "id": "Modesty",
+                    "name": "Modesty",
+                    "category": "personality",
+                    "percentage": 0.34947264959955104,
+                    "sampling_error": 0.0473912608
+                  },
+                  {
+                    "id": "Morality",
+                    "name": "Uncompromising",
+                    "category": "personality",
+                    "percentage": 0.6480217001263691,
+                    "sampling_error": 0.05506624192
+                  },
+                  {
+                    "id": "Sympathy",
+                    "name": "Sympathy",
+                    "category": "personality",
+                    "percentage": 0.9812271982935261,
+                    "sampling_error": 0.0855425504
+                  },
+                  {
+                    "id": "Trust",
+                    "name": "Trust",
+                    "category": "personality",
+                    "percentage": 0.9240876717984589,
+                    "sampling_error": 0.0480956124
+                  }
+                ]
+              },
+              {
+                "id": "Neuroticism",
+                "name": "Emotional range",
+                "category": "personality",
+                "percentage": 0.9212642329050765,
+                "sampling_error": 0.07824502704,
+                "children": [
+                  {
+                    "id": "Anger",
+                    "name": "Fiery",
+                    "category": "personality",
+                    "percentage": 0.016657350192117615,
+                    "sampling_error": 0.082303344
+                  },
+                  {
+                    "id": "Anxiety",
+                    "name": "Prone to worry",
+                    "category": "personality",
+                    "percentage": 0.049689060282152586,
+                    "sampling_error": 0.047158873680000005
+                  },
+                  {
+                    "id": "Depression",
+                    "name": "Melancholy",
+                    "category": "personality",
+                    "percentage": 0.2725502659709549,
+                    "sampling_error": 0.049190098960000005
+                  },
+                  {
+                    "id": "Immoderation",
+                    "name": "Immoderation",
+                    "category": "personality",
+                    "percentage": 0.006015482455870191,
+                    "sampling_error": 0.04641930216
+                  },
+                  {
+                    "id": "Self-consciousness",
+                    "name": "Self-consciousness",
+                    "category": "personality",
+                    "percentage": 0.1257492389288613,
+                    "sampling_error": 0.04831067336
+                  },
+                  {
+                    "id": "Vulnerability",
+                    "name": "Susceptible to stress",
+                    "category": "personality",
+                    "percentage": 0.057796181331887075,
+                    "sampling_error": 0.07381514336
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "needs",
+        "name": "Needs",
+        "children": [
+          {
+            "id": "Ideal_parent",
+            "name": "Ideal",
+            "category": "needs",
+            "percentage": 0.008168529100234745,
+            "children": [
+              {
+                "id": "Challenge",
+                "name": "Challenge",
+                "category": "needs",
+                "percentage": 0.009295974292889309,
+                "sampling_error": 0.07250047111999999
+              },
+              {
+                "id": "Closeness",
+                "name": "Closeness",
+                "category": "needs",
+                "percentage": 0.16009921929894821,
+                "sampling_error": 0.07185326736
+              },
+              {
+                "id": "Curiosity",
+                "name": "Curiosity",
+                "category": "needs",
+                "percentage": 0.6536846492707111,
+                "sampling_error": 0.10148057399999999
+              },
+              {
+                "id": "Excitement",
+                "name": "Excitement",
+                "category": "needs",
+                "percentage": 0.09364803322659232,
+                "sampling_error": 0.09141073559999999
+              },
+              {
+                "id": "Harmony",
+                "name": "Harmony",
+                "category": "needs",
+                "percentage": 0.0576922917475059,
+                "sampling_error": 0.09109986024
+              },
+              {
+                "id": "Ideal",
+                "name": "Ideal",
+                "category": "needs",
+                "percentage": 0.008168529100234745,
+                "sampling_error": 0.08273161456
+              },
+              {
+                "id": "Liberty",
+                "name": "Liberty",
+                "category": "needs",
+                "percentage": 0.06366682309101934,
+                "sampling_error": 0.12363695304
+              },
+              {
+                "id": "Love",
+                "name": "Love",
+                "category": "needs",
+                "percentage": 0.028469441069982115,
+                "sampling_error": 0.08342424904
+              },
+              {
+                "id": "Practicality",
+                "name": "Practicality",
+                "category": "needs",
+                "percentage": 0.050598475805181176,
+                "sampling_error": 0.07383623287999999
+              },
+              {
+                "id": "Self-expression",
+                "name": "Self-expression",
+                "category": "needs",
+                "percentage": 0.040949707563547155,
+                "sampling_error": 0.07089691736
+              },
+              {
+                "id": "Stability",
+                "name": "Stability",
+                "category": "needs",
+                "percentage": 0.3829004285272741,
+                "sampling_error": 0.09041000471999999
+              },
+              {
+                "id": "Structure",
+                "name": "Structure",
+                "category": "needs",
+                "percentage": 0.8207207759334644,
+                "sampling_error": 0.06856271552
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "values",
+        "name": "Values",
+        "children": [
+          {
+            "id": "Hedonism_parent",
+            "name": "Hedonism",
+            "category": "values",
+            "percentage": 0.0029501441024047392,
+            "children": [
+              {
+                "id": "Conservation",
+                "name": "Conservation",
+                "category": "values",
+                "percentage": 0.16063478087796923,
+                "sampling_error": 0.0626580212
+              },
+              {
+                "id": "Openness to change",
+                "name": "Openness to change",
+                "category": "values",
+                "percentage": 0.5883913392447956,
+                "sampling_error": 0.056673731920000005
+              },
+              {
+                "id": "Hedonism",
+                "name": "Hedonism",
+                "category": "values",
+                "percentage": 0.0029501441024047392,
+                "sampling_error": 0.11365988424
+              },
+              {
+                "id": "Self-enhancement",
+                "name": "Self-enhancement",
+                "category": "values",
+                "percentage": 0.01213256688793024,
+                "sampling_error": 0.08692075272000001
+              },
+              {
+                "id": "Self-transcendence",
+                "name": "Self-transcendence",
+                "category": "values",
+                "percentage": 0.10538088756987435,
+                "sampling_error": 0.0655695888
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "warnings": []
+}
diff --git a/docs/profiles/en_v3_2.json b/docs/profiles/en_v3_2.json
new file mode 100644
index 0000000..d9bd979
--- /dev/null
+++ b/docs/profiles/en_v3_2.json
@@ -0,0 +1,333 @@
+{
+  "word_count": 6582,
+  "processed_language": "en",
+  "personality": [
+    {
+      "trait_id": "big5_openness",
+      "name": "Openness",
+      "category": "personality",
+      "percentile": 0.4,
+      "children": [
+        {
+          "trait_id": "facet_adventurousness",
+          "name": "Adventurousness",
+          "category": "personality",
+          "percentile": 0.7
+        },
+        {
+          "trait_id": "facet_artistic_interests",
+          "name": "Artistic interests",
+          "category": "personality",
+          "percentile": 0.2
+        },
+        {
+          "trait_id": "facet_emotionality",
+          "name": "Emotionality",
+          "category": "personality",
+          "percentile": 0.9
+        },
+        {
+          "trait_id": "facet_imagination",
+          "name": "Imagination",
+          "category": "personality",
+          "percentile": 0.3
+        },
+        {
+          "trait_id": "facet_intellect",
+          "name": "Intellect",
+          "category": "personality",
+          "percentile": 0.1
+        },
+        {
+          "trait_id": "facet_liberalism",
+          "name": "Authority-challenging",
+          "category": "personality",
+          "percentile": 0.7
+        }
+      ]
+    },
+    {
+      "trait_id": "big5_conscientiousness",
+      "name": "Conscientiousness",
+      "category": "personality",
+      "percentile": 0.8936538116484918,
+      "children": [
+        {
+          "trait_id": "facet_achievement_striving",
+          "name": "Achievement striving",
+          "category": "personality",
+          "percentile": 0.9216597978352439
+        },
+        {
+          "trait_id": "facet_cautiousness",
+          "name": "Cautiousness",
+          "category": "personality",
+          "percentile": 0.9589003591814163
+        },
+        {
+          "trait_id": "facet_dutifulness",
+          "name": "Dutifulness",
+          "category": "personality",
+          "percentile": 0.7565446465573455
+        },
+        {
+          "trait_id": "facet_orderliness",
+          "name": "Orderliness",
+          "category": "personality",
+          "percentile": 0.48132376796768517
+        },
+        {
+          "trait_id": "facet_self_discipline",
+          "name": "Self-discipline",
+          "category": "personality",
+          "percentile": 0.8215063478296609
+        },
+        {
+          "trait_id": "facet_self_efficacy",
+          "name": "Self-efficacy",
+          "category": "personality",
+          "percentile": 0.908624607288198
+        }
+      ]
+    },
+    {
+      "trait_id": "big5_extraversion",
+      "name": "Extraversion",
+      "category": "personality",
+      "percentile": 0.3362575928970771,
+      "children": [
+        {
+          "trait_id": "facet_activity_level",
+          "name": "Activity level",
+          "category": "personality",
+          "percentile": 0.9789796271350255
+        },
+        {
+          "trait_id": "facet_assertiveness",
+          "name": "Assertiveness",
+          "category": "personality",
+          "percentile": 0.9825306758805727
+        },
+        {
+          "trait_id": "facet_cheerfulness",
+          "name": "Cheerfulness",
+          "category": "personality",
+          "percentile": 0.19465786707554655
+        },
+        {
+          "trait_id": "facet_excitement_seeking",
+          "name": "Excitement-seeking",
+          "category": "personality",
+          "percentile": 0.21503977702456123
+        },
+        {
+          "trait_id": "facet_friendliness",
+          "name": "Outgoing",
+          "category": "personality",
+          "percentile": 0.6005946078251523
+        },
+        {
+          "trait_id": "facet_gregariousness",
+          "name": "Gregariousness",
+          "category": "personality",
+          "percentile": 0.24206546142537544
+        }
+      ]
+    },
+    {
+      "trait_id": "big5_agreeableness",
+      "name": "Agreeableness",
+      "category": "personality",
+      "percentile": 0.0533865832349148,
+      "children": [
+        {
+          "trait_id": "facet_altruism",
+          "name": "Altruism",
+          "category": "personality",
+          "percentile": 0.8722252950552395
+        },
+        {
+          "trait_id": "facet_cooperation",
+          "name": "Cooperation",
+          "category": "personality",
+          "percentile": 0.7599846803277625
+        },
+        {
+          "trait_id": "facet_modesty",
+          "name": "Modesty",
+          "category": "personality",
+          "percentile": 0.34947264959955104
+        },
+        {
+          "trait_id": "facet_morality",
+          "name": "Uncompromising",
+          "category": "personality",
+          "percentile": 0.6480217001263691
+        },
+        {
+          "trait_id": "facet_sympathy",
+          "name": "Sympathy",
+          "category": "personality",
+          "percentile": 0.9812271982935261
+        },
+        {
+          "trait_id": "facet_trust",
+          "name": "Trust",
+          "category": "personality",
+          "percentile": 0.9240876717984589
+        }
+      ]
+    },
+    {
+      "trait_id": "big5_neuroticism",
+      "name": "Emotional range",
+      "category": "personality",
+      "percentile": 0.9212642329050765,
+      "children": [
+        {
+          "trait_id": "facet_anger",
+          "name": "Fiery",
+          "category": "personality",
+          "percentile": 0.016657350192117615
+        },
+        {
+          "trait_id": "facet_anxiety",
+          "name": "Prone to worry",
+          "category": "personality",
+          "percentile": 0.049689060282152586
+        },
+        {
+          "trait_id": "facet_depression",
+          "name": "Melancholy",
+          "category": "personality",
+          "percentile": 0.2725502659709549
+        },
+        {
+          "trait_id": "facet_immoderation",
+          "name": "Immoderation",
+          "category": "personality",
+          "percentile": 0.006015482455870191
+        },
+        {
+          "trait_id": "facet_self_consciousness",
+          "name": "Self-consciousness",
+          "category": "personality",
+          "percentile": 0.1257492389288613
+        },
+        {
+          "trait_id": "facet_vulnerability",
+          "name": "Susceptible to stress",
+          "category": "personality",
+          "percentile": 0.057796181331887075
+        }
+      ]
+    }
+  ],
+  "needs": [
+    {
+      "trait_id": "need_challenge",
+      "name": "Challenge",
+      "category": "needs",
+      "percentile": 0.009295974292889309
+    },
+    {
+      "trait_id": "need_closeness",
+      "name": "Closeness",
+      "category": "needs",
+      "percentile": 0.16009921929894821
+    },
+    {
+      "trait_id": "need_curiosity",
+      "name": "Curiosity",
+      "category": "needs",
+      "percentile": 0.6536846492707111
+    },
+    {
+      "trait_id": "need_excitement",
+      "name": "Excitement",
+      "category": "needs",
+      "percentile": 0.09364803322659232
+    },
+    {
+      "trait_id": "need_harmony",
+      "name": "Harmony",
+      "category": "needs",
+      "percentile": 0.0576922917475059
+    },
+    {
+      "trait_id": "need_ideal",
+      "name": "Ideal",
+      "category": "needs",
+      "percentile": 0.008168529100234745
+    },
+    {
+      "trait_id": "need_liberty",
+      "name": "Liberty",
+      "category": "needs",
+      "percentile": 0.06366682309101934
+    },
+    {
+      "trait_id": "need_love",
+      "name": "Love",
+      "category": "needs",
+      "percentile": 0.028469441069982115
+    },
+    {
+      "trait_id": "need_practicality",
+      "name": "Practicality",
+      "category": "needs",
+      "percentile": 0.050598475805181176
+    },
+    {
+      "trait_id": "need_self_expression",
+      "name": "Self-expression",
+      "category": "needs",
+      "percentile": 0.040949707563547155
+    },
+    {
+      "trait_id": "need_stability",
+      "name": "Stability",
+      "category": "needs",
+      "percentile": 0.3829004285272741
+    },
+    {
+      "trait_id": "need_structure",
+      "name": "Structure",
+      "category": "needs",
+      "percentile": 0.8207207759334644
+    }
+  ],
+  "values": [
+    {
+      "trait_id": "value_conservation",
+      "name": "Conservation",
+      "category": "values",
+      "percentile": 0.16063478087796923
+    },
+    {
+      "trait_id": "value_openness_to_change",
+      "name": "Openness to change",
+      "category": "values",
+      "percentile": 0.5883913392447956
+    },
+    {
+      "trait_id": "value_hedonism",
+      "name": "Hedonism",
+      "category": "values",
+      "percentile": 0.0029501441024047392
+    },
+    {
+      "trait_id": "value_self_enhancement",
+      "name": "Self-enhancement",
+      "category": "values",
+      "percentile": 0.01213256688793024
+    },
+    {
+      "trait_id": "value_self_transcendence",
+      "name": "Self-transcendence",
+      "category": "values",
+      "percentile": 0.10538088756987435
+    }
+  ],
+  "warnings": []
+}
diff --git a/src/d3-profile-wrappers/v2/index.js b/src/d3-profile-wrappers/v2/index.js
index 2085761..0b6c463 100644
--- a/src/d3-profile-wrappers/v2/index.js
+++ b/src/d3-profile-wrappers/v2/index.js
@@ -57,11 +57,12 @@ class PersonalityProfile {
 
   traitsTree(){
     var self = this;
+    const mostSignificantValue = this.mostSignificantChild(this._traits.children);
     return {
-      name: self._traitNames.name(this.traitWithHighestScore().id),
-      id: this.traitWithHighestScore().id,
-      category: this.traitWithHighestScore().category,
-      score: this.traitWithHighestScore().percentage,
+      name: self._traitNames.name(mostSignificantValue.id),
+      id: mostSignificantValue.id + '_parent',
+      category: mostSignificantValue.category,
+      score: mostSignificantValue.percentage,
       children: this._traits.children.map(function(t) {
         return {
           name: self._traitNames.name(t.id),
@@ -83,11 +84,12 @@ class PersonalityProfile {
 
   needsTree(){
     var self = this;
+    const mostSignificantValue = this.mostSignificantChild(this._needs.children);
     return {
-      name: self._traitNames.name(this.needWithHighestScore().id),
-      id: this.needWithHighestScore().id,
-      category: this.needWithHighestScore().category,
-      score: this.needWithHighestScore().percentage,
+      name: self._traitNames.name(mostSignificantValue.id),
+      id: mostSignificantValue.id + '_parent',
+      category: mostSignificantValue.category,
+      score: mostSignificantValue.percentage,
       children: this._needs.children.map(function(n) {
         return {
           name: self._traitNames.name(n.id),
@@ -101,11 +103,12 @@ class PersonalityProfile {
 
   valuesTree(){
     var self = this;
+    const mostSignificantValue = this.mostSignificantChild(this._values.children);
     return {
-      name: self._traitNames.name(this.valueWithHighestScore().id),
-      id: this.valueWithHighestScore().id,
-      category: this.valueWithHighestScore().category,
-      score: this.valueWithHighestScore().percentage,
+      name: self._traitNames.name(mostSignificantValue.id),
+      id: mostSignificantValue.id + '_parent',
+      category: mostSignificantValue.category,
+      score: mostSignificantValue.percentage,
       children: this._values.children.map(function(v) {
         return {
           name: self._traitNames.name(v.id),
@@ -117,18 +120,20 @@ class PersonalityProfile {
     };
   }
 
-  traitWithHighestScore(){
-    return this._traits;
-  }
-
-  needWithHighestScore(){
-    return this._needs;
-  }
+  mostSignificantChild(children){
+    const threshold = 0.5;
+    let farthestDistance = 0;
+    let childWithScoreFarthestFromThreshold = null;
 
-  valueWithHighestScore(){
-    return this._values;
+    for (let i = 0; i < children.length; i++) {
+      const distance = Math.abs(children[i].percentage - threshold);
+      if(distance >= farthestDistance){
+        childWithScoreFarthestFromThreshold = children[i];
+        farthestDistance = distance;
+      }
+    }
+    return childWithScoreFarthestFromThreshold;
   }
-
 }
 
 module.exports = PersonalityProfile;
diff --git a/src/d3-profile-wrappers/v3/index.js b/src/d3-profile-wrappers/v3/index.js
index f62a93c..06040b7 100644
--- a/src/d3-profile-wrappers/v3/index.js
+++ b/src/d3-profile-wrappers/v3/index.js
@@ -135,7 +135,6 @@ class PersonalityProfile {
     }
     return childWithScoreFarthestFromThreshold;
   }
-
 }
 
 module.exports = PersonalityProfile;
diff --git a/src/d3-renderers/svg-single-arc.js b/src/d3-renderers/svg-single-arc.js
new file mode 100644
index 0000000..a31b12c
--- /dev/null
+++ b/src/d3-renderers/svg-single-arc.js
@@ -0,0 +1,65 @@
+function d3_svg_singleArcRadius(d) {
+  return d.radius;
+}
+
+function d3_svg_singleArcStartAngle(d) {
+  return d.startAngle;
+}
+
+function d3_svg_singleArcEndAngle(d) {
+  return d.endAngle;
+}
+
+function functor(v) {
+  return typeof v === 'function' ? v : function() { return v; };
+}
+
+function singleArc() {
+  var radius = d3_svg_singleArcRadius,
+    startAngle = d3_svg_singleArcStartAngle,
+    endAngle = d3_svg_singleArcEndAngle,
+    d3_svg_arcOffset = -Math.PI / 2;
+
+  function arc() {
+    var r0 = radius.apply(this, arguments),
+      a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset,
+      a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset,
+      da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0),
+      df = da < Math.PI ? '0' : '1',
+      c0 = Math.cos(a0),
+      s0 = Math.sin(a0),
+      c1 = Math.cos(a1),
+      s1 = Math.sin(a1);
+    return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' +
+      r0 + ' 0 ' + df + ',1 ' + r0 * c1 + ',' + r0 * s1;
+  }
+
+  arc.radius = function(v) {
+    if (!arguments.length) return radius;
+    radius = functor(v);
+    return arc;
+  };
+
+  arc.startAngle = function(v) {
+    if (!arguments.length) return startAngle;
+    startAngle = functor(v);
+    return arc;
+  };
+
+  arc.endAngle = function(v) {
+    if (!arguments.length) return endAngle;
+    endAngle = functor(v);
+    return arc;
+  };
+
+  arc.centroid = function() {
+    var r = radius.apply(this, arguments),
+      a = (startAngle.apply(this, arguments) +
+        endAngle.apply(this, arguments)) / 2 + d3_svg_arcOffset;
+    return [Math.cos(a) * r, Math.sin(a) * r];
+  };
+
+  return arc;
+}
+
+module.exports = singleArc;
diff --git a/src/d3-renderers/v3/personality-chart-renderer.js b/src/d3-renderers/v3/personality-chart-renderer.js
index 4be1833..4a9a73d 100644
--- a/src/d3-renderers/v3/personality-chart-renderer.js
+++ b/src/d3-renderers/v3/personality-chart-renderer.js
@@ -20,156 +20,29 @@ Object.assign(d3,
   require('d3-color')
 );
 
-var d3SvgSingleArc = function() {
-  var radius = d3_svg_singleArcRadius,
-    startAngle = d3_svg_singleArcStartAngle,
-    endAngle = d3_svg_singleArcEndAngle,
-    d3_svg_arcOffset = -Math.PI / 2;
-
-  function arc() {
-    var r0 = radius.apply(this, arguments),
-      a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset,
-      a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset,
-      da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0),
-      df = da < Math.PI ? '0' : '1',
-      c0 = Math.cos(a0),
-      s0 = Math.sin(a0),
-      c1 = Math.cos(a1),
-      s1 = Math.sin(a1);
-    return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' +
-      r0 + ' 0 ' + df + ',1 ' + r0 * c1 + ',' + r0 * s1;
-  }
-
-  arc.radius = function(v) {
-    if (!arguments.length) return radius;
-    radius = d3.functor(v);
-    return arc;
-  };
-
-  arc.startAngle = function(v) {
-    if (!arguments.length) return startAngle;
-    startAngle = d3.functor(v);
-    return arc;
-  };
-
-  arc.endAngle = function(v) {
-    if (!arguments.length) return endAngle;
-    endAngle = d3.functor(v);
-    return arc;
-  };
-
-  arc.centroid = function() {
-    var r = radius.apply(this, arguments),
-      a = (startAngle.apply(this, arguments) +
-        endAngle.apply(this, arguments)) / 2 + d3_svg_arcOffset;
-    return [Math.cos(a) * r, Math.sin(a) * r];
-  };
-
-  return arc;
-};
-
-function d3_svg_singleArcRadius(d) {
-  return d.radius;
-}
+const d3SvgSingleArc = require('../svg-single-arc');
+const visutil = require('../visutil');
 
-function d3_svg_singleArcStartAngle(d) {
-  return d.startAngle;
-}
-
-function d3_svg_singleArcEndAngle(d) {
-  return d.endAngle;
-}
-
-var visutil = {
-  isLocatedBottom: function(d) {
-    // Before fixing #128: return (d.x>Math.PI/2&&(d.x+d.dx)<Math.PI*5/3);
-    var bottom = (d.x > Math.PI / 2 && (d.x + d.dx) < 5.0);
-    return bottom;
-  },
-
-  arc: function(start, end, r0) {
-    var c0 = Math.cos(start),
-      s0 = Math.sin(start),
-      c1 = Math.cos(end),
-      s1 = Math.sin(end);
-    return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' + r0 + ' 0' + ' 0 , 0 ' + r0 * c1 + ',' + r0 * s1;
-  }
-};
-
-var renderChart = function() {
+function renderChart(widget) {
   console.debug('personality-chart-renderer: defining renderChart');
-  if (!this.data) {
+  if (!widget.data) {
     console.debug('personality-chart-renderer: data not defined.');
     return;
   }
-  if (this.vis) {
-    console.error('Cannot render: Already rendered (this.vis)');
-    return;
-  }
 
-  var _this = this;
   var dummyData = false;
-  var tree = this.data ? (this.data.tree ? this.data.tree : this.data) : null;
+  var tree = widget.data ? (widget.data.tree ? widget.data.tree : widget.data) : null;
   if (!tree || !tree.children || !tree.children.length) {
     return;
   }
 
-  var _widget = this;
-  if (!this.loadingDiv) {
+  if (!widget.loadingDiv) {
     alert('Widget is not fully initialized, cannot render BarsWidget');
     return;
   }
 
-  this.switchState(1);
-  this._layout();
-
-  function stash(d) {
-    d.x0 = d.x;
-    d.dx0 = d.dx;
-    if (!d.hasOwnProperty('size') && !d.hasOwnProperty('children')) d.size0 = 1;
-    else d.size0 = d.size;
-    if (d.depth === 0 || d.depth === 1) {
-      d.expand = 1;
-    } else {
-      d.expand = 0;
-    }
-  }
-
-  function expandOrFoldSector(d) {
-    if (d.expand !== null && d.depth > 1) {
-      //ignore root node and first level sectors
-      if (d.expand === 0) {
-        if (d.children) d3.select(this).attr('opacity', 1);
-        g.filter(function(a) {
-          if (a.parent)
-            return a.parent.id === d.id;
-        })
-          .attr('visibility', 'visible');
-        d.expand = 1;
-      } else {
-        //if the sector is expanded
-        if (d.children)
-          d3.select(this).attr('opacity', 1);
-        hideSector(d);
-
-      }
-    }
-  }
-
-  function hideSector(d) {
-    g.filter(function(a) {
-      if (a.parent)
-        return a.parent.id === d.id;
-    })
-      .attr('visibility', 'hidden')
-      .attr('opacity', 1)
-      .each(function(a) {
-        if (a.children)
-          hideSector(a);
-      });
-    d.expand = 0;
-  }
-
+  widget.switchState(1);
+  widget._layout();
 
   var sector_right_pad = dummyData ? 0.0001 : 0.04 * 2 * Math.PI,
     sector_bottom_pad = 5.0;
@@ -179,48 +52,11 @@ var renderChart = function() {
     function twoArcs(g) {
       g.each(function(d) {
         g = d3.select(this);
-        g.selectAll('path').remove();
-        g.selectAll('text').remove();
-
         var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad;
 
-        var score = d.score,
+        var score = widget.getScore(d),
           score2 = 1; //for score sentiment data. it is the score of positive+netural
 
-        //if score is null, then give 1
-        if (score === null) score = 1;
-        if (d.score_lbl === null) d.score_lbl = '';
-        var label, label_name = d.name,
-          label_score = (d.score === null || isNaN(d.score) ? '' : ' (' + (d.score * 100).toFixed(0) + '%)');
-
-        if (d.depth === 1) label = d.name;
-        if (d.depth > 1) {
-          if (d.id === 'sbh_dom' || d.id === 'sbh_parent'){
-            label = d.name;
-          } else if (d.category === 'values') {
-            label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-          } else {
-            if (score >= 1) {
-              score = 0.99;
-              console.debug('score is over 1!' + d.name);
-            } else if (score <= -1) {
-              score = -0.99;
-              console.debug('score is below -1!' + d.name);
-            }
-            label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-
-            if ((Math.round(parseFloat(score) * 100) / 100) === 0) {
-              label = d.name;
-            }
-          }
-        }
-
-        //for request without any result
-        if (d.name === '') {
-          score = 0;
-          label = '';
-        }
-
         //special render perception sector
         if (d.perc_neu !== null && ((d.score + d.perc_neu) * d.dx < d.dx - sector_right_pad / (3 * d.depth))) {
           score2 = d.score + d.perc_neu;
@@ -242,7 +78,6 @@ var renderChart = function() {
           right_pad = 0;
         }
 
-
         var arc1_extend = (Math.abs(score) * d.dx - right_pad) > 0 ? (Math.abs(score) * d.dx - right_pad) : 0;
         //Regular renders
         var arc1 = d3.svg.arc()
@@ -284,7 +119,6 @@ var renderChart = function() {
           arc_label_number_radius = d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 7;
         }
 
-
         var bottom = visutil.isLocatedBottom(d);
         if (bottom) {
           //special reversed label for bottom data
@@ -292,7 +126,7 @@ var renderChart = function() {
           arc_for_label_number = visutil.arc(d.x + d.dx - right_pad - Math.PI / 2, d.x - Math.PI / 2, arc_label_number_radius);
         } else {
 
-          arc_for_label = d3.svg.singleArc()
+          arc_for_label = d3SvgSingleArc()
             .startAngle(function(d) {
               return d.x;
             })
@@ -303,7 +137,7 @@ var renderChart = function() {
               return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) * 3 / 5;
             });
 
-          arc_for_label_number = d3.svg.singleArc()
+          arc_for_label_number = d3SvgSingleArc()
             .startAngle(function(d) {
               return d.x;
             })
@@ -313,29 +147,27 @@ var renderChart = function() {
             .radius(function(d) {
               return d.depth === 1 ? d.y + d.dy - (d.y + d.dy - sector_bottom_pad - d.y) / 3 : sector_bottom_pad + d.y + (d.y + d.dy - sector_bottom_pad - d.y) / 5;
             });
-
         }
 
         d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx;
         var arc1color;
         var outerRingColor, innerRingLightColor, innerRingDarkColor;
 
-
         if (d.coloridx === 'personality'){
-          innerRingDarkColor = _widget.COLOR_PALLETTE.traits_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.traits_light;
-          outerRingColor = _widget.COLOR_PALLETTE.facet;
+          innerRingDarkColor = widget.COLOR_PALLETTE.traits_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.traits_light;
+          outerRingColor = widget.COLOR_PALLETTE.facet;
         }
 
         if (d.coloridx === 'needs') {
-          innerRingDarkColor = _widget.COLOR_PALLETTE.needs_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.needs_light;
-          outerRingColor = _widget.COLOR_PALLETTE.need;
+          innerRingDarkColor = widget.COLOR_PALLETTE.needs_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.needs_light;
+          outerRingColor = widget.COLOR_PALLETTE.need;
         }
         if (d.coloridx === 'values') {
-          innerRingDarkColor = _widget.COLOR_PALLETTE.values_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.values_light;
-          outerRingColor = _widget.COLOR_PALLETTE.value;
+          innerRingDarkColor = widget.COLOR_PALLETTE.values_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.values_light;
+          outerRingColor = widget.COLOR_PALLETTE.value;
         }
 
         arc1color = d.depth < 2 ? d3.color(innerRingLightColor) : d3.color(innerRingDarkColor);
@@ -343,12 +175,10 @@ var renderChart = function() {
 
         //if (!d.children && d.id !== 'srasrt' && d.id !== 'srclo' && d.id !== 'srdom') {
         if (!d.children) {
-          label = d.name;
-          score = d.score;
           var bar_length_factor = 10 / (d.depth - 2);
 
           //different bar_length factors
-          if (d.parent)
+          if (d.parent) {
             if (d.parent.parent) {
               if (d.parent.parent.id === 'needs' || d.parent.parent.id === 'values') {
                 bar_length_factor = 1;
@@ -358,12 +188,10 @@ var renderChart = function() {
             } else {
               console.debug(d.name + ': Parent is null!');
             }
-
-
+          }
 
           var inner_r = sector_bottom_pad + d.y;
           var out_r = sector_bottom_pad + d.y + bar_length_factor * Math.abs(score) * d.dy;
-          if (d.score_lbl === 'Low') out_r = sector_bottom_pad + d.y + bar_length_factor * 0.2 * d.dy;
 
           var _bar = d3.svg.arc()
             .startAngle(d.x)
@@ -371,24 +199,22 @@ var renderChart = function() {
             .innerRadius(inner_r)
             .outerRadius(out_r); // Draw leaf arcs
 
-          g.append('path')
-            .attr('class', '_bar')
-            .attr('d', _bar)
-            .style('stroke', '#EEE')
-            .style('fill', function() {
-              return d3.color(outerRingColor);
-            });
-
-
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'bar')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'bar')] = g.append('path')
+              .attr('class', '_bar')
+              .style('stroke', '#EEE')
+              .style('fill', function() {
+                return d3.color(outerRingColor);
+              });
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'bar')]
+            .attr('d', _bar);
 
           //add label;
-
           var rotate = 0,
             lbl_anchor = 'start',
             dy_init = 0;
 
-          label = d.name;
-
           if (d.x > Math.PI) {
             rotate = d.x * 180 / Math.PI + 90;
             lbl_anchor = 'end';
@@ -406,152 +232,124 @@ var renderChart = function() {
             lable_size = max_label_size;
           }
 
-          label = label + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-
-
-          g.append('text')
+          if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]) {
+            widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] = g.append('text')
+              .attr('class', 'sector_leaf_text');
+          }
+          widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]
             .attr('dy', dy_init)
-            .attr('class', 'sector_leaf_text')
             .attr('font-size', lable_size)
             .attr('text-anchor', lbl_anchor)
-            .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x) + ',' + (-(out_r + 5) * Math.cos(d.x)) + ') ' + 'rotate(' + rotate + ')')
-            .text(label);
-
+            .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x) + ',' + (-(out_r + 5) * Math.cos(d.x)) + ') ' + 'rotate(' + rotate + ')');
         } else {
           //non-bar/non-leaf sector
-          g.append('path')
-            .attr('class', 'arc1')
-            .attr('d', arc1)
-            .style('stroke', strokecolor) // was: arc1color
-            .style('fill', arc1color);
-
-
-          g.append('path')
-            .attr('class', 'arc2')
-            .attr('d', arc2)
-            .style('stroke', strokecolor) // was: arc1color
-            .style('fill', arc1color)
-            .style('fill-opacity', 0.15);
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc1')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc1')] = g.append('path')
+              .attr('class', 'arc1')
+              .style('stroke', strokecolor) // was: arc1color
+              .style('fill', arc1color);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc1')]
+            .attr('d', arc1);
+
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc2')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc2')] = g.append('path')
+              .attr('class', 'arc2')
+              .style('stroke', strokecolor) // was: arc1color
+              .style('fill', arc1color)
+              .style('fill-opacity', 0.15);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc2')]
+            .attr('d', arc2);
 
           //draw label:
           //path used for label
-          g.append('path')
-            .attr('class', 'arc_for_label')
-            // NOTE HB: adding widget.id so we to avoid name clashing
-            .attr('id', function(d) {
-              return _this.id + '_' + d.id + '.arc_for_label';
-            })
-            .attr('d', arc_for_label)
-            .style('stroke-opacity', 0)
-            .style('fill-opacity', 0);
-
-
-          //add label
-          g.append('text')
-            .attr('class', 'sector_label')
-            .attr('visibility', function(d) {
-              return d.depth === 1 ? 'visible' : null;
-            })
-            .attr('class', 'sector_nonleaf_text')
-            .append('textPath')
-            .attr('class', 'sector_label_path')
-            .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
-            .attr('font-size', function(d) {
-              return 30 / Math.sqrt(d.depth + 1);
-            })
-            // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
-            .attr('xlink:href', function(d) {
-              return '#' + _this.id + '_' + d.id + '.arc_for_label';
-            })
-            .text(label_name);
-
-          //draw label number
-          //path used for label number
-          if (d.depth > 1) {
-            g.append('path')
-              .attr('class', 'arc_for_label_number')
-              // NOTE HB: adding widget.id so we to avoid name clashing
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] = g.append('path')
+              .attr('class', 'arc_for_label')
               .attr('id', function(d) {
-                return _this.id + '_' + d.id + '.arc_for_label_number';
+                return widget.getUniqueId(d, 'arc_for_label');
               })
-              .attr('d', arc_for_label_number)
               .style('stroke-opacity', 0)
               .style('fill-opacity', 0);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]
+            .attr('d', arc_for_label);
 
-
-            //add label
-            g.append('text')
-              .attr('class', 'sector_label_number ')
+          //add label
+          if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_path')]) {
+            widget._childElements.texts[widget.getUniqueId(d, 'sector_label_path')] = g.append('text')
+              .attr('class', 'sector_label')
               .attr('visibility', function(d) {
                 return d.depth === 1 ? 'visible' : null;
               })
-              //.attr('font-family','sans-serif')
               .attr('class', 'sector_nonleaf_text')
-              //.attr('fill', d3.rgb(arc1color).darker(2))
               .append('textPath')
-              .attr('class', 'sector_label_number_path')
-              .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
-              .attr('font-size', function() {
-                return 10;
+              .attr('class', 'sector_label_path')
+              .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
+              .attr('font-size', function(d) {
+                return 30 / Math.sqrt(d.depth + 1);
               })
-              // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
               .attr('xlink:href', function(d) {
-                return '#' + _this.id + '_' + d.id + '.arc_for_label_number';
-              })
-              .text(label_score);
+                return '#' + widget.getUniqueId(d, 'arc_for_label');
+              });
           }
 
+          //draw label number
+          //path used for label number
+          if (d.depth > 1) {
+            if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]) {
+              widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] = g.append('path')
+                .attr('class', 'arc_for_label_number')
+                // NOTE HB: adding widget.id so we to avoid name clashing
+                .attr('id', function(d) {
+                  return widget.getUniqueId(d, 'arc_for_label_number');
+                })
+                .style('stroke-opacity', 0)
+                .style('fill-opacity', 0);
+            }
+            widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]
+              .attr('d', arc_for_label_number);
 
+            //add label
+            if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number_path')]) {
+              widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number_path')] = g.append('text')
+                .attr('class', 'sector_label_number ')
+                .attr('visibility', function(d) {
+                  return d.depth === 1 ? 'visible' : null;
+                })
+                //.attr('font-family','sans-serif')
+                .attr('class', 'sector_nonleaf_text')
+                //.attr('fill', d3.rgb(arc1color).darker(2))
+                .append('textPath')
+                .attr('class', 'sector_label_number_path')
+                .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
+                .attr('font-size', function() {
+                  return 10;
+                })
+                // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
+                .attr('xlink:href', function(d) {
+                  return '#' + widget.getUniqueId(d, 'arc_for_label_number');
+                });
+            }
+          }
         }
       });
-
     }
 
     return twoArcs;
   }
 
-  function updateLabelLayout() {
-    updateLabelLayoutWithClass('.sector_label_path');
-    updateLabelLayoutWithClass('.sector_label_number_path');
-  }
-
-  function updateLabelLayoutWithClass(_class) {
-    var max_font_size_base = 16;
-
-    _this.d3vis.selectAll(_class).each(function(d) {
-      var d3this = d3.select(this);
-      var curNd = d3this.node();
-      var text = d3this.text();
-      if (text && text.length > 0) {
-        var position = d3.select(this).attr('position-in-sector'); // 'inner' or 'outer'
-        var frac = position === 'center' ? 0.5 : position === 'outer' ? 2 / 3 : 1 / 3;
-        var sector_length = (d.y + d.dy * frac) * d.dx;
-        var text_length = curNd.getComputedTextLength(); //+margin;
-        var cur_font_size = d3.select(this).attr('font-size');
-        var new_font_size = cur_font_size * sector_length / text_length;
-
-        if (new_font_size > max_font_size_base / (0.4 * d.depth + 0.6)) {
-          new_font_size = max_font_size_base / (0.4 * d.depth + 0.6);
-        }
-
-        d3.select(this).attr('font-size', new_font_size);
-        //set new offset:
-        d3.select(this).attr('startOffset', (sector_length - curNd.getComputedTextLength()) / 2);
-      }
-    });
-  }
-
-  var width = this.dimW,
-    height = this.dimH;
+  var width = widget.dimW,
+    height = widget.dimH;
   // The flower had a radius of 640 / 1.9 = 336.84 in the original.
   var radius = Math.min(width, height) / 3.2;
   var sector = twoArcsRender(radius);
 
   // Center the graph of 'g'
-  var vis = this.d3vis.append('g')
+  widget.vis = widget.d3vis.append('g')
     .attr('transform', 'translate(' + (width / 2) + ',' + height / 2 + ')')
     .append('g');
-  this.vis = vis;
 
   var partition = d3.layout.partition()
     .sort(null)
@@ -566,12 +364,12 @@ var renderChart = function() {
   };
 
   // exclude specified sectors
-  var exclude = this.exclude;
+  var exclude = widget.exclude;
   profile.children = profile.children.filter(function (child) {
     return exclude.indexOf(child.id) === -1;
   });
 
-  var g = vis.data([profile]).selectAll('g')
+  var g = widget.vis.data([profile]).selectAll('g')
     .data(partition.nodes)
     .enter().append('g')
     .attr('class', 'sector')
@@ -579,29 +377,23 @@ var renderChart = function() {
       return d.depth === 2 || d.forceVisible ? 'visible' : 'hidden';
     }) // hide non-first level rings
     .call(sector)
-    .each(stash)
-    .on('click', expandOrFoldSector)
+    .each(function(d) {
+      d.expand = 1;
+    })
+    .on('click', function(d) {
+      visutil.expandOrFoldSector(d3, g, d, this);
+    })
     .on('mouseover', function(d) {
-      _this.showTooltip(d, this);
+      widget.showTooltip(d, this);
     })
     .on('mouseout', function() {
-      _this.showTooltip();
+      widget.showTooltip();
     });
 
-  // Shift the text pieces clockwise (to somewhat center them).
-  updateLabelLayout();
-};
-
-function setupD3() {
-  d3.svg.singleArc = d3SvgSingleArc;
-}
-
-function setupAndRender() {
-  setupD3();
-  renderChart.call(this);
+  widget.updateText();
 }
 
 module.exports = {
-  render: setupAndRender,
+  render: renderChart,
   d3: d3
 };
diff --git a/src/d3-renderers/v4/personality-chart-renderer.js b/src/d3-renderers/v4/personality-chart-renderer.js
index afc9763..6fa6515 100644
--- a/src/d3-renderers/v4/personality-chart-renderer.js
+++ b/src/d3-renderers/v4/personality-chart-renderer.js
@@ -22,157 +22,28 @@ const d3 = Object.assign({},
   require('d3-shape')
 );
 
-var d3SvgSingleArc = function() {
-  var radius = d3_svg_singleArcRadius,
-    startAngle = d3_svg_singleArcStartAngle,
-    endAngle = d3_svg_singleArcEndAngle,
-    d3_svg_arcOffset = -Math.PI / 2;
-
-  function arc() {
-    var r0 = radius.apply(this, arguments),
-      a0 = startAngle.apply(this, arguments) + d3_svg_arcOffset,
-      a1 = endAngle.apply(this, arguments) + d3_svg_arcOffset,
-      da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0),
-      df = da < Math.PI ? '0' : '1',
-      c0 = Math.cos(a0),
-      s0 = Math.sin(a0),
-      c1 = Math.cos(a1),
-      s1 = Math.sin(a1);
-    return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' +
-      r0 + ' 0 ' + df + ',1 ' + r0 * c1 + ',' + r0 * s1;
-  }
-
-  arc.radius = function(v) {
-    if (!arguments.length) return radius;
-    radius = functor(v);
-    return arc;
-  };
-
-  arc.startAngle = function(v) {
-    if (!arguments.length) return startAngle;
-    startAngle = functor(v);
-    return arc;
-  };
-
-  arc.endAngle = function(v) {
-    if (!arguments.length) return endAngle;
-    endAngle = functor(v);
-    return arc;
-  };
-
-  arc.centroid = function() {
-    var r = radius.apply(this, arguments),
-      a = (startAngle.apply(this, arguments) +
-        endAngle.apply(this, arguments)) / 2 + d3_svg_arcOffset;
-    return [Math.cos(a) * r, Math.sin(a) * r];
-  };
-
-  return arc;
-};
-
-function functor(v) {
-  return typeof v === 'function' ? v : function() { return v; };
-}
+const d3SvgSingleArc = require('../svg-single-arc');
+const visutil = require('../visutil');
 
-function d3_svg_singleArcRadius(d) {
-  return d.radius;
-}
-
-function d3_svg_singleArcStartAngle(d) {
-  return d.startAngle;
-}
-
-function d3_svg_singleArcEndAngle(d) {
-  return d.endAngle;
-}
-
-var visutil = {
-  isLocatedBottom: function(d) {
-    var bottom = ((d.x0 > Math.PI / 2) && (d.x1 < 5.0));
-    return bottom;
-  },
-
-  arc: function(start, end, r0) {
-    var c0 = Math.cos(start),
-      s0 = Math.sin(start),
-      c1 = Math.cos(end),
-      s1 = Math.sin(end);
-    return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' + r0 + ' 0' + ' 0 , 0 ' + r0 * c1 + ',' + r0 * s1;
-  }
-};
-
-var renderChart = function() {
-  console.debug('personality-chart-renderer: defining renderChart');
-  if (!this.data) {
-    console.debug('personality-chart-renderer: data not defined.');
-    return;
-  }
-  if (this.vis) {
-    console.error('Cannot render: Already rendered (this.vis)');
+function renderChart(widget) {
+  if (!widget.data) {
+    console.error('personality-chart-renderer: data not defined.');
     return;
   }
 
-  var _this = this;
   var dummyData = false;
-  var tree = this.data ? (this.data.tree ? this.data.tree : this.data) : null;
+  var tree = widget.data ? (widget.data.tree ? widget.data.tree : widget.data) : null;
   if (!tree || !tree.children || !tree.children.length) {
     return;
   }
 
-  var _widget = this;
-  if (!this.loadingDiv) {
+  if (!widget.loadingDiv) {
     alert('Widget is not fully initialized, cannot render BarsWidget');
     return;
   }
 
-  this.switchState(1);
-  this._layout();
-
-  function stash(d) {
-    if (!d.hasOwnProperty('size') && !d.hasOwnProperty('children')) d.size0 = 1;
-    else d.size0 = d.size;
-    if (d.depth === 0 || d.depth === 1) {
-      d.expand = 1;
-    } else {
-      d.expand = 0;
-    }
-  }
-
-  function expandOrFoldSector(d) {
-    if (d.expand !== null && d.depth > 1) {
-      //ignore root node and first level sectors
-      if (d.expand === 0) {
-        if (d.children) d3.select(this).attr('opacity', 1);
-        g.filter(function(a) {
-          if (a.parent)
-            return a.parent.id === d.id;
-        })
-          .attr('visibility', 'visible');
-        d.expand = 1;
-      } else {
-        //if the sector is expanded
-        if (d.children)
-          d3.select(this).attr('opacity', 1);
-        hideSector(d);
-
-      }
-    }
-  }
-
-  function hideSector(d) {
-    g.filter(function(a) {
-      if (a.parent)
-        return a.parent.id === d.id;
-    })
-      .attr('visibility', 'hidden')
-      .attr('opacity', 1)
-      .each(function(a) {
-        if (a.children)
-          hideSector(a);
-      });
-    d.expand = 0;
-  }
-
+  widget.switchState(1);
+  widget._layout();
 
   var sector_right_pad = dummyData ? 0.0001 : 0.04 * 2 * Math.PI,
     sector_bottom_pad = 5.0;
@@ -182,48 +53,12 @@ var renderChart = function() {
     function twoArcs(g) {
       g.each(function(d) {
         g = d3.select(this);
-        g.selectAll('path').remove();
-        g.selectAll('text').remove();
 
         var right_pad = d.depth > 0 ? sector_right_pad / (3 * d.depth) : sector_right_pad;
 
-        var score = d.score,
+        var score = widget.getScore(d),
           score2 = 1; //for score sentiment data. it is the score of positive+netural
 
-        //if score is null, then give 1
-        if (score === null) score = 1;
-        if (d.score_lbl === null) d.score_lbl = '';
-        var label, label_name = d.name,
-          label_score = (d.score === null || isNaN(d.score) ? '' : ' (' + (d.score * 100).toFixed(0) + '%)');
-
-        if (d.depth === 1) label = d.name;
-        if (d.depth > 1) {
-          if (d.id === 'sbh_dom' || d.id === 'sbh_parent'){
-            label = d.name;
-          } else if (d.category === 'values') {
-            label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-          } else {
-            if (score >= 1) {
-              score = 0.99;
-              console.debug('score is over 1!' + d.name);
-            } else if (score <= -1) {
-              score = -0.99;
-              console.debug('score is below -1!' + d.name);
-            }
-            label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-
-            if ((Math.round(parseFloat(score) * 100) / 100) === 0) {
-              label = d.name;
-            }
-          }
-        }
-
-        //for request without any result
-        if (d.name === '') {
-          score = 0;
-          label = '';
-        }
-
         //special render perception sector
         if (d.perc_neu !== null && (((d.score + d.perc_neu) * (d.x1 - d.x0)) < ((d.x1 - d.x0) - sector_right_pad / (3 * d.depth)))) {
           score2 = d.score + d.perc_neu;
@@ -245,7 +80,6 @@ var renderChart = function() {
           right_pad = 0;
         }
 
-
         var arc1_extend = Math.max(Math.abs(score) * (d.x1 - d.x0) - right_pad, 0);
         //Regular renders
         var arc1 = d3.arc()
@@ -287,7 +121,6 @@ var renderChart = function() {
           arc_label_number_radius = d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 7;
         }
 
-
         var bottom = visutil.isLocatedBottom(d);
         if (bottom) {
           //special reversed label for bottom data
@@ -316,29 +149,27 @@ var renderChart = function() {
             .radius(function(d) {
               return d.depth === 1 ? d.y1 - (d.y1 - sector_bottom_pad - d.y0) / 3 : sector_bottom_pad + d.y0 + (d.y1 - sector_bottom_pad - d.y0) / 5;
             });
-
         }
 
         d.coloridx = (d.depth === 1 || d.depth === 0) ? d.id : d.parent.coloridx;
         var arc1color;
         var outerRingColor, innerRingLightColor, innerRingDarkColor;
 
-
         if (d.coloridx === 'personality'){
-          innerRingDarkColor = _widget.COLOR_PALLETTE.traits_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.traits_light;
-          outerRingColor = _widget.COLOR_PALLETTE.facet;
+          innerRingDarkColor = widget.COLOR_PALLETTE.traits_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.traits_light;
+          outerRingColor = widget.COLOR_PALLETTE.facet;
         }
 
         if (d.coloridx === 'needs') {
-          innerRingDarkColor = _widget.COLOR_PALLETTE.needs_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.needs_light;
-          outerRingColor = _widget.COLOR_PALLETTE.need;
+          innerRingDarkColor = widget.COLOR_PALLETTE.needs_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.needs_light;
+          outerRingColor = widget.COLOR_PALLETTE.need;
         }
         if (d.coloridx === 'values') {
-          innerRingDarkColor = _widget.COLOR_PALLETTE.values_dark;
-          innerRingLightColor = _widget.COLOR_PALLETTE.values_light;
-          outerRingColor = _widget.COLOR_PALLETTE.value;
+          innerRingDarkColor = widget.COLOR_PALLETTE.values_dark;
+          innerRingLightColor = widget.COLOR_PALLETTE.values_light;
+          outerRingColor = widget.COLOR_PALLETTE.value;
         }
 
         arc1color = d.depth < 2 ? d3.color(innerRingLightColor) : d3.color(innerRingDarkColor);
@@ -346,12 +177,11 @@ var renderChart = function() {
 
         //if (!d.children && d.id !== 'srasrt' && d.id !== 'srclo' && d.id !== 'srdom') {
         if (!d.children) {
-          label = d.name;
           score = d.score;
           var bar_length_factor = 10 / (d.depth - 2);
 
           //different bar_length factors
-          if (d.parent)
+          if (d.parent) {
             if (d.parent.parent) {
               if (d.parent.parent.id === 'needs' || d.parent.parent.id === 'values') {
                 bar_length_factor = 1;
@@ -361,12 +191,10 @@ var renderChart = function() {
             } else {
               console.debug(d.name + ': Parent is null!');
             }
-
-
+          }
 
           var inner_r = sector_bottom_pad + d.y0;
           var out_r = sector_bottom_pad + d.y0 + bar_length_factor * Math.abs(score) * (d.y1 - d.y0);
-          if (d.score_lbl === 'Low') out_r = sector_bottom_pad + d.y0 + bar_length_factor * 0.2 * (d.y1 - d.y0);
 
           var _bar = d3.arc()
             .startAngle(d.x0)
@@ -374,24 +202,22 @@ var renderChart = function() {
             .innerRadius(inner_r)
             .outerRadius(out_r); // Draw leaf arcs
 
-          g.append('path')
-            .attr('class', '_bar')
-            .attr('d', _bar)
-            .style('stroke', '#EEE')
-            .style('fill', function() {
-              return d3.color(outerRingColor);
-            });
-
-
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'bar')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'bar')] = g.append('path')
+              .attr('class', '_bar')
+              .style('stroke', '#EEE')
+              .style('fill', function() {
+                return d3.color(outerRingColor);
+              });
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'bar')]
+            .attr('d', _bar);
 
           //add label;
-
           var rotate = 0,
             lbl_anchor = 'start',
             dy_init = 0;
 
-          label = d.name;
-
           if (d.x0 > Math.PI) {
             rotate = d.x0 * 180 / Math.PI + 90;
             lbl_anchor = 'end';
@@ -409,157 +235,130 @@ var renderChart = function() {
             lable_size = max_label_size;
           }
 
-          label = label + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
-
-
-          g.append('text')
+          if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]) {
+            widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')] = g.append('text')
+              .attr('class', 'sector_leaf_text');
+          }
+          widget._childElements.texts[widget.getUniqueId(d, 'sector_leaf_text')]
             .attr('dy', dy_init)
-            .attr('class', 'sector_leaf_text')
             .attr('font-size', lable_size)
             .attr('text-anchor', lbl_anchor)
-            .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x0) + ',' + (-(out_r + 5) * Math.cos(d.x0)) + ') ' + 'rotate(' + rotate + ')')
-            .text(label);
+            .attr('transform', 'translate(' + (out_r + 5) * Math.sin(d.x0) + ',' + (-(out_r + 5) * Math.cos(d.x0)) + ') ' + 'rotate(' + rotate + ')');
 
         } else {
           //non-bar/non-leaf sector
-          g.append('path')
-            .attr('class', 'arc1')
-            .attr('d', arc1)
-            .style('stroke', strokecolor) // was: arc1color
-            .style('fill', arc1color);
-
-
-          g.append('path')
-            .attr('class', 'arc2')
-            .attr('d', arc2)
-            .style('stroke', strokecolor) // was: arc1color
-            .style('fill', arc1color)
-            .style('fill-opacity', 0.15);
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc1')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc1')] = g.append('path')
+              .attr('class', 'arc1')
+              .style('stroke', strokecolor) // was: arc1color
+              .style('fill', arc1color);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc1')]
+            .attr('d', arc1);
+
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc2')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc2')] = g.append('path')
+              .attr('class', 'arc2')
+              .style('stroke', strokecolor) // was: arc1color
+              .style('fill', arc1color)
+              .style('fill-opacity', 0.15);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc2')]
+            .attr('d', arc2);
 
           //draw label:
           //path used for label
-          g.append('path')
-            .attr('class', 'arc_for_label')
-            // NOTE HB: adding widget.id so we to avoid name clashing
-            .attr('id', function(d) {
-              return _this.id + '_' + d.id + '.arc_for_label';
-            })
-            .attr('d', arc_for_label)
-            .style('stroke-opacity', 0)
-            .style('fill-opacity', 0);
-
-
-          //add label
-          g.append('text')
-            .attr('class', 'sector_label')
-            .attr('visibility', function(d) {
-              return d.depth === 1 ? 'visible' : null;
-            })
-            .attr('class', 'sector_nonleaf_text')
-            .append('textPath')
-            .attr('class', 'sector_label_path')
-            .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
-            .attr('font-size', function(d) {
-              return 30 / Math.sqrt(d.depth + 1);
-            })
-            // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
-            .attr('xlink:href', function(d) {
-              return '#' + _this.id + '_' + d.id + '.arc_for_label';
-            })
-            .text(label_name);
-
-          //draw label number
-          //path used for label number
-          if (d.depth > 1) {
-            g.append('path')
-              .attr('class', 'arc_for_label_number')
+          if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]) {
+            widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')] = g.append('path')
+              .attr('class', 'arc_for_label')
               // NOTE HB: adding widget.id so we to avoid name clashing
               .attr('id', function(d) {
-                return _this.id + '_' + d.id + '.arc_for_label_number';
+                return widget.id + '_' + d.id + '.arc_for_label';
               })
-              .attr('d', arc_for_label_number)
               .style('stroke-opacity', 0)
               .style('fill-opacity', 0);
+          }
+          widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label')]
+            .attr('d', arc_for_label);
 
-
-            //add label
-            g.append('text')
-              .attr('class', 'sector_label_number ')
+          //add label
+          if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label')]) {
+            widget._childElements.texts[widget.getUniqueId(d, 'sector_label')] = g.append('text')
+              .attr('class', 'sector_label')
               .attr('visibility', function(d) {
                 return d.depth === 1 ? 'visible' : null;
               })
               .attr('class', 'sector_nonleaf_text')
               .append('textPath')
-              .attr('class', 'sector_label_number_path')
-              .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
-              .attr('font-size', function() {
-                return 10;
+              .attr('class', 'sector_label_path')
+              .attr('position-in-sector', d.depth <= 1 ? 'center' : (bottom ? 'inner' : 'outer')) // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
+              .attr('font-size', function(d) {
+                return 30 / Math.sqrt(d.depth + 1);
               })
-              // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
               .attr('xlink:href', function(d) {
-                return '#' + _this.id + '_' + d.id + '.arc_for_label_number';
-              })
-              .text(label_score);
+                return '#' + widget.id + '_' + d.id + '.arc_for_label';
+              });
           }
 
+          //draw label number
+          //path used for label number
+          if (d.depth > 1) {
+            if (!widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]) {
+              widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')] = g.append('path')
+                .attr('class', 'arc_for_label_number')
+                .attr('id', function(d) {
+                  return widget.id + '_' + d.id + '.arc_for_label_number';
+                })
+                .style('stroke-opacity', 0)
+                .style('fill-opacity', 0);
+            }
+            widget._childElements.paths[widget.getUniqueId(d, 'arc_for_label_number')]
+              .attr('d', arc_for_label_number);
 
+            //add label
+            if (!widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number')]) {
+              widget._childElements.texts[widget.getUniqueId(d, 'sector_label_number')] = g.append('text')
+                .attr('class', 'sector_label_number ')
+                .attr('visibility', function(d) {
+                  return d.depth === 1 ? 'visible' : null;
+                })
+                .attr('class', 'sector_nonleaf_text')
+                .append('textPath')
+                .attr('class', 'sector_label_number_path')
+                .attr('position-in-sector', bottom ? 'outer' : 'inner') // Since both text lines share the same 'd', this class annotation tells where is the text, helping to determine the real arc length
+                .attr('font-size', function() {
+                  return 10;
+                })
+                // NOTE HB: Why do we need this xlink:href? In any case, adding widget.id so we to avoid name clashing
+                .attr('xlink:href', function(d) {
+                  return '#' + widget.id + '_' + d.id + '.arc_for_label_number';
+                });
+            }
+          }
         }
       });
-
     }
 
     return twoArcs;
   }
 
-  function updateLabelLayout() {
-    updateLabelLayoutWithClass('.sector_label_path');
-    updateLabelLayoutWithClass('.sector_label_number_path');
-  }
-
-  function updateLabelLayoutWithClass(_class) {
-    var max_font_size_base = 16;
-
-    _this.d3vis.selectAll(_class).each(function(d) {
-      var d3this = d3.select(this);
-      var curNd = d3this.node();
-      var text = d3this.text();
-      if (text && text.length > 0) {
-        var position = d3.select(this).attr('position-in-sector'); // 'inner' or 'outer'
-        var frac = position === 'center' ? 0.5 : position === 'outer' ? 2 / 3 : 1 / 3;
-        var sector_length = (d.y0 + (d.y1 - d.y0) * frac) * (d.x1 - d.x0);
-        var text_length = curNd.getComputedTextLength(); //+margin;
-        var cur_font_size = d3.select(this).attr('font-size');
-        var new_font_size = cur_font_size * sector_length / text_length;
-
-        if (new_font_size > max_font_size_base / (0.4 * d.depth + 0.6)) {
-          new_font_size = max_font_size_base / (0.4 * d.depth + 0.6);
-        }
-
-        d3.select(this).attr('font-size', new_font_size);
-        //set new offset:
-        d3.select(this).attr('startOffset', (sector_length - curNd.getComputedTextLength()) / 2);
-      }
-    });
-  }
-
-  var width = this.dimW,
-    height = this.dimH;
+  var width = widget.dimW,
+    height = widget.dimH;
   // The flower had a radius of 640 / 1.9 = 336.84 in the original.
   var radius = Math.min(width, height) / 3.2;
   var sector = twoArcsRender(radius);
 
   // Center the graph of 'g'
-  var vis = this.d3vis.append('g')
+  widget.vis = widget.d3vis.append('g')
     .attr('transform', 'translate(' + (width / 2) + ',' + height / 2 + ')')
     .append('g');
-  this.vis = vis;
 
   var profile = {
     children: tree.children
   };
 
   // exclude specified sectors
-  var exclude = this.exclude;
+  var exclude = widget.exclude;
   profile.children = profile.children.filter(function (child) {
     return exclude.indexOf(child.id) === -1;
   });
@@ -574,7 +373,7 @@ var renderChart = function() {
   var partition = d3.partition()
     .size([2 * Math.PI, radius]);
 
-  var g = vis.selectAll('g')
+  var g = widget.vis.selectAll('g')
     .data(partition(root).descendants())
     .enter().append('g')
     .attr('class', 'sector')
@@ -582,24 +381,23 @@ var renderChart = function() {
       return d.depth === 2 || d.forceVisible ? 'visible' : 'hidden';
     }) // hide non-first level rings
     .call(sector)
-    .each(stash)
-    .on('click', expandOrFoldSector)
+    .each(function(d) {
+      d.expand = 1;
+    })
+    .on('click', function(d) {
+      visutil.expandOrFoldSector(d3, g, d, this);
+    })
     .on('mouseover', function(d) {
-      _this.showTooltip(d, this);
+      widget.showTooltip(d, this);
     })
     .on('mouseout', function() {
-      _this.showTooltip();
+      widget.showTooltip();
     });
 
-  // Shift the text pieces clockwise (to somewhat center them).
-  updateLabelLayout();
-};
-
-function setupAndRender() {
-  renderChart.call(this);
+  widget.updateText();
 }
 
 module.exports = {
-  render: setupAndRender,
+  render: renderChart,
   d3: d3
 };
diff --git a/src/d3-renderers/visutil.js b/src/d3-renderers/visutil.js
new file mode 100644
index 0000000..e707b08
--- /dev/null
+++ b/src/d3-renderers/visutil.js
@@ -0,0 +1,54 @@
+function expandOrFoldSector(d3, g, d, self) {
+  if (d.expand !== null && d.depth > 1) {
+    //ignore root node and first level sectors
+    if (d.expand === 0) {
+      if (d.children) d3.select(self).attr('opacity', 1);
+      g.filter(function(a) {
+        if (a.parent)
+          return a.parent.id === d.id;
+      })
+        .attr('visibility', 'visible');
+      d.expand = 1;
+    } else {
+      //if the sector is expanded
+      if (d.children)
+        d3.select(self).attr('opacity', 1);
+      hideSector(d, g);
+    }
+  }
+}
+
+function hideSector(d, g) {
+  g.filter(function(a) {
+    if (a.parent)
+      return a.parent.id === d.id;
+  })
+    .attr('visibility', 'hidden')
+    .attr('opacity', 1)
+    .each(function(a) {
+      if (a.children)
+        hideSector(a, g);
+    });
+  d.expand = 0;
+}
+
+function arc(start, end, r0) {
+  var c0 = Math.cos(start),
+    s0 = Math.sin(start),
+    c1 = Math.cos(end),
+    s1 = Math.sin(end);
+  return 'M' + r0 * c0 + ',' + r0 * s0 + 'A' + r0 + ',' + r0 + ' 0' + ' 0 , 0 ' + r0 * c1 + ',' + r0 * s1;
+}
+
+function isLocatedBottom(d) {
+  var x0 = d.x ? d.x : d.x0;
+  var x1 = d.x ? (d.x + d.dx) : d.x1;
+  var bottom = (x0 > Math.PI / 2 && x1 < 5.0);
+  return bottom;
+}
+
+module.exports = {
+  isLocatedBottom: isLocatedBottom,
+  arc: arc,
+  expandOrFoldSector: expandOrFoldSector
+};
diff --git a/src/personality-sunburst-chart.js b/src/personality-sunburst-chart.js
index 2152685..547558b 100644
--- a/src/personality-sunburst-chart.js
+++ b/src/personality-sunburst-chart.js
@@ -42,10 +42,10 @@ class PersonalitySunburstChartImpl {
       if (this._profile && this._widget) {
         const d3Profile = new this.D3PersonalityProfile(this._profile, this._traitNames);
         this._widget.setData(d3Profile.d3Json());
-      }
 
-      if (render) {
-        this.render();
+        if (render) {
+          this._widget.updateText();
+        }
       }
     }
   }
@@ -77,12 +77,11 @@ class PersonalitySunburstChartImpl {
 
   render() {
     if (this._widget) {
-      // Clear DOM element that will display the sunburst chart
-      this._widget.clear();
       this._widget.init();
 
       // Render widget
-      this.ChartRenderer.render.call(this._widget);
+      this._widget.render();
+      this._widget.updateText();
 
       // Expand all sectors of the sunburst chart - sectors at each level can be hidden
       this._widget.expandAll();
@@ -105,10 +104,13 @@ class PersonalitySunburstChartImpl {
   show(theProfile, personImageUrl) {
     if (!this._widget) {
       // Create widget
-      this._widget = new SunburstWidget(this._options, this.ChartRenderer.d3);
+      this._widget = new SunburstWidget(this._options, this.ChartRenderer);
       const element = this._element || document.querySelector(this._selector);
       this._widget.setElement(element);
     }
+    
+    // Clear DOM element that will display the sunburst chart
+    this._widget.clear();
 
     this.setProfile(theProfile || this._profile, false);
     this.setImage(personImageUrl || this._imageUrl, false);
diff --git a/src/widget.js b/src/widget.js
index ca35ee5..11257b5 100644
--- a/src/widget.js
+++ b/src/widget.js
@@ -20,8 +20,9 @@ const colors = require('./utilities/colors');
 
 class SunburstWidget {
 
-  constructor(options, d3) {
-    this.d3 = d3;
+  constructor(options, renderer) {
+    this.renderer = renderer;
+    this.d3 = renderer.d3;
     this.visualizationWidth = options.width  || '100%';
     this.visualizationHeight = options.height || '100%';
     this.dimW  = ((1/options.scale || 1) * 45) * 16.58;
@@ -33,12 +34,15 @@ class SunburstWidget {
     this.d3vis = null;
     this.vis = null;
     this.data = null;
+    this._d3version = options.d3version;
     this._element = null;
     this._childElements = {
       icondefs: null,
       image: null,
       pattern: null,
-      circle: null
+      circle: null,
+      texts: {},
+      paths: {}
     };
   }
 
@@ -57,8 +61,11 @@ class SunburstWidget {
   showTooltip() {}
 
   init() {
-    this.d3vis = this.d3.select(this._element)
-      .append('svg:svg')
+    if (!this.d3vis) {
+      this.d3vis = this.d3.select(this._element).append('svg:svg');
+    }
+
+    this.d3vis
       .attr('width', this.visualizationWidth)
       .attr('height', this.visualizationHeight)
       .attr('viewBox', '0 -30 ' + this.dimH + ', ' + this.dimW);
@@ -100,6 +107,99 @@ class SunburstWidget {
     });
   }
 
+  render() {
+    this.renderer.render(this);
+    this.updateText();
+  }
+
+  updateText() {
+    if (!this.vis) {
+      return;
+    }
+
+    var tree = this.data ? (this.data.tree ? this.data.tree : this.data) : null;
+    if (!tree || !tree.children || !tree.children.length) {
+      return;
+    }
+
+    var self = this;
+    tree.children.forEach(function(child) {
+      if (self._childElements.texts[self.getUniqueId(child, 'sector_label_path')]) {
+        self._childElements.texts[self.getUniqueId(child, 'sector_label_path')].text(self.getNameLabelText(child));
+      }
+
+      child.children.forEach(function(category) {
+        if (self._childElements.texts[self.getUniqueId(category, 'sector_label_path')]) {
+          self._childElements.texts[self.getUniqueId(category, 'sector_label_path')].text(category.name);
+        }
+        if (self._childElements.texts[self.getUniqueId(category, 'sector_label_number_path')]) {
+          self._childElements.texts[self.getUniqueId(category, 'sector_label_number_path')].text(self.getScoreLabelText(category));
+        }
+
+        category.children.forEach(function(trait) {
+          if (trait.category === 'personality') {
+            // personality traits
+            if (self._childElements.texts[self.getUniqueId(trait, 'sector_label_path')]) {
+              self._childElements.texts[self.getUniqueId(trait, 'sector_label_path')].text(trait.name);
+            }
+            if (self._childElements.texts[self.getUniqueId(trait, 'sector_label_number_path')]) {
+              self._childElements.texts[self.getUniqueId(trait, 'sector_label_number_path')].text(self.getScoreLabelText(trait));
+            }
+
+            trait.children.forEach(function(facet) {
+              if (self._childElements.texts[self.getUniqueId(facet, 'sector_leaf_text')]) {
+                self._childElements.texts[self.getUniqueId(facet, 'sector_leaf_text')].text(self.getNameLabelText(facet));
+              }
+            });
+          } else {
+            if (self._childElements.texts[self.getUniqueId(trait, 'sector_leaf_text')]) {
+              self._childElements.texts[self.getUniqueId(trait, 'sector_leaf_text')].text(self.getNameLabelText(trait));
+            }
+          }
+        });
+      });
+    });
+
+    this.updateLabelLayout();
+  }
+
+  updateLabelLayout() {
+    this.updateLabelLayoutWithClass('.sector_label_path');
+    this.updateLabelLayoutWithClass('.sector_label_number_path');
+  }
+
+  updateLabelLayoutWithClass(_class) {
+    if (!this.d3vis) {
+      return;
+    }
+
+    var max_font_size_base = 16;
+    var self = this;
+    this.d3vis.selectAll(_class).each(function(d) {
+      var d3this = self.d3.select(this);
+      var curNd = d3this.node();
+      var text = d3this.text();
+      if (text && text.length > 0) {
+        var position = self.d3.select(this).attr('position-in-sector'); // 'inner' or 'outer'
+        var frac = position === 'center' ? 0.5 : position === 'outer' ? 2 / 3 : 1 / 3;
+        var sector_length = self._d3version === 'v3' ?
+          (d.y + d.dy * frac) * d.dx :
+          (d.y1 * frac) * (d.x1 - d.x0);
+        var text_length = curNd.getComputedTextLength(); //+margin;
+        var cur_font_size = self.d3.select(this).attr('font-size');
+        var new_font_size = cur_font_size * sector_length / text_length;
+
+        if (new_font_size > max_font_size_base / (0.4 * d.depth + 0.6)) {
+          new_font_size = max_font_size_base / (0.4 * d.depth + 0.6);
+        }
+
+        self.d3.select(this).attr('font-size', new_font_size);
+        //set new offset:
+        self.d3.select(this).attr('startOffset', (sector_length - curNd.getComputedTextLength()) / 2);
+      }
+    });
+  }
+
   addImage(url) {
     if (!this.vis || !url) {
       if (this.hasImage()) {
@@ -171,6 +271,56 @@ class SunburstWidget {
   hasImage() {
     return this._childElements.icondefs !== null;
   }
+
+  getScore(d) {
+    var score = d.score;
+    if (score === null) score = 1;
+    if (score >= 1) {
+      score = 0.99;
+    } else if (score <= -1) {
+      score = -0.99;
+    }
+
+    //for request without any result
+    if (d.name === '') {
+      score = 0;
+    }
+
+    return score;
+  }
+
+  getScoreLabelText(d) {
+    return d.score === null || isNaN(d.score) ? '' : ' (' + (this.getScore(d) * 100).toFixed(0) + '%)';
+  }
+
+  getNameLabelText(d) {
+    if (!d.name) {
+      return '';
+    }
+    var label = d.name, score = this.getScore(d);
+
+    if (d.id === 'sbh_dom' || d.id === 'sbh_parent'){
+      label = d.name;
+    } else if (d.category === 'values') {
+      label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
+    } else {
+      label = d.name + ((score * 100).toFixed(0) === 'NaN' || isNaN(score) ? '' : ' (' + (score * 100).toFixed(0) + '%)');
+
+      if ((Math.round(parseFloat(score) * 100) / 100) === 0) {
+        label = d.name;
+      }
+    }
+
+    return label;
+  }
+
+  getUniqueId(d, _class) {
+    var uid = this.id + '_' + d.id;
+    if (_class) {
+      uid += '.' + _class;
+    }
+    return uid;
+  }
 }
 
 module.exports = SunburstWidget;