Simpsons Family Tree

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/WTPP0O22

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 600px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>
  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/simpsons.js'></script>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartData = [{
        type: 'node',
        id: 'n1',
        cls: 'fam',
        text: ' ',
        dataFullName: ''
      },
      {
        type: 'node',
        id: 'homer',
        text: 'Homer',
        dataFullName: 'Homer Simpson',
        style: {
          backgroundImage: SIMPSONS.homer
        }
      },
      {
        type: 'node',
        id: 'marge',
        text: 'Marge',
        dataFullName: 'Marge Simpson',
        style: {
          backgroundImage: SIMPSONS.marge
        }
      },
      {
        type: 'node',
        id: 'lisa',
        text: 'Lisa',
        dataFullName: 'Lisa Simpson',
        style: {
          backgroundImage: SIMPSONS.lisa
        }
      },
      {
        type: 'node',
        id: 'bart',
        text: 'Bart',
        dataFullName: 'Bart Simpson',
        style: {
          backgroundImage: SIMPSONS.bart
        }
      },
      {
        type: 'node',
        id: 'maggie',
        text: 'Maggie',
        dataFullName: 'Maggie Simpson',
        style: {
          backgroundImage: SIMPSONS.maggie
        }
      },
      {
        type: 'node',
        id: 'santa',
        text: 'Helper',
        dataFullName: 'Santa\'s Little Helper',
        style: {
          backgroundImage: SIMPSONS.santa
        }
      },

      {
        type: 'node',
        id: 'n2',
        cls: 'fam',
        text: ' ',
        dataFullName: ''
      },
      {
        type: 'node',
        id: 'mona',
        text: 'Mona',
        dataFullName: 'Mona Simpson',
        style: {
          backgroundImage: SIMPSONS.mona
        }
      },
      {
        type: 'node',
        id: 'herb',
        text: 'Herb',
        dataFullName: 'Herb Simpson',
        style: {
          backgroundImage: SIMPSONS.herb
        }
      },
      {
        type: 'node',
        id: 'abraham',
        text: 'Abraham',
        dataFullName: 'Abraham Simpson',
        style: {
          backgroundImage: SIMPSONS.abraham
        }
      },

      {
        type: 'node',
        id: 'n3',
        cls: 'fam',
        text: ' ',
        dataFullName: ''
      },
      {
        type: 'node',
        id: 'patty',
        text: 'Patty',
        dataFullName: 'Patty Bouvier',
        style: {
          backgroundImage: SIMPSONS.patty
        }
      },
      {
        type: 'node',
        id: 'clancy',
        text: 'Clancy',
        dataFullName: 'Clancy Bouvier',
        style: {
          backgroundImage: SIMPSONS.clancy
        }
      },
      {
        type: 'node',
        id: 'jaqueline',
        text: 'Jaqueline',
        dataFullName: 'Jaqueline Bouvier',
        style: {
          backgroundImage: SIMPSONS.jaqueline
        }
      },
      {
        type: 'node',
        id: 'selma',
        text: 'Selma',
        dataFullName: 'Selma Bouvier',
        style: {
          backgroundImage: SIMPSONS.selma
        }
      },

      {
        type: 'node',
        id: 'n4',
        cls: 'fam',
        text: ' ',
        dataFullName: ''
      },
      {
        type: 'node',
        id: 'ling',
        text: 'Ling',
        dataFullName: 'Ling Bouvier',
        style: {
          backgroundImage: SIMPSONS.ling
        }
      },

      {
        type: 'link',
        source: 'n1',
        target: 'homer'
      },
      {
        type: 'link',
        source: 'n1',
        target: 'marge'
      },
      {
        type: 'link',
        source: 'n1',
        target: 'bart'
      },
      {
        type: 'link',
        source: 'n1',
        target: 'lisa'
      },
      {
        type: 'link',
        source: 'n1',
        target: 'maggie'
      },
      {
        type: 'link',
        source: 'n1',
        target: 'santa'
      },

      {
        type: 'link',
        source: 'n2',
        target: 'homer'
      },
      {
        type: 'link',
        source: 'n2',
        target: 'mona'
      },
      {
        type: 'link',
        source: 'n2',
        target: 'herb'
      },
      {
        type: 'link',
        source: 'n2',
        target: 'abraham'
      },

      {
        type: 'link',
        source: 'n3',
        target: 'marge'
      },
      {
        type: 'link',
        source: 'n3',
        target: 'patty'
      },
      {
        type: 'link',
        source: 'n3',
        target: 'selma'
      },
      {
        type: 'link',
        source: 'n3',
        target: 'clancy'
      },
      {
        type: 'link',
        source: 'n3',
        target: 'jaqueline'
      },

      {
        type: 'link',
        source: 'n4',
        target: 'selma'
      },
      {
        type: 'link',
        source: 'n4',
        target: 'ling'
      },
    ];

    let chartConfig = {
      type: 'tree',
      options: {
        aspect: 'graph',
        attractionConstant: 0.8,
        repulsionConstant: 4000,
        repulsionDistanceFactor: 20,
        springLength: 75,
        node: {
          backgroundColor: '#fff',
          backgroundRepeat: 'no-repeat',
          backgroundScale: 0.75,
          borderColor: '#036',
          borderWidth: '3px',
          label: {
            color: '#000',
            fontWeight: 'bold',
            offsetY: '35px'
          },
          tooltip: {
            text: '%data-full-name'
          },
          size: '24px'
        },
        'node[cls-fam]': {
          borderWidth: '2px',
          borderColor: '#000',
          backgroundColor: '#ccc',
          label: {
            visible: false
          },
          size: '12px'
        },
        link: {
          lineWidth: '2px',
          lineColor: '#666'
        }
      },
      plotarea: {
        margin: '40px'
      },
      source: {
        text: 'Original idea by http://bmdata.co.uk/simpsons/',
        align: 'left'
      },
      series: chartData
    };

    zingchart.render({
      id: 'myChart',
      width: '100%',
      height: '100%',
      output: 'canvas',
      data: chartConfig
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/simpsons.js'></script>
  </body>
</html>

let chartData = [
  { type: 'node', id: 'n1', cls: 'fam', text: ' ', dataFullName: '' },
  { type: 'node', id: 'homer', text: 'Homer', dataFullName: 'Homer Simpson', style: { backgroundImage: SIMPSONS.homer } },
  { type: 'node', id: 'marge', text: 'Marge', dataFullName: 'Marge Simpson', style: { backgroundImage: SIMPSONS.marge } },
  { type: 'node', id: 'lisa', text: 'Lisa', dataFullName: 'Lisa Simpson', style: { backgroundImage: SIMPSONS.lisa } },
  { type: 'node', id: 'bart', text: 'Bart', dataFullName: 'Bart Simpson', style: { backgroundImage: SIMPSONS.bart } },
  { type: 'node', id: 'maggie', text: 'Maggie', dataFullName: 'Maggie Simpson', style: { backgroundImage: SIMPSONS.maggie } },
  { type: 'node', id: 'santa', text: 'Helper', dataFullName: 'Santa\'s Little Helper', style: { backgroundImage: SIMPSONS.santa } },

  { type: 'node', id: 'n2', cls: 'fam', text: ' ', dataFullName: '' },
  { type: 'node', id: 'mona', text: 'Mona', dataFullName: 'Mona Simpson', style: { backgroundImage: SIMPSONS.mona } },
  { type: 'node', id: 'herb', text: 'Herb', dataFullName: 'Herb Simpson', style: { backgroundImage: SIMPSONS.herb } },
  { type: 'node', id: 'abraham', text: 'Abraham', dataFullName: 'Abraham Simpson', style: { backgroundImage: SIMPSONS.abraham } },

  { type: 'node', id: 'n3', cls: 'fam', text: ' ', dataFullName: '' },
  { type: 'node', id: 'patty', text: 'Patty', dataFullName: 'Patty Bouvier', style: { backgroundImage: SIMPSONS.patty } },
  { type: 'node', id: 'clancy', text: 'Clancy', dataFullName: 'Clancy Bouvier', style: { backgroundImage: SIMPSONS.clancy } },
  { type: 'node', id: 'jaqueline', text: 'Jaqueline', dataFullName: 'Jaqueline Bouvier', style: { backgroundImage: SIMPSONS.jaqueline } },
  { type: 'node', id: 'selma', text: 'Selma', dataFullName: 'Selma Bouvier', style: { backgroundImage: SIMPSONS.selma } },

  { type: 'node', id: 'n4', cls: 'fam', text: ' ', dataFullName: '' },
  { type: 'node', id: 'ling', text: 'Ling', dataFullName: 'Ling Bouvier', style: { backgroundImage: SIMPSONS.ling } },

  { type: 'link', source: 'n1', target: 'homer' },
  { type: 'link', source: 'n1', target: 'marge' },
  { type: 'link', source: 'n1', target: 'bart' },
  { type: 'link', source: 'n1', target: 'lisa' },
  { type: 'link', source: 'n1', target: 'maggie' },
  { type: 'link', source: 'n1', target: 'santa' },

  { type: 'link', source: 'n2', target: 'homer' },
  { type: 'link', source: 'n2', target: 'mona' },
  { type: 'link', source: 'n2', target: 'herb' },
  { type: 'link', source: 'n2', target: 'abraham' },

  { type: 'link', source: 'n3', target: 'marge' },
  { type: 'link', source: 'n3', target: 'patty' },
  { type: 'link', source: 'n3', target: 'selma' },
  { type: 'link', source: 'n3', target: 'clancy' },
  { type: 'link', source: 'n3', target: 'jaqueline' },

  { type: 'link', source: 'n4', target: 'selma' },
  { type: 'link', source: 'n4', target: 'ling' },
];

let chartConfig = {
  type: 'tree',
  options: {
    aspect: 'graph',
    attractionConstant: 0.8,
    repulsionConstant: 4000,
    repulsionDistanceFactor: 20,
    springLength: 75,
    node: {
      backgroundColor: '#fff',
      backgroundRepeat: 'no-repeat',
      backgroundScale: 0.75,
      borderColor: '#036',
      borderWidth: '3px',
      label: {
        color: '#000',
        fontWeight: 'bold',
        offsetY: '35px'
      },
      tooltip: {
        text: '%data-full-name'
      },
      size: '24px'
    },
    'node[cls-fam]': {
      borderWidth: '2px',
      borderColor: '#000',
      backgroundColor: '#ccc',
      label: {
        visible: false
      },
      size: '12px'
    },
    link: {
      lineWidth: '2px',
      lineColor: '#666'
    }
  },
  plotarea: {
    margin: '40px'
  },
  source: {
    text: 'Original idea by http://bmdata.co.uk/simpsons/',
    align: 'left'
  },
  series: chartData
};

zingchart.render({
  id: 'myChart',
  width: '100%',
  height: '100%',
  output: 'canvas',
  data: chartConfig
});

.zc-body { background:#fff; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 600px;
}

.zc-ref {
  display: none;
}

Range Chart with Median Values 52/270 Multiple Bubble Packs

Simpsons Family Tree

Related Documentation: