Packed circle chart

by extempl

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
height:550px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);

var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())

var d = [{"year":2017,"months":[1,2,3,4,5,6,7,8,9,10,11,12]},{"year":2018,"months":[1,2,3,4,5,6,7,8,9,10,11,12]},{"year":2019,"months":[1,2,3,4,5,6,7,8,9,10,11,12]}];

var prepareData = function(data){
  return data.map(x=> ({
    name: ''+x.year,
    value: x.year,
    children: x.months.map(m=> ({name: 'month'+m, value: m}))
  }))
}

networkSeries.data = prepareData(d)

networkSeries.dataFields.linkWith = "linkWith";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "name";
networkSeries.dataFields.value = "value";
networkSeries.dataFields.children = "children";
networkSeries.links.template.distance = 1;
networkSeries.nodes.template.tooltipText = "{name}";
networkSeries.nodes.template.fillOpacity = 1;
networkSeries.nodes.template.outerCircle.scale = 1;
  networkSeries.nodes.template.togglable = false;

networkSeries.nodes.template.label.text = "{name}"
 networkSeries.fontSize = 12;
networkSeries.nodes.template.label.hideOversized = true;
networkSeries.nodes.template.label.truncate = true;
 networkSeries.minRadius = 30
  networkSeries.maxRadius = 50
networkSeries.manyBodyStrength = -5;
networkSeries.links.template.strokeOpacity = 0;


networkSeries.nodes.template.events.on('hit', e=> {
/* debugger */
e.target.fill = am4core.color('red')
debugger
  /* e.target.dataItem.color = am4core.color('red')//e.target.dataItem.color.lighten(-0.2)
  //networkSeries.deepInvalidate()
   */  //networkSeries.invalidate()
})