{"id":488,"date":"2025-05-30T10:58:37","date_gmt":"2025-05-30T14:58:37","guid":{"rendered":"https:\/\/www.yorku.ca\/professor\/waw\/?page_id=488"},"modified":"2025-06-27T13:52:38","modified_gmt":"2025-06-27T17:52:38","slug":"disease-informed-modelling-methods-and-systems-dimms-lab","status":"publish","type":"page","link":"https:\/\/www.yorku.ca\/professor\/waw\/disease-informed-modelling-methods-and-systems-dimms-lab\/","title":{"rendered":"Disease-Informed Modelling, Methods, and Systems (DIMMS) Lab"},"content":{"rendered":"\n\n\n\n \n \n DIMMS Lab - Disease-Informed Modelling, Methods, and Systems<\/title>\n <style>\n \/* Reset and Base Styles *\/\n .dimms-animation-container * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .dimms-animation-container {\n width: 100%;\n max-width: 1200px;\n height: 700px;\n margin: 0 auto;\n background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);\n overflow: hidden;\n position: relative;\n font-family: Arial, sans-serif;\n cursor: default;\n }\n\n \/* Scene Control *\/\n .scene {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n visibility: hidden;\n transition: opacity 1s ease-in-out;\n }\n\n .scene.active {\n opacity: 1;\n visibility: visible;\n }\n\n \/* Scene 1: Opening Logo Formation *\/\n .logo-formation {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n }\n\n .math-symbols {\n position: absolute;\n font-size: 24px;\n color: #8B0000;\n opacity: 0;\n animation: symbolFloat 3s ease-out forwards;\n }\n\n @keyframes symbolFloat {\n 0% {\n transform: translate(var(--startX), var(--startY)) rotate(0deg);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translate(0, 0) rotate(360deg);\n opacity: 0;\n }\n }\n\n .dimms-main-logo {\n font-size: 80px;\n font-weight: bold;\n color: #8B0000;\n letter-spacing: 15px;\n opacity: 0;\n animation: logoReveal 2s ease-out 2s forwards;\n text-shadow: 0 0 30px rgba(139, 0, 0, 0.5);\n }\n\n @keyframes logoReveal {\n 0% {\n opacity: 0;\n letter-spacing: 50px;\n filter: blur(10px);\n }\n 100% {\n opacity: 1;\n letter-spacing: 15px;\n filter: blur(0);\n }\n }\n\n .lab-full-name {\n font-size: 18px;\n color: #fff;\n text-align: center;\n margin-top: 20px;\n opacity: 0;\n animation: fadeInUp 1s ease-out 3s forwards;\n }\n\n .tagline {\n font-size: 16px;\n color: #00b4d8;\n text-align: center;\n margin-top: 10px;\n opacity: 0;\n animation: fadeInUp 1s ease-out 3.5s forwards;\n font-style: italic;\n }\n\n @keyframes fadeInUp {\n 0% {\n opacity: 0;\n transform: translateY(20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n \/* Scene 2: Research Areas *\/\n .research-showcase {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: repeat(2, 1fr);\n gap: 30px;\n padding: 40px;\n height: 100%;\n }\n\n .research-card {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(139, 0, 0, 0.3);\n border-radius: 15px;\n padding: 25px;\n opacity: 0;\n transform: translateY(50px);\n animation: cardReveal 0.8s ease-out forwards;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .research-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(139, 0, 0, 0.3);\n border-color: rgba(139, 0, 0, 0.6);\n }\n\n .research-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, transparent, rgba(139, 0, 0, 0.1), transparent);\n transform: translateX(-100%);\n transition: transform 0.6s;\n }\n\n .research-card:hover::before {\n transform: translateX(100%);\n }\n\n .research-card:nth-child(1) { animation-delay: 0.2s; }\n .research-card:nth-child(2) { animation-delay: 0.4s; }\n .research-card:nth-child(3) { animation-delay: 0.6s; }\n .research-card:nth-child(4) { animation-delay: 0.8s; }\n .research-card:nth-child(5) { animation-delay: 1s; }\n .research-card:nth-child(6) { animation-delay: 1.2s; }\n\n @keyframes cardReveal {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .research-icon {\n font-size: 48px;\n margin-bottom: 15px;\n animation: iconPulse 2s ease-in-out infinite;\n }\n\n @keyframes iconPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .research-title {\n font-size: 20px;\n color: #fff;\n margin-bottom: 10px;\n font-weight: bold;\n }\n\n .research-desc {\n font-size: 14px;\n color: #b0b0b0;\n line-height: 1.4;\n }\n\n \/* Visual Elements for Research Cards *\/\n .math-bio-visual {\n position: absolute;\n top: 10px;\n right: 10px;\n font-size: 20px;\n color: rgba(139, 0, 0, 0.3);\n animation: rotate 10s linear infinite;\n }\n\n @keyframes rotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n \/* Scene 3: Team Composition *\/\n .team-showcase {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n }\n\n .team-title {\n font-size: 36px;\n color: #fff;\n margin-bottom: 30px;\n opacity: 0;\n animation: fadeIn 1s ease-out forwards;\n }\n\n .team-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n width: 100%;\n max-width: 1000px;\n }\n\n .team-member {\n text-align: center;\n opacity: 0;\n transform: scale(0.8);\n animation: memberAppear 0.5s ease-out forwards;\n }\n\n .team-member:nth-child(1) { animation-delay: 0.1s; }\n .team-member:nth-child(2) { animation-delay: 0.2s; }\n .team-member:nth-child(3) { animation-delay: 0.3s; }\n .team-member:nth-child(4) { animation-delay: 0.4s; }\n .team-member:nth-child(5) { animation-delay: 0.5s; }\n .team-member:nth-child(6) { animation-delay: 0.6s; }\n .team-member:nth-child(7) { animation-delay: 0.7s; }\n .team-member:nth-child(8) { animation-delay: 0.8s; }\n\n @keyframes memberAppear {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n .member-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #8B0000, #00b4d8);\n border-radius: 50%;\n margin: 0 auto 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n color: white;\n }\n\n .member-name {\n font-size: 14px;\n color: #fff;\n margin-bottom: 5px;\n }\n\n .member-role {\n font-size: 12px;\n color: #b0b0b0;\n }\n\n \/* Scene 4: Impact & Applications *\/\n .impact-showcase {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n }\n\n .ontario-map {\n width: 400px;\n height: 300px;\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 300\"><path d=\"M50 150 Q150 50 250 150 T350 150\" stroke=\"%238B0000\" fill=\"none\" stroke-width=\"2\"\/><circle cx=\"200\" cy=\"150\" r=\"80\" fill=\"none\" stroke=\"%23fff\" stroke-width=\"1\" opacity=\"0.3\"\/><\/svg>') no-repeat center;\n background-size: contain;\n position: relative;\n margin-bottom: 30px;\n }\n\n .disease-point {\n position: absolute;\n width: 10px;\n height: 10px;\n background: #ff0000;\n border-radius: 50%;\n animation: pulse 2s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(2);\n opacity: 0.5;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }\n\n .impact-metrics {\n display: flex;\n gap: 40px;\n margin-top: 30px;\n }\n\n .metric {\n text-align: center;\n opacity: 0;\n animation: fadeIn 1s ease-out forwards;\n }\n\n .metric:nth-child(1) { animation-delay: 0.2s; }\n .metric:nth-child(2) { animation-delay: 0.4s; }\n .metric:nth-child(3) { animation-delay: 0.6s; }\n .metric:nth-child(4) { animation-delay: 0.8s; }\n\n .metric-number {\n font-size: 48px;\n color: #8B0000;\n font-weight: bold;\n animation: countUp 2s ease-out forwards;\n }\n\n .metric-label {\n font-size: 14px;\n color: #b0b0b0;\n margin-top: 5px;\n }\n\n \/* Scene 5: Final Integration *\/\n .integration-scene {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n\n .network-visualization {\n width: 600px;\n height: 400px;\n position: relative;\n }\n\n .network-node {\n position: absolute;\n width: 60px;\n height: 60px;\n background: rgba(139, 0, 0, 0.8);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 12px;\n font-weight: bold;\n opacity: 0;\n animation: nodeAppear 0.5s ease-out forwards;\n }\n\n .network-line {\n position: absolute;\n height: 1px;\n background: linear-gradient(to right, transparent, #8B0000, transparent);\n transform-origin: left center;\n opacity: 0;\n animation: lineAppear 1s ease-out forwards;\n }\n\n .final-message {\n font-size: 24px;\n color: #fff;\n text-align: center;\n margin-top: 40px;\n opacity: 0;\n animation: fadeIn 2s ease-out 2s forwards;\n }\n\n \/* Utility animations *\/\n @keyframes fadeIn {\n to {\n opacity: 1;\n }\n }\n\n @keyframes nodeAppear {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes lineAppear {\n to {\n opacity: 0.5;\n }\n }\n\n \/* Navigation dots *\/\n .nav-dots {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 10px;\n }\n\n .nav-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n cursor: pointer;\n transition: background 0.3s;\n }\n\n .nav-dot.active {\n background: #8B0000;\n }\n\n \/* Responsive adjustments *\/\n @media (max-width: 768px) {\n .dimms-animation-container {\n height: 500px;\n }\n \n .research-showcase {\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: repeat(3, 1fr);\n gap: 15px;\n padding: 20px;\n }\n \n .team-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .dimms-main-logo {\n font-size: 50px;\n }\n }\n <\/style>\n<\/head>\n<Body><h1><a href="/">¿ì²¥ÊÓƵ</a></h1><script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(bp, s);
})();
</script>\n <div class=\"dimms-animation-container\">\n <!-- Scene 1: Opening Logo Formation -->\n <div class=\"scene logo-formation active\" id=\"scene1\">\n <!-- Mathematical symbols floating in -->\n <span class=\"math-symbols\" style=\"--startX: -200px; --startY: -100px;\">\u2202<\/span>\n <span class=\"math-symbols\" style=\"--startX: 200px; --startY: -150px; animation-delay: 0.2s;\">\u2207<\/span>\n <span class=\"math-symbols\" style=\"--startX: -150px; --startY: 100px; animation-delay: 0.4s;\">\u03b2<\/span>\n <span class=\"math-symbols\" style=\"--startX: 180px; --startY: 120px; animation-delay: 0.6s;\">\u03bb<\/span>\n <span class=\"math-symbols\" style=\"--startX: 0px; --startY: -180px; animation-delay: 0.8s;\">\u03a3<\/span>\n \n <div>\n <h1 class=\"dimms-main-logo\">DIMMS<\/h1>\n <p class=\"lab-full-name\">Disease-Informed Modelling, Methods, and Systems Lab<\/p>\n <p class=\"tagline\">\"Bridging mathematical modeling with real-world disease solutions\"<\/p>\n <\/div>\n <\/div>\n\n <!-- Scene 2: Research Areas Showcase -->\n <div class=\"scene research-showcase\" id=\"scene2\">\n <div class=\"research-card\">\n <div class=\"math-bio-visual\">\u222b\u2202<\/div>\n <div class=\"research-icon\">\ud83e\uddec<\/div>\n <h3 class=\"research-title\">Mathematical Biology<\/h3>\n <p class=\"research-desc\">Population dynamics, SIR models, and differential equations transforming into biological networks<\/p>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\ud83e\udd16<\/div>\n <h3 class=\"research-title\">Machine Learning & AI<\/h3>\n <p class=\"research-desc\">Disease-informed neural networks and deep learning for pattern recognition<\/p>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\ud83d\udcca<\/div>\n <h3 class=\"research-title\">Statistical Methods<\/h3>\n <p class=\"research-desc\">MCMC methods, time series analysis, and Bayesian networks<\/p>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\u23f1\ufe0f<\/div>\n <h3 class=\"research-title\">Multi-timescale Analysis<\/h3>\n <p class=\"research-desc\">From molecular nanoseconds to population-level years<\/p>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\ud83d\uddfa\ufe0f<\/div>\n <h3 class=\"research-title\">Spatial Epidemiology<\/h3>\n <p class=\"research-desc\">Disease spread across regions with socioeconomic factors<\/p>\n <\/div>\n \n <div class=\"research-card\">\n <div class=\"research-icon\">\ud83d\udee1\ufe0f<\/div>\n <h3 class=\"research-title\">Immunity Modeling<\/h3>\n <p class=\"research-desc\">Immune response dynamics and vaccination strategies<\/p>\n <\/div>\n <\/div>\n\n <!-- Scene 3: Team Composition -->\n <div class=\"scene team-showcase\" id=\"scene3\">\n <h2 class=\"team-title\">Our Diverse Research Team<\/h2>\n <div class=\"team-grid\">\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/div>\n <p class=\"member-name\">Prof. A. Woldegerima<\/p>\n <p class=\"member-role\">Lab Director<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83d\udd2c<\/div>\n <p class=\"member-name\">Dr. Q. Deng<\/p>\n <p class=\"member-role\">Postdoc<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83d\udd2c<\/div>\n <p class=\"member-name\">Dr. A. Omame<\/p>\n <p class=\"member-role\">Postdoc<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc69\u200d\ud83c\udf93<\/div>\n <p class=\"member-name\">F. Al Hashimi<\/p>\n <p class=\"member-role\">PhD Candidate<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc69\u200d\ud83c\udf93<\/div>\n <p class=\"member-name\">A. Alam Din<\/p>\n <p class=\"member-role\">PhD Student<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83c\udf93<\/div>\n <p class=\"member-name\">T. Dao<\/p>\n <p class=\"member-role\">MA Student<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83c\udf93<\/div>\n <p class=\"member-name\">Joe<\/p>\n <p class=\"member-role\">MA Student<\/p>\n <\/div>\n <div class=\"team-member\">\n <div class=\"member-icon\">\ud83d\udc68\u200d\ud83c\udf93<\/div>\n <p class=\"member-name\">M. Pundir<\/p>\n <p class=\"member-role\">Undergrad<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Scene 4: Impact & Applications -->\n <div class=\"scene impact-showcase\" id=\"scene4\">\n <h2 class=\"team-title\">Real-World Impact<\/h2>\n <div class=\"ontario-map\">\n <div class=\"disease-point\" style=\"top: 40%; left: 30%;\"><\/div>\n <div class=\"disease-point\" style=\"top: 60%; left: 50%; animation-delay: 0.5s;\"><\/div>\n <div class=\"disease-point\" style=\"top: 45%; left: 70%; animation-delay: 1s;\"><\/div>\n <\/div>\n <div class=\"impact-metrics\">\n <div class=\"metric\">\n <div class=\"metric-number\">4<\/div>\n <div class=\"metric-label\">Disease Models<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-number\">7<\/div>\n <div class=\"metric-label\">Countries<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-number\">15+<\/div>\n <div class=\"metric-label\">Publications<\/div>\n <\/div>\n <div class=\"metric\">\n <div class=\"metric-number\">\u221e<\/div>\n <div class=\"metric-label\">Lives Impacted<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Scene 5: Final Integration -->\n <div class=\"scene integration-scene\" id=\"scene5\">\n <div class=\"network-visualization\">\n <!-- Central node -->\n <div class=\"network-node\" style=\"top: 50%; left: 50%; transform: translate(-50%, -50%);\">DIMMS<\/div>\n \n <!-- Surrounding nodes -->\n <div class=\"network-node\" style=\"top: 20%; left: 50%; transform: translateX(-50%); animation-delay: 0.2s;\">Math Bio<\/div>\n <div class=\"network-node\" style=\"top: 35%; left: 80%; animation-delay: 0.4s;\">ML\/AI<\/div>\n <div class=\"network-node\" style=\"top: 65%; left: 80%; animation-delay: 0.6s;\">Statistics<\/div>\n <div class=\"network-node\" style=\"top: 80%; left: 50%; transform: translateX(-50%); animation-delay: 0.8s;\">Multi-scale<\/div>\n <div class=\"network-node\" style=\"top: 65%; left: 20%; animation-delay: 1s;\">Spatial<\/div>\n <div class=\"network-node\" style=\"top: 35%; left: 20%; animation-delay: 1.2s;\">Immunity<\/div>\n \n <!-- Connecting lines -->\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); animation-delay: 1.4s;\"><\/div>\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); animation-delay: 1.6s;\"><\/div>\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(30deg); animation-delay: 1.8s;\"><\/div>\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); animation-delay: 2s;\"><\/div>\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(150deg); animation-delay: 2.2s;\"><\/div>\n <div class=\"network-line\" style=\"width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-150deg); animation-delay: 2.4s;\"><\/div>\n <\/div>\n <p class=\"final-message\">Advancing global health through mathematical innovation<\/p>\n <\/div>\n\n <!-- Navigation Dots -->\n <div class=\"nav-dots\">\n <div class=\"nav-dot active\" onclick=\"goToScene(1)\"><\/div>\n <div class=\"nav-dot\" onclick=\"goToScene(2)\"><\/div>\n <div class=\"nav-dot\" onclick=\"goToScene(3)\"><\/div>\n <div class=\"nav-dot\" onclick=\"goToScene(4)\"><\/div>\n <div class=\"nav-dot\" onclick=\"goToScene(5)\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Scene management\n let currentScene = 1;\n const totalScenes = 5;\n const sceneDuration = 8000; \/\/ 8 seconds per scene\n\n function goToScene(sceneNumber) {\n \/\/ Hide all scenes\n document.querySelectorAll('.scene').forEach(scene => {\n scene.classList.remove('active');\n });\n \n \/\/ Show selected scene\n document.getElementById('scene' + sceneNumber).classList.add('active');\n \n \/\/ Update navigation dots\n document.querySelectorAll('.nav-dot').forEach((dot, index) => {\n dot.classList.toggle('active', index === sceneNumber - 1);\n });\n \n currentScene = sceneNumber;\n }\n\n \/\/ Auto-advance scenes\n function autoAdvance() {\n const nextScene = currentScene >= totalScenes ? 1 : currentScene + 1;\n goToScene(nextScene);\n }\n\n \/\/ Start auto-advance\n let autoAdvanceInterval = setInterval(autoAdvance, sceneDuration);\n\n \/\/ Pause auto-advance on hover\n const container = document.querySelector('.dimms-animation-container');\n container.addEventListener('mouseenter', () => {\n clearInterval(autoAdvanceInterval);\n });\n\n container.addEventListener('mouseleave', () => {\n autoAdvanceInterval = setInterval(autoAdvance, sceneDuration);\n });\n\n \/\/ Add interactive hover effects\n document.querySelectorAll('.research-card').forEach(card => {\n card.addEventListener('mouseenter', function() {\n this.style.transform = 'translateY(-10px) scale(1.02)';\n });\n \n card.addEventListener('mouseleave', function() {\n this.style.transform = 'translateY(0) scale(1)';\n });\n });\n\n \/\/ Animate numbers in impact metrics\n function animateNumber(element, target) {\n let current = 0;\n const increment = target \/ 50;\n const timer = setInterval(() => {\n current += increment;\n if (current >= target) {\n element.textContent = target === Infinity ? '\u221e' : target + '+';\n clearInterval(timer);\n } else {\n element.textContent = Math.floor(current);\n }\n }, 40);\n }\n\n \/\/ Trigger number animation when scene 4 is active\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.target.id === 'scene4' && mutation.target.classList.contains('active')) {\n const numbers = document.querySelectorAll('.metric-number');\n animateNumber(numbers[0], 4);\n animateNumber(numbers[1], 7);\n animateNumber(numbers[2], 15);\n \/\/ Fourth one already shows \u221e\n }\n });\n });\n\n observer.observe(document.getElementById('scene4'), { attributes: true, attributeFilter: ['class'] });\n\n \/\/ Create floating particles effect\n function createParticle() {\n const particle = document.createElement('div');\n particle.style.position = 'absolute';\n particle.style.width = '3px';\n particle.style.height = '3px';\n particle.style.background = 'rgba(139, 0, 0, 0.3)';\n particle.style.borderRadius = '50%';\n particle.style.pointerEvents = 'none';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.top = '100%';\n \n container.appendChild(particle);\n \n const duration = 5000 + Math.random() * 5000;\n const startTime = Date.now();\n \n function animateParticle() {\n const elapsed = Date.now() - startTime;\n const progress = elapsed \/ duration;\n \n if (progress < 1) {\n particle.style.top = (100 - progress * 120) + '%';\n particle.style.opacity = 1 - progress;\n requestAnimationFrame(animateParticle);\n } else {\n particle.remove();\n }\n }\n \n animateParticle();\n }\n\n \/\/ Create particles periodically\n setInterval(createParticle, 300);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"dimms-logo-container\" style=\"text-align: center; margin: 20px 0;\">\n <svg viewBox=\"0 0 400 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"max-width: 100%; height: auto;\">\n <!-- Background -->\n <rect width=\"400\" height=\"200\" fill=\"#ffffff\"\/>\n \n <!-- Gradient definitions -->\n <defs>\n <linearGradient id=\"logoGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:#3498db;stop-opacity:1\" \/>\n <stop offset=\"50%\" style=\"stop-color:#9b59b6;stop-opacity:1\" \/>\n <stop offset=\"100%\" style=\"stop-color:#e74c3c;stop-opacity:1\" \/>\n <\/linearGradient>\n \n <linearGradient id=\"textGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:#2c3e50;stop-opacity:1\" \/>\n <stop offset=\"100%\" style=\"stop-color:#34495e;stop-opacity:1\" \/>\n <\/linearGradient>\n \n <!-- New bright gradient for DIMMS text -->\n <linearGradient id=\"brightTextGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" style=\"stop-color:#FFD700;stop-opacity:1\" \/>\n <stop offset=\"100%\" style=\"stop-color:#FFA500;stop-opacity:1\" \/>\n <\/linearGradient>\n \n <filter id=\"shadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feDropShadow dx=\"2\" dy=\"2\" stdDeviation=\"2\" flood-color=\"#000000\" flood-opacity=\"0.2\"\/>\n <\/filter>\n \n <!-- Text shadow for better visibility -->\n <filter id=\"textShadow\" x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n <feDropShadow dx=\"1\" dy=\"1\" stdDeviation=\"1\" flood-color=\"#000000\" flood-opacity=\"0.5\"\/>\n <\/filter>\n \n <pattern id=\"dataPattern\" patternUnits=\"userSpaceOnUse\" width=\"10\" height=\"10\">\n <circle cx=\"5\" cy=\"5\" r=\"1\" fill=\"#3498db\" opacity=\"0.3\"\/>\n <\/pattern>\n <\/defs>\n \n <!-- Main geometric shape - representing interconnected systems -->\n <g transform=\"translate(200, 100)\">\n <!-- Central hexagon -->\n <polygon points=\"-20,0 -10,-17 10,-17 20,0 10,17 -10,17\" fill=\"url(#logoGradient)\" filter=\"url(#shadow)\"\/>\n \n <!-- Surrounding triangular elements representing different research areas -->\n <!-- Top -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#e74c3c\" opacity=\"0.8\" transform=\"rotate(0)\"\/>\n <text x=\"0\" y=\"-40\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">D<\/text>\n \n <!-- Top Right -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#3498db\" opacity=\"0.8\" transform=\"rotate(60)\"\/>\n <text x=\"26\" y=\"-15\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">I<\/text>\n \n <!-- Bottom Right -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#2ecc71\" opacity=\"0.8\" transform=\"rotate(120)\"\/>\n <text x=\"26\" y=\"15\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">M<\/text>\n \n <!-- Bottom -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#f39c12\" opacity=\"0.8\" transform=\"rotate(180)\"\/>\n <text x=\"0\" y=\"40\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">M<\/text>\n \n <!-- Bottom Left -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#9b59b6\" opacity=\"0.8\" transform=\"rotate(240)\"\/>\n <text x=\"-26\" y=\"15\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">S<\/text>\n \n <!-- Top Left -->\n <polygon points=\"0,-30 -15,-50 15,-50\" fill=\"#e67e22\" opacity=\"0.8\" transform=\"rotate(300)\"\/>\n <text x=\"-26\" y=\"-15\" font-family=\"Arial, sans-serif\" font-size=\"8\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"white\">LAB<\/text>\n \n <!-- Central text with bright color and shadow -->\n <text x=\"0\" y=\"5\" font-family=\"Arial, sans-serif\" font-size=\"12\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"url(#brightTextGradient)\" filter=\"url(#textShadow)\">DIMMS<\/text>\n <\/g>\n \n <!-- Data flow lines -->\n <g stroke=\"#3498db\" stroke-width=\"2\" fill=\"none\" opacity=\"0.4\">\n <path d=\"M50,100 Q100,50 150,100 T250,100\"\/>\n <path d=\"M350,100 Q300,150 250,100 T150,100\"\/>\n <circle cx=\"75\" cy=\"100\" r=\"2\" fill=\"#3498db\"\/>\n <circle cx=\"125\" cy=\"75\" r=\"2\" fill=\"#e74c3c\"\/>\n <circle cx=\"175\" cy=\"100\" r=\"2\" fill=\"#2ecc71\"\/>\n <circle cx=\"225\" cy=\"75\" r=\"2\" fill=\"#f39c12\"\/>\n <circle cx=\"275\" cy=\"100\" r=\"2\" fill=\"#9b59b6\"\/>\n <circle cx=\"325\" cy=\"125\" r=\"2\" fill=\"#e67e22\"\/>\n <\/g>\n \n <!-- Lab name with modern typography -->\n <text x=\"200\" y=\"170\" font-family=\"Arial, sans-serif\" font-size=\"14\" font-weight=\"300\" text-anchor=\"middle\" fill=\"url(#textGradient)\">Disease-Informed Modelling, Methods, and Systems<\/text>\n <text x=\"200\" y=\"185\" font-family=\"Arial, sans-serif\" font-size=\"16\" font-weight=\"bold\" text-anchor=\"middle\" fill=\"url(#textGradient)\">LABORATORY<\/text>\n <\/svg>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>DIMMS Lab - Disease-Informed Modelling, Methods, and Systems \u2202 \u2207 \u03b2 \u03bb \u03a3 DIMMS Disease-Informed Modelling, Methods, and Systems Lab \"Bridging mathematical modeling with real-world disease solutions\" \u222b\u2202 \ud83e\uddec Mathematical Biology Population dynamics, SIR models, and differential equations transforming into biological networks \ud83e\udd16 Machine Learning & AI Disease-informed neural networks and deep learning for pattern […]<\/p>\n","protected":false},"author":2632,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"tags":[],"class_list":["post-488","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"nickson2","author_link":"https:\/\/www.yorku.ca\/professor\/waw\/author\/nickson2\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/pages\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/users\/2632"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/comments?post=488"}],"version-history":[{"count":17,"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/pages\/488\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/pages\/488\/revisions\/520"}],"wp:attachment":[{"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yorku.ca\/professor\/waw\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}