cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section>
  <p>Hover over/tap a segment to view the details. Click/double-tap an inner circle to toggle an expanded view.</p>
  <div id="chart-container"></div>
</section>

            
          
!
            
              body{
  width:100%;
  margin:0;
  text-align:center;
  font-family:'Open Sans', sans-serif;
  position:relative;
}
section{
  width:calc(100% - 40px);
  padding:20px;
  display:block;
}

#chart-container{
  margin:0 auto;
  width:100%;
  max-width:700px;
}

p{
  margin:0 0 20px;
}

            
          
!
            
              window.requestAnimFrame = function(){
return (
  window.requestAnimationFrame       || 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  function(/* function */ callback){
    window.setTimeout(callback, 1000 / 60);
  }
);
}();


/* Build the chart and add interactivity*/
var nestedChart = {
  chartData : null,
  totalCount : 0,
  expandedCount : 0,

  arcRadius : [150, 200, 250],
  currentDrawnAngles : Array(0,0,0),
  chartCenter : 250,

  rings : Array(),

  tooltipActive : true,
  isExpandedView : false,

  animationStart : null,
  tweenArcDuration : 250,
  expandedData : null,

  polarToCartesian : function (radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180;
    return {
      x: nestedChart.chartCenter + (radius * Math.cos(angleInRadians)),
      y: nestedChart.chartCenter + (radius * Math.sin(angleInRadians))
    };
  },

  describeArc : function(radius, startAngle, endAngle){
    var start = this.polarToCartesian(radius, endAngle);
    var end = this.polarToCartesian(radius, startAngle);
    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
    var d = [
      "M", start.x, start.y, 
      "A", radius, radius, 0, arcSweep, 0, end.x, end.y,
      "L", nestedChart.chartCenter,nestedChart.chartCenter,
      "L", start.x, start.y
    ].join(" ");
    return d; 
  },

  createCircleMask: function(id, parent, radius){
    NS = "http://www.w3.org/2000/svg";
    maskBg = document.createElementNS(NS, 'rect');
    maskBg.setAttribute('width', '100%');
    maskBg.setAttribute('height', '100%');
    maskBg.setAttribute('x', '0');
    maskBg.setAttribute('y', '0');
    maskBg.setAttribute('fill', 'white');

    cityMask = document.createElementNS(NS, "mask");  
    cityMask.setAttribute("id", id);   
    cityMask.appendChild(maskBg);  

    cityMaskCircle = document.createElementNS(NS, 'circle');
    cityMaskCircle.setAttribute("r", radius);
    cityMaskCircle.setAttribute("cx", nestedChart.chartCenter);
    cityMaskCircle.setAttribute("cy", nestedChart.chartCenter);
    cityMaskCircle.setAttribute("fill", 'black');

    cityMask.appendChild(cityMaskCircle);
    parent.appendChild(cityMask);
  },

  displayTooltip: function(count, label, group){
    this.tooltipActive = true;
    nestedChart.tooltip.style.opacity = 1;
    nestedChart.tooltip.innerHTML = '<strong>'+label+': </strong> '+count;
  },
  
  hideTooltip: function(){
    this.tooltipActive = false;
    nestedChart.tooltip.style.opacity = 0;
  },

  handleMouseMove : function(event){
    e = event || window.event;     
    var dot, eventDoc, doc, body, pageX, pageY;
    mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    nestedChart.tooltip.style.left = mouseX+'px';
    nestedChart.tooltip.style.top = (mouseY - 30)+'px';
  },

  createArc: function(stat){
    // create each arc in its default state
    startAngle = this.currentDrawnAngles[stat.level];
    angleIncrease = (stat.count / nestedChart.totalCount) * 360;
    endAngle = angleIncrease + startAngle;
    path = document.createElementNS(NS, "path");
    path.setAttribute('fill', stat.fill);
    path.setAttribute("d", nestedChart.describeArc(this.arcRadius[stat.level], startAngle, endAngle ));

    stat.arc = path;
    stat.radius = this.arcRadius[stat.level];
    stat.startAngle = startAngle;
    stat.endAngle = endAngle;
    stat.currentAngleSize = endAngle - startAngle;
    stat.originalAngleSize = stat.currentAngleSize 
    if(this.rings[stat.level] == null){
      this.rings[stat.level] = new Array();
    }
    this.rings[stat.level].push(stat);

    if (Modernizr.touchevents) {
      // if it supports touch events
      mc = new Hammer.Manager(path);
      mc.add( new Hammer.Tap({ event: 'doubletap', taps: 2 }) );
      mc.add( new Hammer.Tap({ event: 'singletap' }) );

      mc.on('singletap', function(ev) {
        nestedChart.handleMouseMove();
        nestedChart.displayTooltip(stat.count, stat.label);
      });
      mc.on('doubletap', function(ev) {
        nestedChart.expandArc(stat);
      });

    }else{ 
      // if it doesnt support touch events
      path.onmouseover = function(e) {
        nestedChart.displayTooltip(stat.count, stat.label);
      }
      path.onmouseleave = function(e) {
        nestedChart.hideTooltip();
      }
      if(stat.level < 2){
        path.onclick = function(e) {
          nestedChart.expandArc(stat);
        }
      }

    }         

    parent = document.getElementById('arc-group-'+stat.level);
    parent.appendChild(path);
    this.currentDrawnAngles[stat.level] = endAngle;
  },


  isExpandedMatch : function(dataset){
    // determine if an object should grow or expand
    isMatch = true;
    if(dataset.level >= nestedChart.expandedData.level){
      max = nestedChart.expandedData.level;
    }else{
      max = dataset.level;
    }
    for(i=0; i<max+1; i++){
      if(dataset.parents[i] != nestedChart.expandedData.parents[i]){
        isMatch = false;
      }
    }
    return isMatch;

  },


  tweenArc : function(timestamp){
    if (!this.animationStart) this.animationStart = timestamp;
    var progress = timestamp - this.animationStart;
    progress = progress / nestedChart.tweenArcDuration;


    var i,j,currentAngle;
    for(i=0; i<nestedChart.totalDepth+1; i++){
      ring = nestedChart.rings[i];
      startAngle = 0;
      for(j=0; j<ring.length; j++){
        dataset = ring[j];
        // start of dataset
        currentAngleSize = dataset.originalAngleSize + (dataset.targetAngleSize - dataset.originalAngleSize )*progress;
        if(dataset.targetAngleSize > dataset.originalAngleSize){
          if(currentAngleSize < dataset.targetAngleSize){
            angleGrowth = currentAngleSize;
          }else{
            angleGrowth = dataset.targetAngleSize;
            dataset.originalAngleSize = dataset.targetAngleSize;
          }
        }else{
          if(dataset.targetAngleSize < currentAngleSize){
            angleGrowth = currentAngleSize;
          }else{
            angleGrowth = dataset.targetAngleSize;
            dataset.originalAngleSize = dataset.targetAngleSize;
          }
        }
        dataset.arc.setAttribute("d", nestedChart.describeArc(nestedChart.arcRadius[dataset.level], startAngle, startAngle+angleGrowth));
        startAngle = startAngle+angleGrowth;
      }
    }
   
    if (progress < 1) {
      window.requestAnimFrame(nestedChart.tweenArc);
    }else{
      this.animationStart = null;
    }
  },

  expandArc : function(e){
    if(this.isExpandedView && (e.level == this.expandedData.level)){
      // toggle back to default view
      this.isExpandedView = false;
      this.expandedData = {
        'total' : nestedChart.totalCount,
        'level' : 0,
        'parents' : null
      };
    }else{
      // show expanded view
      this.isExpandedView = true;
      this.expandedData = {
        'total' : e.count,
        'level' : e.level,
        'parents' : e.parents
      };
    }

    var i,j;
    for(i=0; i<nestedChart.totalDepth+1; i++){
      ring = nestedChart.rings[i];
      for(j=0; j<ring.length; j++){
        dataset = ring[j];
        if(this.isExpandedView){
          dataset.isExpandedMatch = this.isExpandedMatch(dataset);
        }else{
          dataset.isExpandedMatch = 1;
        }
        if(dataset.isExpandedMatch){
          targetAngleSize = dataset.count / this.expandedData.total * 360;
          if(targetAngleSize > 359.99){
            targetAngleSize = 359.99;
          }
          dataset.targetAngleSize = targetAngleSize;
          if(i==0 && j == 0){
            console.log(targetAngleSize);
          }
        }else{
          dataset.targetAngleSize = 0;
        }
      }
    }
    window.requestAnimFrame(nestedChart.tweenArc);
  },

  initialize : function(containerID, chartData){
    /* ********************* */
    /*                       */
    /*     build the svg     */
    /*                       */
    /* ********************* */
    var container = document.getElementById(containerID);
    var NS = "http://www.w3.org/2000/svg";
    var svg = document.createElementNS(NS, "svg");
    svg.setAttribute('viewBox', '0 0 500 500');
    svg.setAttribute('style', 'width:100%; height:auto');

    // create the css
    styleTag = document.createElementNS(NS, "style");
    styleTag.textContent =  "path{ stroke:rgba(255,255,255,0.5); stroke-width:0.5px; stroke-opacity:0.75; fill-opacity:0.75; transition:stroke-opacity 0.0625s;  transition:stroke-opacity 0.25s;}"; 
    styleTag.textContent += "path:hover{ fill-opacity:1; }"; 
    svg.appendChild(styleTag);

    // create the masks
    defs = document.createElementNS(NS, "defs");
    svg.appendChild(defs);

    arcGroup = document.createElementNS(NS, "g");

    this.createCircleMask('province-mask', defs, nestedChart.arcRadius[0]);
    this.createCircleMask('city-mask', defs, nestedChart.arcRadius[1]);

    /* create the mask that animates the chart in */
    styleTag.textContent += "#grow-clip-path-circle{transform-origin: 250px 250px;animation: fillup 0.5s 1;}";
    styleTag.textContent += "#arc-group{transform-origin: 250px 250px;animation: fillup 0.5s 1;}";
    styleTag.textContent += "@keyframes fillup {from { transform: scale(0); } to {transform: scale(1);}}"; 

    growClipPath = document.createElementNS(NS, "clipPath");  
    growClipPath.setAttribute("id", 'grow-clip-path');   

    growClipPathCircle = document.createElementNS(NS, 'circle');
    growClipPathCircle.setAttribute("r", this.arcRadius[2]);
    growClipPathCircle.setAttribute("cx", this.chartCenter);
    growClipPathCircle.setAttribute("cy", this.chartCenter);
    growClipPathCircle.setAttribute("id", 'grow-clip-path-circle');
    growClipPath.appendChild(growClipPathCircle);
    defs.appendChild(growClipPath);

    arcGroup.setAttribute('clip-path', 'url(#grow-clip-path)');
    arcGroup.setAttribute('id', 'arc-group');


    cityGroup = document.createElementNS(NS, "g");
    cityGroup.setAttribute('id', 'arc-group-2');
    cityGroup.setAttribute('mask', 'url(#city-mask)');
    arcGroup.appendChild(cityGroup);

    provinceGroup = document.createElementNS(NS, "g");
    provinceGroup.setAttribute('id', 'arc-group-1');
    provinceGroup.setAttribute('mask', 'url(#province-mask)');
    arcGroup.appendChild(provinceGroup);

    countryGroup = document.createElementNS(NS, "g");
    countryGroup.setAttribute('id', 'arc-group-0');
    arcGroup.appendChild(countryGroup);

    svg.appendChild(arcGroup);

    
    // create the tooltip
    this.tooltip = document.createElement("span");
    this.tooltip.setAttribute('style', 'font-family:'+chartData.fontStack+';padding:5px;font-size:12px;display:block;background-color:#fff;transition:opacity 1s, left 0s, top 0s; border:1px solid #ccc; border-radius:3px; position:absolute;pointer-events:none;opacity:0;');

    document.body.appendChild(this.tooltip);
    document.onmousemove = this.handleMouseMove;

    container.appendChild(svg);

    /* loop through the data adding additonal attributes */
    parents = new Array();
    parentsPosition = new Array();
    chartData.dataset.forEach(function(country) {
      if (parentsPosition[0] == null) {
        parentsPosition[0] = -1;
      }
      parentsPosition[0]++;
      country.parents = Array();
      country.parents[0] = parentsPosition[0];


      countryCount = 0; // a running count of each country's total number
      country.level = 0;

      country.children.forEach(function(province) {
        if (parentsPosition[1] == null) {
           parentsPosition[1] = -1;
        }
        parentsPosition[1]++;
        province.parents = new Array();
        province.parents[0] = parentsPosition[0]; 
        province.parents[1] = parentsPosition[1];


        if(!province.fill){
          province.fill = country.fill;
        }

        provinceCount = 0; // a running count of each province's total number
        province.level = 1;

        province.children.forEach(function(city) {
          if (parentsPosition[2] == null) {
             parentsPosition[2] = -1;
          }
          parentsPosition[2]++;
          city.parents = new Array();
          city.parents[0] = parentsPosition[0]; 
          city.parents[1] = parentsPosition[1];
          city.parents[2] = parentsPosition[2];
          if(!city.fill){
            city.fill = province.fill;
          }
          city.level = 2;
          nestedChart.totalCount += parseInt(city.count, 10);
          provinceCount += parseInt(city.count, 10);
          countryCount += parseInt(city.count, 10);
        });
        province.count = provinceCount;
      });
      country.count = countryCount;
    });
    this.chartData = chartData;

    chartData.dataset.forEach(function(country) {
      nestedChart.createArc(country);
      country.children.forEach(function(province) {
        nestedChart.createArc(province);
        province.children.forEach(function(city) {
          nestedChart.createArc(city);
        });
      });
    });
    nestedChart.totalDepth = 2;
  }
}
/* The data that gets displayed on the chart */
var chartdata = {
  "fontStack": "'Open Sans', sans-serif",
  "dataset": [
    {
      "label": "Austria",
      "fill": "#ed2939",
      "children": [
        {
          "label": "Carinthia",
          "children": [
            {
              "label": "Villach",
              "count": "2"
            }
          ]
        }
      ]
    },
    {
      "label": "Canada",
      "fill": "#FF0000",
      "children": [
        {
          "label": "Alberta",
          "children": [
            {
              "label": "Calgary",
              "count": "12"
            },
            {
              "label": "Edmonton",
              "count": "22"
            },
            {
              "label": "Lethbridge",
              "count": "2"
            },
            {
              "label": "Red Deer",
              "count": "2"
            },
            {
              "label": "Sherwood Park",
              "count": "2"
            },
            {
              "label": "St. Albert",
              "count": "2"
            }
          ]
        },
        {
          "label": "British Columbia",
          "children": [
            {
              "label": "Burnaby",
              "count": "4"
            },
            {
              "label": "Kelowna",
              "count": "2"
            },
            {
              "label": "Langley",
              "count": "2"
            },
            {
              "label": "Maple Ridge",
              "count": "2"
            },
            {
              "label": "New Westminster",
              "count": "3"
            },
            {
              "label": "North Vancouver",
              "count": "3"
            },
            {
              "label": "Richmond",
              "count": "2"
            },
            {
              "label": "Sicamous",
              "count": "2"
            },
            {
              "label": "Surrey",
              "count": "2"
            },
            {
              "label": "Vancouver",
              "count": "5"
            },
            {
              "label": "Victoria",
              "count": "4"
            }
          ]
        },
        {
          "label": "Manitoba",
          "children": [
            {
              "label": "Brandon",
              "count": "4"
            },
            {
              "label": "Winkler",
              "count": "2"
            },
            {
              "label": "Winnipeg",
              "count": "14"
            }
          ]
        },
        {
          "label": "Nova Scotia",
          "children": [
            {
              "label": "Halifax Regional Municipality",
              "count": "4"
            }
          ]
        },
        {
          "label": "Ontario",
          "children": [
            {
              "label": "Barrie",
              "count": "2"
            },
            {
              "label": "Belleville",
              "count": "4"
            },
            {
              "label": "Bowmanville",
              "count": "2"
            },
            {
              "label": "Brampton",
              "count": "5"
            },
            {
              "label": "Brantford",
              "count": "2"
            },
            {
              "label": "Burlington",
              "count": "3"
            },
            {
              "label": "Chatham-Kent",
              "count": "2"
            },
            {
              "label": "Fergus",
              "count": "2"
            },
            {
              "label": "Georgina",
              "count": "2"
            },
            {
              "label": "Guelph",
              "count": "2"
            },
            {
              "label": "Hamilton",
              "count": "7"
            },
            {
              "label": "Kingston",
              "count": "3"
            },
            {
              "label": "Kitchener",
              "count": "6"
            },
            {
              "label": "London",
              "count": "10"
            },
            {
              "label": "Markham",
              "count": "4"
            },
            {
              "label": "Mississauga",
              "count": "8"
            },
            {
              "label": "Newmarket",
              "count": "2"
            },
            {
              "label": "Oakville",
              "count": "5"
            },
            {
              "label": "Orangeville",
              "count": "3"
            },
            {
              "label": "Ottawa",
              "count": "11"
            },
            {
              "label": "Peterborough",
              "count": "2"
            },
            {
              "label": "Pickering",
              "count": "2"
            },
            {
              "label": "Richmond Hill",
              "count": "2"
            },
            {
              "label": "Saint Catharines",
              "count": "2"
            },
            {
              "label": "Sault Ste. Marie",
              "count": "3"
            },
            {
              "label": "Strathroy",
              "count": "2"
            },
            {
              "label": "Sudbury",
              "count": "6"
            },
            {
              "label": "Thunder Bay",
              "count": "8"
            },
            {
              "label": "Toronto",
              "count": "41"
            },
            {
              "label": "Vaughan",
              "count": "2"
            },
            {
              "label": "Welland",
              "count": "2"
            },
            {
              "label": "Windsor",
              "count": "6"
            }
          ]
        },
        {
          "label": "Québec",
          "children": [
            {
              "label": "Gatineau",
              "count": "2"
            },
            {
              "label": "Laval",
              "count": "2"
            },
            {
              "label": "Longueuil",
              "count": "2"
            },
            {
              "label": "Montreal",
              "count": "12"
            },
            {
              "label": "Pointe-Claire",
              "count": "2"
            },
            {
              "label": "Québec City",
              "count": "3"
            },
            {
              "label": "Repentigny",
              "count": "3"
            },
            {
              "label": "Saint-Hyacinthe",
              "count": "2"
            },
            {
              "label": "Sorel",
              "count": "3"
            },
            {
              "label": "Victoriaville",
              "count": "2"
            }
          ]
        },
        {
          "label": "Saskatchewan",
          "children": [
            {
              "label": "Meadow Lake",
              "count": "2"
            },
            {
              "label": "Regina",
              "count": "9"
            },
            {
              "label": "Saskatoon",
              "count": "8"
            }
          ]
        }
      ]
    },
    {
      "label": "Czech Republic",
      "fill": "#11457e",
      "children": [
        {
          "label": "Central Bohemian",
          "children": [
            {
              "label": "Kladno",
              "count": "5"
            }
          ]
        },
        {
          "label": "Moravian-Silesian",
          "children": [
            {
              "label": "Ostrava",
              "count": "2"
            },
          ]
        },
        {
          "label": "South Bohemian",
          "children": [
            {
              "label": "Pisek",
              "count": "2"
            },
          ]
        },
        {
          "label": "Prague",
          "children": [
            {
              "label": "Prague",
              "count": "4"
            }
          ]
        }
      ]
    },
    {
      "label": "Denmark",
      "fill": "#d21034",
      "children": [
        {
          "label": "Hovedstaden",
          "children":[
            {
              "label": "Rødovre",
              "count": "2"
            }
          ]
        },
        {
          "label": "Midtjylland",
          "children": [
            {
              "label": "Herning",
              "count": "4"
            }
          ]
        }
      ]
    },
    {
      "label": "Finland",
      "fill": "#002f6c",
      "children": [
        // start
        {
          "label": "Central Finland",
          "children": [
            {
              "label": "Jyväskylä",
              "count": "3"
            }
          ]
        },
        {
          "label": "Finland Proper",
          "children": [
            {
              "label": "Turku",
              "count": "3"
            }
          ]
        },
        {
          "label": "Northern Ostrobothnia",
          "children": [
            {
              "label": "Oulu",
              "count": "3"
            },
            {
              "label": "Raahe",
              "count": "2"
            }
          ]
        },
        {
          "label": "Satakunta",
          "children": [
            {
              "label": "Pori",
              "count": "3"
            },
            {
              "label": "Rauma",
              "count": "2"
            },
          ]
        },
        {
          "label": "Pirkanmaa",
          "children": [
            {
              "label": "Tampere",
              "count": "3"
            }
          ]
        },
        {
          "label": "Uusimaa",
          "children": [
            {
              "label": "Helsinki",
              "count": "5"
            },
            {
              "label": "Vantaa",
              "count": "4"
            }
          ]
        }
      ]
    },
    {
      "label": "Germany",
      "fill": "#000000",
      "children": [
        {
          "label": "Bavaria",
          "children": [
            {
              "label": "Landshut",
              "count": "2"
            }
          ]
        }
      ]
    },
    {
      "label": "Russia",
      "fill": "#D52B1E",
      "children": [
        {
          "label": "Chelyabinsk Oblast",
          "children": [
            {
              "label": "Chelyabinsk",
              "count": "2"
            },
            {
              "label": "Magnitogorsk",
              "count": "2"
            }
          ]
        },
        {
          "label": "gorod Moskva",
          "children": [
            {
              "label": "Moscow",
              "count": "6"
            }
          ]
        },
        {
          "label": "Kemerovo Oblast",
          "children": [
            {
              "label": "Novokuznetsk",
              "count": "2"
            }
          ]
        },
        {
          "label": "Omsk Oblast",
          "children": [
            {
              "label": "Omsk",
              "count": "2"
            }
          ]
        },
        {
          "label": "Sverdlovsk Oblast",
          "children": [
            {
              "label": "Nizhny Tagil",
              "count": "2"
            }
          ]
        },
        {
          "label": "Tatarstan",
          "children": [
            {
              "label": "Nizhnekamsk",
              "count": "2"
            }
          ]
        },
        {
          "label": "Yaroslavl Oblast",
          "children": [
            {
              "label": "Yaroslavl",
              "count": "3"
            }
          ]
        }
      ]
    },
    {
      "label": "Slovakia",
      "fill": "#ee1c25",
      "children": [
        {
          "label": "Košice Self-governing Region",
          "children": [
            {
              "label": "Košice",
              "count": "2"
            }
          ]
        },
        {
          "label": "Trenčín",
          "children": [
            {
              "label": "Trenčín",
              "count": "2"
            }
          ]
        }
      ]
    },
    {
      "label": "Sweden",
      "fill": "#007fe5",
      "children": [
        {
          "label": "Blekinge County",
          "children": [
            {
              "label": "Karlskrona",
              "count": "2"
            }
          ]
        },
        {
          "label": "Gävleborg County",
          "children": [
            {
              "label": "Gävle",
              "count": "4"
            }
          ]
        },
        {
          "label": "Stockholm County",
          "children": [
            {
              "label": "Stockholm",
              "count": "14"
            },
            {
              "label": "Södertälje",
              "count": "2"
            }
          ]
        },
        {
          "label": "Varmland County",
          "children": [
            {
              "label": "Karlstad",
              "count": "3"
            }
          ]
        },
        {
          "label": "Västerbotten County",
          "children": [
            {
              "label": "Skellefteå",
              "count": "3"
            }
          ]
        },
        {
          "label": "Västernorrland County",
          "children": [
            {
              "label": "Örnsköldsvik",
              "count": "3"
            }
          ]
        },
        {
          "label": "Västmanland County",
          "children": [
            {
              "label": "Västerås",
              "count": "3"
            }
          ]
        },
        {
          "label": "Västra Götaland County",
          "children": [
            {
              "label": "Gothenburg",
              "count": "6"
            }
          ]
        }
      ]
    },
    {
      "label": "Switzerland",
      "fill": "#F00000",
      "children": [
        {
          "label": "Bern",
          "children": [
            {
              "label": "Bern",
              "count": "4"
            }
          ]
        }
      ]
    },
    {
      "label": "United States",
      "fill": "#0052A5",
      "children": [
        {
          "label": "Alaska",
          "children": [
            {
              "label": "Anchorage",
              "count": "4"
            }
          ]
        },
        {
          "label": "Arizona",
          "children": [
            {
              "label": "Scottsdale",
              "count": "2"
            }
          ]
        },
        {
          "label": "California",
          "children": [
            {
              "label": "Long Beach",
              "count": "2"
            }
          ]
        },
        {
          "label": "Colorado",
          "children": [
            {
              "label": "Denver",
              "count": "3"
            }
          ]
        },
        {
          "label": "Connecticut",
          "children": [
            {
              "label": "Greenwich",
              "count": "2"
            }
          ]
        },
        {
          "label": "Illinois",
          "children": [
            {
              "label": "Chicago",
              "count": "4"
            }
          ]
        },
        {
          "label": "Indiana",
          "children": [
            {
              "label": "Indianapolis",
              "count": "2"
            }
          ]
        },
        {
          "label": "Maine",
          "children": [
            {
              "label": "Biddeford",
              "count": "2"
            }
          ]
        },
        {
          "label": "Massachusetts",
          "children": [
            {
              "label": "Boston",
              "count": "8"
            }
          ]
        },
        {
          "label": "Michigan",
          "children": [
            {
              "label": "Ann Arbor",
              "count": "5"
            },
            {
              "label": "Detroit",
              "count": "3"
            },
            {
              "label": "Grosse Pointe",
              "count": "2"
            },
            {
              "label": "Livonia",
              "count": "2"
            },
            {
              "label": "Trenton",
              "count": "2"
            }
          ]
        },
        {
          "label": "Minnesota",
          "children": [
            {
              "label": "Bloomington",
              "count": "2"
            },
            {
              "label": "Burnsville",
              "count": "2"
            },
            {
              "label": "Eden Prairie",
              "count": "2"
            },
            {
              "label": "Edina",
              "count": "2"
            },
            {
              "label": "Lakeville",
              "count": "2"
            },
            {
              "label": "Minneapolis",
              "count": "7"
            },
            {
              "label": "Saint Paul",
              "count": "3"
            },
            {
              "label": "Virginia",
              "count": "2"
            }
          ]
        },
        {
          "label": "Missouri",
          "children": [
            {
              "label": "St. Louis",
              "count": "4"
            }
          ]
        },
        {
          "label": "New Jersey",
          "children": [
            {
              "label": "Middletown",
              "count": "2"
            }
          ]
        },
        {
          "label": "New York",
          "children": [
            {
              "label": "Buffalo",
              "count": "5"
            },
            {
              "label": "Massapequa",
              "count": "2"
            },
            {
              "label": "Rochester",
              "count": "4"
            },
            {
              "label": "Syracuse",
              "count": "3"
            }
          ]
        },
        {
          "label": "North Dakota",
          "children": [
            {
              "label": "Grand Forks",
              "count": "2"
            }
          ]
        },
        {
          "label": "Ohio",
          "children": [
            {
              "label": "Dublin",
              "count": "2"
            }
          ]
        },
        {
          "label": "Pennsylvania",
          "children": [
            {
              "label": "Pittsburgh",
              "count": "3"
            }
          ]
        },
        {
          "label": "Texas",
          "children": [
            {
              "label": "Plano",
              "count": "2"
            }
          ]
        },
        {
          "label": "Washington",
          "children": [
            {
              "label": "Spokane",
              "count": "2"
            }
          ]
        },
        {
          "label": "Wisconsin",
          "children": [
            {
              "label": "Madison",
              "count": "5"
            },
            {
              "label": "Milwaukee",
              "count": "3"
            }
          ]
        }
      ]
    }
  ]
}

nestedChart.initialize('chart-container', chartdata);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console