Visualization Libraries Showcase
| Type |
Library |
Description |
Use Cases |
Demo |
`
},
{
type: "Charts & Graphs",
name: "D3.js",
url: "https://d3js.org/d3.v7.min.js",
description: "Low-level control of SVG/DOM; powerful data binding",
useCases: "Custom graphing, network diagrams",
demo: `
`
},
{
type: "Animations",
name: "Animate.css",
url: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
description: "CSS animations triggered via class names",
useCases: "Revealing charts, hover effects",
demo: `Bounce!
`
},
{
type: "Physics-Based",
name: "Matter.js",
url: "https://cdn.jsdelivr.net/npm/matter-js",
description: "2D rigid body physics engine (JS-driven)",
useCases: "Physics simulations, educational visualizations",
demo: `
`
}
];
const tableBody = document.getElementById('lib-table');
libraries.forEach((lib, i) => {
const tr = document.createElement('tr');
tr.innerHTML = `
${lib.type} |
${lib.name} |
${lib.description} |
${lib.useCases} |
|
`;
tableBody.appendChild(tr);
});
function openDemo(index) {
const lib = libraries[index];
const modal = document.getElementById("demo-modal");
const content = document.getElementById("modal-content");
const title = document.getElementById("modal-title");
title.textContent = `${lib.name} Demo`;
// Clear & inject
content.innerHTML = '';
const style = lib.url.endsWith('.css')
? ``
: ``;
content.innerHTML = style + lib.demo;
modal.classList.add("active");
}
document.getElementById("close-modal").addEventListener("click", () => {
document.getElementById("demo-modal").classList.remove("active");
});