Structures:
A. Gantt Chart
[ { "id": "1", "name": "Project Kickoff", "start": "2025-08-01", "end": "2025-08-05", "progress": 100 }, { "id": "2", "name": "Development", "start": "2025-08-06", "end": "2025-08-20", "progress": 45 }]
[
{
"id": "1",
"name": "Project Kickoff",
"start": "2025-08-01",
"end": "2025-08-05",
"progress": 100
},
"id": "2",
"name": "Development",
"start": "2025-08-06",
"end": "2025-08-20",
"progress": 45
}
]
B. Sankey Diagram
[ { "from": "Oil", "to": "Transport", "value": 10 }, { "from": "Oil", "to": "Industry", "value": 5 }, { "from": "Coal", "to": "Industry", "value": 15 }, { "from": "Renewables", "to": "Electricity", "value": 12 }]
"from": "Oil",
"to": "Transport",
"value": 10
"to": "Industry",
"value": 5
"from": "Coal",
"value": 15
"from": "Renewables",
"to": "Electricity",
"value": 12
C. Chord Diagram
{ "labels": [ "A", "B", "C", "D" ], "matrix": [ [ 0, 2, 3, 4 ], [ 2, 0, 5, 0 ], [ 3, 5, 0, 1 ], [ 4, 0, 1, 0 ] ]}
"labels": [
"A",
"B",
"C",
"D"
],
"matrix": [
0,
2,
3,
4
5,
0
1
4,
1,
D. Heatmap
[ { "x": "Mon", "y": "Morning", "value": 12 }, { "x": "Mon", "y": "Afternoon", "value": 20 }, { "x": "Mon", "y": "Evening", "value": 8 }, { "x": "Tue", "y": "Morning", "value": 15 }, { "x": "Tue", "y": "Afternoon", "value": 25 }, { "x": "Tue", "y": "Evening", "value": 10 }]
"x": "Mon",
"y": "Morning",
"y": "Afternoon",
"value": 20
"y": "Evening",
"value": 8
"x": "Tue",
"value": 25
E. Force-Directed Graph
{ "nodes": [ { "name": "Node1", "value": 10 }, { "name": "Node2", "value": 20 } ], "links": [ { "source": "Node1", "target": "Node2" } ]}
"nodes": [
"name": "Node1",
"name": "Node2",
"links": [
"source": "Node1",
"target": "Node2"
F. Sunburst Chart
{ "name": "Root", "children": [ { "name": "Category A", "children": [ { "name": "Sub A1", "value": 10 }, { "name": "Sub A2", "value": 20 } ] }, { "name": "Category B", "children": [ { "name": "Sub B1", "value": 15 } ] } ]}
"name": "Root",
"children": [
"name": "Category A",
"name": "Sub A1",
"name": "Sub A2",
"name": "Category B",
"name": "Sub B1",
G. Treemap / Circle Packing
[ { "name": "Category A", "value": 10 }, { "name": "Category B", "value": 20, "children": [ { "name": "Sub B1", "value": 8 }, { "name": "Sub B2", "value": 12 } ] }]
"value": 20,
"name": "Sub B2",