Treegraph box layout

author(s): Pawel Lysy, Torstein Hønsi

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>
<script type="application/json" id="data">
{
    "data": {
        "events": [
            {
                "id": "30c8ec78a04aa66039d1f5712f9fb241",
                "sentiment": "-5",
                "similarity": "6",
                "digest_rank": "6.5",
                "level": 2,
                "type": 1,
                "name": "Fani Willis says the delay in starting the Trump-related hearings is not related to her office",
                "rate": 0.210526,
                "CDate": "2024-03-23",
                "start": 1711119601000,
                "end": 1711378801000,
                "media": "https:\/\/mediaproxy.salon.com\/width\/1200\/https:\/\/media2.salon.com\/2024\/03\/fani-willis-2043989544jpg.jpg",
                "end_t": "2024-03-26",
                "tracked": 4,
                "pointWidth": 41,
                "saturation": 0.5,
                "parent": "2862d4fd3d5fafe797f7ac8f32b9acf2"
            },
            {
                "id": "44375e4ac843dddec0ecaee76d998671",
                "sentiment": "-10",
                "similarity": "14",
                "digest_rank": "57.5",
                "level": 1,
                "type": 1,
                "name": "The US had warned that ISIS was determined to attack Russia, however, Russia had ignored the warnings",
                "rate": 0.25,
                "CDate": "2024-03-23",
                "start": 1711119601000,
                "end": 1711206001000,
                "media": "https:\/\/assets.bwbx.io\/images\/users\/iqjWHBFdfxIU\/iXfC6bWvv8VM\/v1\/960x640.jpg",
                "end_t": "2024-03-24",
 ...

CSS

#container {
    max-width: 1800px;
    min-width: 360px;
    margin: 0 auto;
    /*height: 600px;*/
    overflow:auto;
}
.AAAA1 {
  height: 80px;
  width: 200px;
  font-weight: normal;
  line-break: anywhere;
  white-space: normal;
  padding: 3px;
  margin:0;
  background-color: #ffffff;
  color:#000000;
  border: 2px solid gray;
  border-radius: 11px;
}
.AAAA2 {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    font-weight: normal;
    line-break: anywhere;
    white-space: normal;
    padding: 3px;
    color: #000000;
    margin-left: -3px;
    margin-top: -3px;
    position: relative;
}
.AAAA3 {
    height: 100%;
    width: 100%;
    border-radius: 10px;
    font-weight: normal;
    line-break: anywhere;
    white-space: normal;
    padding: 0;
    margin-left: -3px;
    margin-top: -3px;
    color: #000000;
    opacity: 0.33;
    z-index: 10;
    top: 3px;
    position: absolute;
}

JavaScript

var dataTag = document.getElementById('data').innerHTML;
var dataJson = JSON.parse(dataTag);
    

Highcharts.chart('container', {
    title: {
        text: 'Treegraph with box layout'
    },
    chart:{
      marginRight: 200,
      marginTop:100,
      marginBottom:50,
      spacingBottom:100,
      spacingLeft: 10,
      height: 10000
    },
    series: [
        {
            type: 'treegraph',
            //data:data1,
            data: dataJson['data']['events'],
            tooltip: {
                pointFormat: '{point.name}'
            },
            /*
            marker: {
                symbol: 'rect',
                width: '25%'
            },
            borderRadius: 10,
            */
            dataLabels: {
                pointFormat: '<div class="AAAA1" style="border: 2px solid {point.color};"><div class="AAAA2">{point.name} i: {point.id}, p:{point.parent}<div class="AAAA3" style="background-color:{point.color} "></div></div></div>',
                style: {
                    whiteSpace: 'nowrap'
                },
                useHTML: true,
                //position:'left',
                x:-1,
                y: -2,
                crop: false,
                allowOverlap: true,
            },
            marker: {
              //symbol: 'rect',
              radius: 40,
              height: 80,
              width: 200,
              nodeDistance: '50%',
              borderRadius: 10,
              lineColor:null,
            },
            levels: [
                {
                    level: 1,
                    levelIsConstant: false
                },
                {
                    level: 2,
                    colorByPoint: true
                },
                {
                    level: 3,
                    colorVariation: {
                        key: 'brightness',
                        to: -0.5
                    }
                },
                {
                    level: 4,
              ...