<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 800px;
}
.zc-ref {
display: none;
}
#myGrid zing-grid {
visibility: hidden;
pointer-events: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all 0.35s linear;
height: 300px;
width: 400px;
}
#myGrid zing-grid.active {
visibility: visible;
pointer-events: initial;
opacity: 1;
position: absolute;
}
zing-grid[loading] {
height: 300px;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<!-- GRID CONTAINER -->
<div id="myGrid"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
let chartConfig = {
type: 'null',
title: {
text: 'The World of</br>Artificial Intelligence Diagram',
fontSize: 38,
htmlMode: true,
},
subtitle: {
text: 'Hover over the circles to explore AI topics',
fontSize: 14,
color: '#275268',
offsetY: 70,
},
shapes: [{
type: 'circle',
label: {
text: 'Artificial Intelligence',
color: '#fff',
fontSize: 32,
offsetY: -260,
},
dataName: 'Artificial Intelligence',
dataList: ['Emergent behavior', 'AI Ethics', 'Speech Recognition', 'Reinforcment Learning', 'Intelligent Robotics', 'Augmented Programming', 'Algorithm Building'],
border: '2px solid #ddd',
size: 325,
x: '50%',
y: '58%',
backgroundColor: '#0B3D54'
},
{
type: 'circle',
label: {
text: 'Machine Learning',
color: '#fff',
fontSize: 32,
offsetY: -215,
},
dataName: 'Machine Learning',
dataList: ['PCA', 'Logistic Regression', 'Linear Regression', 'K-Nearest Neighbors', 'Unsupervised Machine Learning', 'K Means', 'Supervised Machine Learning', 'Decision Trees', 'Dimensionality Reduction', 'Support Vector Machine', 'Hypothesis Testing'],
border: '2px solid #ddd',
size: 280,
x: '50%',
y: '64%',
backgroundColor: '#275268',
},
{
type: 'circle',
label: {
text: 'Neural Networks',
color: '#fff',
fontSize: 32,
offsetY: -165,
},
dataName: 'Neural Networks',
dataList: ['Liquid State Machine', 'Self Organizing Maps', 'Feed Forward', 'Deep Feed Forward', 'Feed Forward', 'Perceptron', 'Backpropagation', 'Multi-Layer Perceptron', 'Hopefield Networks', 'Deep Believe Network', 'Boltzmann Machine'],
border: '2px solid #ddd',
size: 230,
x: '50%',
y: '70.5%',
backgroundColor: '#456d83',
},
{
type: 'circle',
label: {
text: 'Deep Learning',
color: '#fff',
fontSize: 32,
offsetY: -110,
},
dataName: 'Deep Learning',
dataList: ['Auto Encoders', 'Transformers', 'Convolution Neural Network (CNN)', 'Recurrent Neural Network (RNN)', 'Long Short Term Memory Network (LSTM)', 'Deep Reinforcement Learning', 'GPT', 'BERT', 'Epochs'],
border: '2px solid #ddd',
size: 180,
x: '50%',
y: '76.5%',
backgroundColor: '#638a9e',
},
{
type: 'circle',
label: {
text: 'Generative AI',
color: '#fff',
fontSize: 32,
offsetY: -30,
},
dataName: 'Generative AI',
dataList: ['Foundation Model', 'Agents', 'BigGAN', 'RLHF', 'Hallucination', 'QLoRA', 'Few Short Learning', 'Transfer Learning', 'One Shot Learning', 'Large Language Model', 'Multimodal AI', 'Langchain', 'Generative Adversarial Netwrosk (GANs)'],
border: '2px solid #ddd',
size: 130,
x: '50%',
y: '83%',
backgroundColor: '#7ba2b5',
}
],
labels: [{
text: "Remix of",
url: 'https://www.americanpharmaceuticalreview.com/Featured-Articles/619873-Introduction-to-the-World-of-Artificial-Intelligence/',
target: '_blank',
fontSize: 14,
color: '#a6a6a6',
textAlign: 'left',
offsetX: -220,
offsetY: -48,
x: '100%',
y: '100%',
width: 400,
}],
images: [{
src: 'https://app.zingsoft.com/api/file/NFYPTJLI/HKAW1Y9sQe2YmwleJfNR_Screenshot%202026-04-07%20at%2011.08.08%E2%80%AFAM.png',
offsetX: -285,
offsetY: -125,
x: '100%',
y: '100%',
backgroundScale: 0.35
}],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
let gridConfig = {
layout: 'row',
layoutControls: 'disabled',
height: 300,
};
let zgRef = new ZingGrid(document.getElementById('myGrid'), gridConfig);
zingchart.shape_mousemove = function(e) {
zgRef.caption = e['data-name'];
zgRef.data = e['data-list'].map(item => ({
topic: item
}));
zgRef.classList.add('active');
const offsetY = zgRef.caption === 'Generative AI' ? 300 : 200;
zgRef.style.top = `${e.ev.y - offsetY}px`;
zgRef.style.left = `${e.ev.x - 200}px`;
};
window.addEventListener('mouseout', function(e) {
if (!e.target.closest('zing-grid') &&
!e.target.hasAttribute('shape')) {
zgRef.classList.remove('active');
};
});
});
</script>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
let chartConfig = {
type: 'null',
title: {
text: 'The World of</br>Artificial Intelligence Diagram',
fontSize: 38,
htmlMode: true,
},
subtitle: {
text: 'Hover over the circles to explore AI topics',
fontSize: 14,
color: '#275268',
offsetY: 70,
},
shapes: [
{
type: 'circle',
label: {
text: 'Artificial Intelligence',
color: '#fff',
fontSize: 32,
offsetY: -260,
},
dataName: 'Artificial Intelligence',
dataList: ['Emergent behavior', 'AI Ethics', 'Speech Recognition', 'Reinforcment Learning', 'Intelligent Robotics', 'Augmented Programming', 'Algorithm Building'],
border: '2px solid #ddd',
size: 325,
x: '50%',
y: '58%',
backgroundColor: '#0B3D54'
},
{
type: 'circle',
label: {
text: 'Machine Learning',
color: '#fff',
fontSize: 32,
offsetY: -215,
},
dataName: 'Machine Learning',
dataList: ['PCA', 'Logistic Regression', 'Linear Regression', 'K-Nearest Neighbors', 'Unsupervised Machine Learning', 'K Means', 'Supervised Machine Learning', 'Decision Trees', 'Dimensionality Reduction', 'Support Vector Machine', 'Hypothesis Testing'],
border: '2px solid #ddd',
size: 280,
x: '50%',
y: '64%',
backgroundColor: '#275268',
},
{
type: 'circle',
label: {
text: 'Neural Networks',
color: '#fff',
fontSize: 32,
offsetY: -165,
},
dataName: 'Neural Networks',
dataList: ['Liquid State Machine', 'Self Organizing Maps', 'Feed Forward', 'Deep Feed Forward', 'Feed Forward', 'Perceptron', 'Backpropagation', 'Multi-Layer Perceptron', 'Hopefield Networks', 'Deep Believe Network', 'Boltzmann Machine'],
border: '2px solid #ddd',
size: 230,
x: '50%',
y: '70.5%',
backgroundColor: '#456d83',
},
{
type: 'circle',
label: {
text: 'Deep Learning',
color: '#fff',
fontSize: 32,
offsetY: -110,
},
dataName: 'Deep Learning',
dataList: ['Auto Encoders', 'Transformers', 'Convolution Neural Network (CNN)', 'Recurrent Neural Network (RNN)', 'Long Short Term Memory Network (LSTM)', 'Deep Reinforcement Learning', 'GPT', 'BERT', 'Epochs'],
border: '2px solid #ddd',
size: 180,
x: '50%',
y: '76.5%',
backgroundColor: '#638a9e',
},
{
type: 'circle',
label: {
text: 'Generative AI',
color: '#fff',
fontSize: 32,
offsetY: -30,
},
dataName: 'Generative AI',
dataList: ['Foundation Model', 'Agents', 'BigGAN', 'RLHF', 'Hallucination', 'QLoRA', 'Few Short Learning', 'Transfer Learning', 'One Shot Learning', 'Large Language Model', 'Multimodal AI', 'Langchain', 'Generative Adversarial Netwrosk (GANs)'],
border: '2px solid #ddd',
size: 130,
x: '50%',
y: '83%',
backgroundColor: '#7ba2b5',
}
],
labels: [{
text: "Remix of",
url: 'https://www.americanpharmaceuticalreview.com/Featured-Articles/619873-Introduction-to-the-World-of-Artificial-Intelligence/',
target: '_blank',
fontSize: 14,
color: '#a6a6a6',
textAlign: 'left',
offsetX: -220,
offsetY: -48,
x: '100%',
y: '100%',
width: 400,
}],
images: [{
src: 'https://app.zingsoft.com/api/file/NFYPTJLI/HKAW1Y9sQe2YmwleJfNR_Screenshot%202026-04-07%20at%2011.08.08%E2%80%AFAM.png',
offsetX: -285,
offsetY: -125,
x: '100%',
y: '100%',
backgroundScale: 0.35
}],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
let gridConfig = {
layout: 'row',
layoutControls: 'disabled',
height: 300,
};
let zgRef = new ZingGrid(document.getElementById('myGrid'), gridConfig);
zingchart.shape_mousemove = function(e) {
zgRef.caption = e['data-name'];
zgRef.data = e['data-list'].map(item => ({ topic: item }));
zgRef.classList.add('active');
const offsetY = zgRef.caption === 'Generative AI' ? 300 : 200;
zgRef.style.top = `${e.ev.y - offsetY}px`;
zgRef.style.left = `${e.ev.x - 200}px`;
};
window.addEventListener('mouseout', function(e) {
if (!e.target.closest('zing-grid')
&& !e.target.hasAttribute('shape')) {
zgRef.classList.remove('active');
};
});
});
