<!DOCTYPE html>
<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-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 850px;
min-width: 700px;
}
#root {
background-color: #6a921f;
border-radius: 5px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
padding: 2px 10px;
position: absolute;
text-align: center;
top: 380px;
left: 660px;
z-index: 1;
}
#rootPlaceholder {
min-width: 100px;
flex: 2;
}
.chart-flex {
min-height: 800px;
min-width: 700px;
display: flex;
flex-direction: row;
position: relative
}
.chart--container:first-child {
flex: 3;
}
.chart--container:last-child {
flex: 6;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<!-- CHART CONTAINER -->
<div class="chart-flex">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<div id="rootPlaceholder"></div>
<div id="root">
<p>The Map of</br>Artificial Intelligence</p>
</div>
<div id="myChart2" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
let chartData1 = [{
id: "ai",
parent: "",
name: "The Map Of Artificial Intelligence"
},
// Speech Recognition
{
id: "speech",
parent: "ai",
name: "Speech Recognition"
},
{
id: "asr",
parent: "speech",
name: "Automatic Speech Recognition (ASR)",
value: 1
},
{
id: "stt",
parent: "speech",
name: "Speech-to-Text Conversion",
value: 1
},
{
id: "tts",
parent: "speech",
name: "Speech Synthesis (Text-to-Speech)",
value: 1
},
// Virtual Agents and Chatbots
{
id: "agents",
parent: "ai",
name: "Virtual Agents and Chatbots"
},
{
id: "convagents",
parent: "agents",
name: "Conversational Agents",
value: 1
},
{
id: "dialog",
parent: "agents",
name: "Dialogue Systems",
value: 1
},
{
id: "chatbots",
parent: "agents",
name: "Chatbot Development",
value: 1
},
// Autonomous Vehicles
{
id: "av",
parent: "ai",
name: "Autonomous Vehicles"
},
{
id: "selfdriving",
parent: "av",
name: "Self-Driving Cars",
value: 1
},
{
id: "adas",
parent: "av",
name: "Advanced Driver Assistance Systems (ADAS)",
value: 1
},
{
id: "cvav",
parent: "av",
name: "Computer Vision for Autonomous Vehicles",
value: 1
},
// Recommender Systems
{
id: "recsys",
parent: "ai",
name: "Recommender Systems"
},
{
id: "collab",
parent: "recsys",
name: "Collaborative Filtering",
value: 1
},
{
id: "content",
parent: "recsys",
name: "Content-Based Filtering",
value: 1
},
{
id: "hybrid",
parent: "recsys",
name: "Hybrid Approaches",
value: 1
},
// Game Playing AI
{
id: "gameai",
parent: "ai",
name: "Game Playing AI"
},
{
id: "chess",
parent: "gameai",
name: "Chess AI",
value: 1
},
{
id: "go",
parent: "gameai",
name: "Go AI",
value: 1
},
{
id: "video",
parent: "gameai",
name: "Video Game AI",
value: 1
},
// Knowledge Graphs
{
id: "kg",
parent: "ai",
name: "Knowledge Graphs"
},
{
id: "graphai",
parent: "kg",
name: "Graph-Based AI",
value: 1
},
{
id: "semantic",
parent: "kg",
name: "Semantic Graphs",
value: 1
},
// Cognitive Computing
{
id: "cognitive",
parent: "ai",
name: "Cognitive Computing"
},
{
id: "emotionai",
parent: "cognitive",
name: "Emotion AI",
value: 1
},
{
id: "context",
parent: "cognitive",
name: "Context-Aware AI",
value: 1
},
// Swarm Intelligence
{
id: "swarm",
parent: "ai",
name: "Swarm Intelligence"
},
{
id: "aco",
parent: "swarm",
name: "Ant Colony Optimization",
value: 1
},
{
id: "pso",
parent: "swarm",
name: "Particle Swarm Optimization",
value: 1
},
// Knowledge Representation and Reasoning
{
id: "krr",
parent: "ai",
name: "Knowledge Representation and Reasoning"
},
{
id: "ontologies",
parent: "krr",
name: "Ontologies",
value: 1
},
{
id: "logic",
parent: "krr",
name: "First-Order Logic",
value: 1
},
{
id: "semanticweb",
parent: "krr",
name: "Semantic Web",
value: 1
}
];
let chartData2 = [{
id: "ai",
parent: "",
name: "The Map Of Artificial Intelligence"
},
// Deep Learning
{
id: "dl",
parent: "ai",
name: "Deep Learning"
},
{
id: "ann",
parent: "dl",
name: "Artificial Neural Networks"
},
{
id: "cnn",
parent: "dl",
name: "Convolutional Neural Networks (CNNs)"
},
{
id: "rnn",
parent: "dl",
name: "Recurrent Neural Networks (RNNs)"
},
{
id: "gan",
parent: "dl",
name: "Generative Adversarial Networks (GANs)"
},
{
id: "transformers",
parent: "dl",
name: "Transformer Networks"
},
{
id: "llm",
parent: "dl",
name: "Large Language Models"
},
{
id: "chatgpt",
parent: "llm",
name: "ChatGPT is here!",
value: 1
},
// Natural Language Processing
{
id: "nlp",
parent: "ai",
name: "Natural Language Processing (NLP)"
},
{
id: "textclass",
parent: "nlp",
name: "Text Classification",
value: 1
},
{
id: "ner",
parent: "nlp",
name: "Named Entity Recognition (NER)",
value: 1
},
{
id: "sentiment",
parent: "nlp",
name: "Sentiment Analysis",
value: 1
},
{
id: "translation",
parent: "nlp",
name: "Language Translation",
value: 1
},
{
id: "qa",
parent: "nlp",
name: "Question-Answering Systems",
value: 1
},
{
id: "textgen",
parent: "nlp",
name: "Text Generation",
value: 1
},
// Computer Vision
{
id: "cv",
parent: "ai",
name: "Computer Vision"
},
{
id: "imgrec",
parent: "cv",
name: "Image Recognition",
value: 1
},
{
id: "objdet",
parent: "cv",
name: "Object Detection",
value: 1
},
{
id: "seg",
parent: "cv",
name: "Image Segmentation",
value: 1
},
{
id: "caption",
parent: "cv",
name: "Image Captioning",
value: 1
},
{
id: "facial",
parent: "cv",
name: "Facial Recognition",
value: 1
},
// Machine Learning
{
id: "ml",
parent: "ai",
name: "Machine Learning"
},
{
id: "supervised",
parent: "ml",
name: "Supervised Learning",
value: 1
},
{
id: "unsupervised",
parent: "ml",
name: "Unsupervised Learning",
value: 1
},
{
id: "reinforcement",
parent: "ml",
name: "Reinforcement Learning",
value: 1
},
{
id: "semi",
parent: "ml",
name: "Semi-Supervised Learning",
value: 1
},
{
id: "transfer",
parent: "ml",
name: "Transfer Learning",
value: 1
},
{
id: "ensemble",
parent: "ml",
name: "Ensemble Learning",
value: 1
},
// Robotics
{
id: "robotics",
parent: "ai",
name: "Robotics"
},
{
id: "autonomousrobots",
parent: "robotics",
name: "Autonomous Robots",
value: 1
},
{
id: "rpa",
parent: "robotics",
name: "Robotic Process Automation (RPA)",
value: 1
},
{
id: "hri",
parent: "robotics",
name: "Human-Robot Interaction (HRI)",
value: 1
},
{
id: "rlrobotics",
parent: "robotics",
name: "Reinforcement Learning for Robotics",
value: 1
},
// Expert Systems
{
id: "expert",
parent: "ai",
name: "Expert Systems"
},
{
id: "kbs",
parent: "expert",
name: "Knowledge-Based Systems",
value: 1
},
{
id: "rules",
parent: "expert",
name: "Rule-Based Systems",
value: 1
},
{
id: "inference",
parent: "expert",
name: "Inference Engines",
value: 1
},
];
function createDataName(data) {
data.forEach(node => {
node['data-name'] = node.name;
if (node.parent === 'ai' && node.name.length > 18) {
if (node.name.length > 25) node.cls = 'offset-more'
};
});
};
createDataName(chartData1);
createDataName(chartData2);
let config = function(aspect, chartData) {
let chartConfig = {
type: 'tree',
plotarea: {
margin: aspect === 'left' ? '10 0 10 120' : '10 10 50 0',
},
options: {
aspect: `tree-${aspect}`,
link: {
aspect: 'arc',
lineWidth: 2,
},
node: {
size: 0,
label: {
color: '#fff',
align: 'center',
borderRadius: 5,
padding: 5,
},
tooltip: {
visible: false,
}
},
'node[level-1]': {
label: {
align: 'center',
fontSize: 14,
width: 200,
wrapText: true,
offsetX: aspect === 'left' ? -10 : 40,
},
},
'node[level-2]': {
label: {
alpha: 0.85,
fontSize: 10,
width: '100%'
},
},
'node[level-3]': {
label: {
fontSize: 10,
fontWeight: 'bold',
width: '100%',
},
},
'node[parent-speech]': {
label: {
backgroundColor: '#007fa3',
},
},
'link[parent-speech]': {
lineColor: '#007fa3',
},
'node[parent-agents]': {
label: {
backgroundColor: '#a62b02',
},
},
'link[parent-agents]': {
lineColor: '#a62b02',
},
'node[parent-av]': {
label: {
backgroundColor: '#b79007',
},
},
'link[parent-av]': {
lineColor: '#b79007',
},
'node[parent-recsys]': {
label: {
backgroundColor: '#563d02',
},
},
'link[parent-recsys]': {
lineColor: '#563d02',
},
'node[parent-gameai]': {
label: {
backgroundColor: '#0b32a0',
},
},
'link[parent-gameai]': {
lineColor: '#0b32a0',
},
'node[parent-kg]': {
label: {
backgroundColor: '#a7da47',
},
},
'link[parent-kg]': {
lineColor: '#a7da47',
},
'node[parent-cognitive]': {
label: {
backgroundColor: '#00b0e1',
},
},
'link[parent-cognitive]': {
lineColor: '#00b0e1',
},
'node[parent-swarm]': {
label: {
backgroundColor: '#ef4810',
},
},
'link[parent-swarm]': {
lineColor: '#ef4810',
},
'node[parent-krr]': {
label: {
backgroundColor: '#f9c332',
},
},
'link[parent-krr]': {
lineColor: '#f9c332',
},
'node[parent-dl]': {
label: {
backgroundColor: '#84680a',
},
},
'link[parent-dl]': {
lineColor: '#84680a',
},
'node[parent-llm]': {
label: {
backgroundColor: '#84680a',
offsetX: -10,
},
},
'link[parent-llm]': {
lineColor: '#84680a',
},
'node[parent-nlp]': {
label: {
backgroundColor: '#4d62b1',
},
},
'link[parent-nlp]': {
lineColor: '#4d62b1',
},
'node[parent-cv]': {
label: {
backgroundColor: '#89b92e',
},
},
'link[parent-cv]': {
lineColor: '#89b92e',
},
'node[parent-ml]': {
label: {
backgroundColor: '#0392bb',
},
},
'link[parent-ml]': {
lineColor: '#0392bb',
},
'node[parent-robotics]': {
label: {
backgroundColor: '#cc3300',
},
},
'link[parent-robotics]': {
lineColor: '#cc3300',
},
'node[parent-expert]': {
label: {
backgroundColor: '#da9b04',
},
},
'link[parent-expert]': {
lineColor: '#da9b04',
},
'node[cls-offset-more]': {
label: {
offsetY: 28,
},
},
nodes: {
ai: {
visible: false,
label: {
visible: false,
}
},
llm: {
x: 520,
},
speech: {
label: {
backgroundColor: '#007fa3',
}
},
agents: {
label: {
backgroundColor: '#a62b02',
}
},
av: {
label: {
backgroundColor: '#b79007',
}
},
recsys: {
label: {
backgroundColor: '#563d02',
}
},
gameai: {
label: {
backgroundColor: '#0b32a0',
}
},
kg: {
label: {
backgroundColor: '#a7da47',
}
},
cognitive: {
label: {
backgroundColor: '#00b0e1',
}
},
swarm: {
label: {
backgroundColor: '#ef4810',
}
},
krr: {
label: {
backgroundColor: '#f9c332',
}
},
dl: {
label: {
backgroundColor: '#84680a'
}
},
nlp: {
label: {
backgroundColor: '#4d62b1',
offsetX: 245,
offsetY: 25,
}
},
cv: {
label: {
backgroundColor: '#89b92e'
}
},
ml: {
label: {
backgroundColor: '#0392bb'
}
},
robotics: {
label: {
backgroundColor: '#cc3300'
}
},
expert: {
label: {
backgroundColor: '#da9b04'
}
}
},
links: {
'ai_speech': {
lineColor: '#007fa3',
},
'ai_agents': {
lineColor: '#a62b02',
},
'ai_av': {
lineColor: '#b79007',
},
'ai_recsys': {
lineColor: '#563d02',
},
'ai_gameai': {
lineColor: '#0b32a0',
},
'ai_kg': {
lineColor: '#a7da47',
},
'ai_cognitive': {
lineColor: '#00b0e1',
},
'ai_swarm': {
lineColor: '#ef4810',
},
'ai_krr': {
lineColor: '#f9c332',
},
'ai_dl': {
lineColor: '#84680a'
},
'ai_nlp': {
lineColor: '#4d62b1',
},
'ai_cv': {
lineColor: '#89b92e'
},
'ai_ml': {
lineColor: '#0392bb'
},
'ai_robotics': {
lineColor: '#cc3300'
},
'ai_expert': {
lineColor: '#da9b04'
},
},
},
series: chartData,
};
if (aspect === 'right') {
chartConfig.labels = [{
text: 'Remix of',
fontSize: 14,
url: 'https://newsletter.techworld-with-milan.com/p/chatgpt-is-not-ai',
target: '_blank',
textAlign: 'left',
offsetX: -150,
offsetY: -25,
width: 200,
x: '100%',
y: '100%',
}];
chartConfig.images = [{
src: 'https://app.zingsoft.com/api/file/KBDEPAN0/kjOW5ZJiQ4CsdBQNk3j6_Screenshot%202026-04-08%20at%209.35.06%E2%80%AFAM.png',
offsetX: -80,
offsetY: -45,
x: '100%',
y: '100%',
backgroundScale: 0.35
}];
};
return chartConfig;
};
zingchart.render({
id: 'myChart',
data: config('left', chartData1),
height: '100%',
width: '100%',
});
zingchart.render({
id: 'myChart2',
data: config('right', chartData2),
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
let chartData1 = [
{ id: "ai", parent: "", name: "The Map Of Artificial Intelligence" },
// Speech Recognition
{ id: "speech", parent: "ai", name: "Speech Recognition" },
{ id: "asr", parent: "speech", name: "Automatic Speech Recognition (ASR)", value: 1 },
{ id: "stt", parent: "speech", name: "Speech-to-Text Conversion", value: 1 },
{ id: "tts", parent: "speech", name: "Speech Synthesis (Text-to-Speech)", value: 1 },
// Virtual Agents and Chatbots
{ id: "agents", parent: "ai", name: "Virtual Agents and Chatbots" },
{ id: "convagents", parent: "agents", name: "Conversational Agents", value: 1 },
{ id: "dialog", parent: "agents", name: "Dialogue Systems", value: 1 },
{ id: "chatbots", parent: "agents", name: "Chatbot Development", value: 1 },
// Autonomous Vehicles
{ id: "av", parent: "ai", name: "Autonomous Vehicles" },
{ id: "selfdriving", parent: "av", name: "Self-Driving Cars", value: 1 },
{ id: "adas", parent: "av", name: "Advanced Driver Assistance Systems (ADAS)", value: 1 },
{ id: "cvav", parent: "av", name: "Computer Vision for Autonomous Vehicles", value: 1 },
// Recommender Systems
{ id: "recsys", parent: "ai", name: "Recommender Systems" },
{ id: "collab", parent: "recsys", name: "Collaborative Filtering", value: 1 },
{ id: "content", parent: "recsys", name: "Content-Based Filtering", value: 1 },
{ id: "hybrid", parent: "recsys", name: "Hybrid Approaches", value: 1 },
// Game Playing AI
{ id: "gameai", parent: "ai", name: "Game Playing AI" },
{ id: "chess", parent: "gameai", name: "Chess AI", value: 1 },
{ id: "go", parent: "gameai", name: "Go AI", value: 1 },
{ id: "video", parent: "gameai", name: "Video Game AI", value: 1 },
// Knowledge Graphs
{ id: "kg", parent: "ai", name: "Knowledge Graphs" },
{ id: "graphai", parent: "kg", name: "Graph-Based AI", value: 1 },
{ id: "semantic", parent: "kg", name: "Semantic Graphs", value: 1 },
// Cognitive Computing
{ id: "cognitive", parent: "ai", name: "Cognitive Computing" },
{ id: "emotionai", parent: "cognitive", name: "Emotion AI", value: 1 },
{ id: "context", parent: "cognitive", name: "Context-Aware AI", value: 1 },
// Swarm Intelligence
{ id: "swarm", parent: "ai", name: "Swarm Intelligence" },
{ id: "aco", parent: "swarm", name: "Ant Colony Optimization", value: 1 },
{ id: "pso", parent: "swarm", name: "Particle Swarm Optimization", value: 1 },
// Knowledge Representation and Reasoning
{ id: "krr", parent: "ai", name: "Knowledge Representation and Reasoning" },
{ id: "ontologies", parent: "krr", name: "Ontologies", value: 1 },
{ id: "logic", parent: "krr", name: "First-Order Logic", value: 1 },
{ id: "semanticweb", parent: "krr", name: "Semantic Web", value: 1 }
];
let chartData2 = [
{ id: "ai", parent: "", name: "The Map Of Artificial Intelligence" },
// Deep Learning
{ id: "dl", parent: "ai", name: "Deep Learning" },
{ id: "ann", parent: "dl", name: "Artificial Neural Networks" },
{ id: "cnn", parent: "dl", name: "Convolutional Neural Networks (CNNs)" },
{ id: "rnn", parent: "dl", name: "Recurrent Neural Networks (RNNs)" },
{ id: "gan", parent: "dl", name: "Generative Adversarial Networks (GANs)" },
{ id: "transformers", parent: "dl", name: "Transformer Networks" },
{ id: "llm", parent: "dl", name: "Large Language Models" },
{ id: "chatgpt", parent: "llm", name: "ChatGPT is here!", value: 1 },
// Natural Language Processing
{ id: "nlp", parent: "ai", name: "Natural Language Processing (NLP)" },
{ id: "textclass", parent: "nlp", name: "Text Classification", value: 1 },
{ id: "ner", parent: "nlp", name: "Named Entity Recognition (NER)", value: 1 },
{ id: "sentiment", parent: "nlp", name: "Sentiment Analysis", value: 1 },
{ id: "translation", parent: "nlp", name: "Language Translation", value: 1 },
{ id: "qa", parent: "nlp", name: "Question-Answering Systems", value: 1 },
{ id: "textgen", parent: "nlp", name: "Text Generation", value: 1 },
// Computer Vision
{ id: "cv", parent: "ai", name: "Computer Vision" },
{ id: "imgrec", parent: "cv", name: "Image Recognition", value: 1 },
{ id: "objdet", parent: "cv", name: "Object Detection", value: 1 },
{ id: "seg", parent: "cv", name: "Image Segmentation", value: 1 },
{ id: "caption", parent: "cv", name: "Image Captioning", value: 1 },
{ id: "facial", parent: "cv", name: "Facial Recognition", value: 1 },
// Machine Learning
{ id: "ml", parent: "ai", name: "Machine Learning" },
{ id: "supervised", parent: "ml", name: "Supervised Learning", value: 1 },
{ id: "unsupervised", parent: "ml", name: "Unsupervised Learning", value: 1 },
{ id: "reinforcement", parent: "ml", name: "Reinforcement Learning", value: 1 },
{ id: "semi", parent: "ml", name: "Semi-Supervised Learning", value: 1 },
{ id: "transfer", parent: "ml", name: "Transfer Learning", value: 1 },
{ id: "ensemble", parent: "ml", name: "Ensemble Learning", value: 1 },
// Robotics
{ id: "robotics", parent: "ai", name: "Robotics" },
{ id: "autonomousrobots", parent: "robotics", name: "Autonomous Robots", value: 1 },
{ id: "rpa", parent: "robotics", name: "Robotic Process Automation (RPA)", value: 1 },
{ id: "hri", parent: "robotics", name: "Human-Robot Interaction (HRI)", value: 1 },
{ id: "rlrobotics", parent: "robotics", name: "Reinforcement Learning for Robotics", value: 1 },
// Expert Systems
{ id: "expert", parent: "ai", name: "Expert Systems" },
{ id: "kbs", parent: "expert", name: "Knowledge-Based Systems", value: 1 },
{ id: "rules", parent: "expert", name: "Rule-Based Systems", value: 1 },
{ id: "inference", parent: "expert", name: "Inference Engines", value: 1 },
];
function createDataName(data) {
data.forEach(node => {
node['data-name'] = node.name;
if (node.parent === 'ai' && node.name.length > 18) {
if (node.name.length > 25) node.cls = 'offset-more'
};
});
};
createDataName(chartData1);
createDataName(chartData2);
let config = function (aspect, chartData) {
let chartConfig = {
type: 'tree',
plotarea: {
margin: aspect === 'left' ? '10 0 10 120' : '10 10 50 0',
},
options: {
aspect: `tree-${aspect}`,
link: {
aspect: 'arc',
lineWidth: 2,
},
node: {
size: 0,
label: {
color: '#fff',
align: 'center',
borderRadius: 5,
padding: 5,
},
tooltip: {
visible: false,
}
},
'node[level-1]': {
label: {
align: 'center',
fontSize: 14,
width: 200,
wrapText: true,
offsetX: aspect === 'left' ? -10 : 40,
},
},
'node[level-2]': {
label: {
alpha: 0.85,
fontSize: 10,
width: '100%'
},
},
'node[level-3]': {
label: {
fontSize: 10,
fontWeight: 'bold',
width: '100%',
},
},
'node[parent-speech]': {
label: {
backgroundColor: '#007fa3',
},
},
'link[parent-speech]': {
lineColor: '#007fa3',
},
'node[parent-agents]': {
label: {
backgroundColor: '#a62b02',
},
},
'link[parent-agents]': {
lineColor: '#a62b02',
},
'node[parent-av]': {
label: {
backgroundColor: '#b79007',
},
},
'link[parent-av]': {
lineColor: '#b79007',
},
'node[parent-recsys]': {
label: {
backgroundColor: '#563d02',
},
},
'link[parent-recsys]': {
lineColor: '#563d02',
},
'node[parent-gameai]': {
label: {
backgroundColor: '#0b32a0',
},
},
'link[parent-gameai]': {
lineColor: '#0b32a0',
},
'node[parent-kg]': {
label: {
backgroundColor: '#a7da47',
},
},
'link[parent-kg]': {
lineColor: '#a7da47',
},
'node[parent-cognitive]': {
label: {
backgroundColor: '#00b0e1',
},
},
'link[parent-cognitive]': {
lineColor: '#00b0e1',
},
'node[parent-swarm]': {
label: {
backgroundColor: '#ef4810',
},
},
'link[parent-swarm]': {
lineColor: '#ef4810',
},
'node[parent-krr]': {
label: {
backgroundColor: '#f9c332',
},
},
'link[parent-krr]': {
lineColor: '#f9c332',
},
'node[parent-dl]': {
label: {
backgroundColor: '#84680a',
},
},
'link[parent-dl]': {
lineColor: '#84680a',
},
'node[parent-llm]': {
label: {
backgroundColor: '#84680a',
offsetX: -10,
},
},
'link[parent-llm]': {
lineColor: '#84680a',
},
'node[parent-nlp]': {
label: {
backgroundColor: '#4d62b1',
},
},
'link[parent-nlp]': {
lineColor: '#4d62b1',
},
'node[parent-cv]': {
label: {
backgroundColor: '#89b92e',
},
},
'link[parent-cv]': {
lineColor: '#89b92e',
},
'node[parent-ml]': {
label: {
backgroundColor: '#0392bb',
},
},
'link[parent-ml]': {
lineColor: '#0392bb',
},
'node[parent-robotics]': {
label: {
backgroundColor: '#cc3300',
},
},
'link[parent-robotics]': {
lineColor: '#cc3300',
},
'node[parent-expert]': {
label: {
backgroundColor: '#da9b04',
},
},
'link[parent-expert]': {
lineColor: '#da9b04',
},
'node[cls-offset-more]': {
label: {
offsetY: 28,
},
},
nodes: {
ai: {
visible: false,
label: {
visible: false,
}
},
llm: {
x: 520,
},
speech: {
label: {
backgroundColor: '#007fa3',
}
},
agents: {
label: {
backgroundColor: '#a62b02',
}
},
av: {
label: {
backgroundColor: '#b79007',
}
},
recsys: {
label: {
backgroundColor: '#563d02',
}
},
gameai: {
label: {
backgroundColor: '#0b32a0',
}
},
kg: {
label: {
backgroundColor: '#a7da47',
}
},
cognitive: {
label: {
backgroundColor: '#00b0e1',
}
},
swarm: {
label: {
backgroundColor: '#ef4810',
}
},
krr: {
label: {
backgroundColor: '#f9c332',
}
},
dl: {
label: {
backgroundColor: '#84680a'
}
},
nlp: {
label: {
backgroundColor: '#4d62b1',
offsetX: 245,
offsetY: 25,
}
},
cv: {
label: {
backgroundColor: '#89b92e'
}
},
ml: {
label: {
backgroundColor: '#0392bb'
}
},
robotics: {
label: {
backgroundColor: '#cc3300'
}
},
expert: {
label: {
backgroundColor: '#da9b04'
}
}
},
links: {
'ai_speech': {
lineColor: '#007fa3',
},
'ai_agents': {
lineColor: '#a62b02',
},
'ai_av': {
lineColor: '#b79007',
},
'ai_recsys': {
lineColor: '#563d02',
},
'ai_gameai': {
lineColor: '#0b32a0',
},
'ai_kg': {
lineColor: '#a7da47',
},
'ai_cognitive': {
lineColor: '#00b0e1',
},
'ai_swarm': {
lineColor: '#ef4810',
},
'ai_krr': {
lineColor: '#f9c332',
},
'ai_dl': {
lineColor: '#84680a'
},
'ai_nlp': {
lineColor: '#4d62b1',
},
'ai_cv': {
lineColor: '#89b92e'
},
'ai_ml': {
lineColor: '#0392bb'
},
'ai_robotics': {
lineColor: '#cc3300'
},
'ai_expert': {
lineColor: '#da9b04'
},
},
},
series: chartData,
};
if (aspect === 'right') {
chartConfig.labels = [
{
text: 'Remix of',
fontSize: 14,
url: 'https://newsletter.techworld-with-milan.com/p/chatgpt-is-not-ai',
target: '_blank',
textAlign: 'left',
offsetX: -150,
offsetY: -25,
width: 200,
x: '100%',
y: '100%',
}
];
chartConfig.images = [{
src: 'https://app.zingsoft.com/api/file/KBDEPAN0/kjOW5ZJiQ4CsdBQNk3j6_Screenshot%202026-04-08%20at%209.35.06%E2%80%AFAM.png',
offsetX: -80,
offsetY: -45,
x: '100%',
y: '100%',
backgroundScale: 0.35
}];
};
return chartConfig;
};
zingchart.render({
id: 'myChart',
data: config('left', chartData1),
height: '100%',
width: '100%',
});
zingchart.render({
id: 'myChart2',
data: config('right', chartData2),
height: '100%',
width: '100%',
});
});
