<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Graphs on AI VOID</title><link>https://ai-blog.noorshomelab.dev/tags/graphs/</link><description>Recent content in Graphs on AI VOID</description><generator>Hugo</generator><language>en</language><lastBuildDate>Mon, 16 Feb 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://ai-blog.noorshomelab.dev/tags/graphs/index.xml" rel="self" type="application/rss+xml"/><item><title>TensorFlow Guide: Core Concepts - Tensors, Operations, and Graphs</title><link>https://ai-blog.noorshomelab.dev/tensorflow-guide/core-concepts-tensors-operations-graphs/</link><pubDate>Sun, 26 Oct 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/tensorflow-guide/core-concepts-tensors-operations-graphs/</guid><description>&lt;h2 id="2-core-concepts-and-fundamentals"&gt;2. Core Concepts and Fundamentals&lt;/h2&gt;
&lt;p&gt;TensorFlow is built upon a few fundamental concepts that, once understood, unlock its full power. In this chapter, we&amp;rsquo;ll break down the core building blocks: Tensors, Operations, and the underlying concept of Graphs (even in TensorFlow 2.x&amp;rsquo;s eager execution model).&lt;/p&gt;
&lt;h3 id="21-tensors-the-universal-data-structure"&gt;2.1 Tensors: The Universal Data Structure&lt;/h3&gt;
&lt;p&gt;In TensorFlow, all data—whether it&amp;rsquo;s raw input, model weights, biases, or outputs—is represented as &lt;strong&gt;tensors&lt;/strong&gt;. A tensor is a multi-dimensional array, similar to NumPy arrays, but with the added benefit of being able to run on GPUs (for accelerated computation) and being part of a computation graph.&lt;/p&gt;</description></item><item><title>Chapter 14: Graphs: Connecting the World</title><link>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/graphs-connecting-world/</link><pubDate>Mon, 16 Feb 2026 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/graphs-connecting-world/</guid><description>&lt;h2 id="chapter-14-graphs-connecting-the-world"&gt;Chapter 14: Graphs: Connecting the World&lt;/h2&gt;
&lt;p&gt;Welcome, aspiring algorithm architect! In our journey through data structures, we&amp;rsquo;ve explored linear arrangements like arrays and linked lists, and hierarchical ones like trees. Now, it&amp;rsquo;s time to tackle the ultimate structure for representing complex relationships: &lt;strong&gt;Graphs&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Graphs are everywhere in the real world, from the intricate web of social media connections to the sprawling networks of roads and the internet itself. Understanding graphs is crucial for solving problems in navigation, resource allocation, recommendation systems, and much more. This chapter will demystify graphs, teaching you their core concepts, how to represent them efficiently in TypeScript, and how to navigate their complex pathways using fundamental traversal algorithms like Breadth-First Search (BFS) and Depth-First Search (DFS).&lt;/p&gt;</description></item><item><title>Chapter 23: Hands-On Project: Route Finder with Graphs</title><link>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/project-route-finder/</link><pubDate>Mon, 16 Feb 2026 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/project-route-finder/</guid><description>&lt;h2 id="introduction-charting-your-own-course"&gt;Introduction: Charting Your Own Course&lt;/h2&gt;
&lt;p&gt;Welcome to Chapter 23! So far, we&amp;rsquo;ve explored the fascinating world of graphs, understanding how they represent interconnected data. We&amp;rsquo;ve seen nodes, edges, and different ways to traverse them. Now, it&amp;rsquo;s time to put that knowledge into action with a super practical and engaging project: building your very own &lt;strong&gt;Route Finder!&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Imagine you&amp;rsquo;re developing a simple navigation app. How does it figure out the best way to get from point A to point B? The answer, often, lies in graph theory and powerful algorithms like Dijkstra&amp;rsquo;s. In this chapter, we&amp;rsquo;ll model a small network of &amp;ldquo;cities&amp;rdquo; and &amp;ldquo;roads&amp;rdquo; as a graph, then implement a classic algorithm to discover the shortest path between any two points. This isn&amp;rsquo;t just a theoretical exercise; it’s the fundamental concept behind GPS systems, network routing protocols, and even social media friend recommendations.&lt;/p&gt;</description></item><item><title>Chapter 15: Advanced Graph Algorithms: Shortest Paths and Beyond</title><link>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/advanced-graph-algorithms/</link><pubDate>Mon, 16 Feb 2026 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/dsa-typescript-mastery-2026/advanced-graph-algorithms/</guid><description>&lt;h2 id="introduction"&gt;Introduction&lt;/h2&gt;
&lt;p&gt;Welcome to Chapter 15! We&amp;rsquo;ve journeyed through the fundamentals of graphs, understanding how to represent them and perform basic traversals like Breadth-First Search (BFS) and Depth-First Search (DFS). Now, it&amp;rsquo;s time to elevate our graph game and tackle one of the most practical and fascinating problems in computer science: finding the shortest path between nodes.&lt;/p&gt;
&lt;p&gt;In this chapter, you&amp;rsquo;ll dive deep into advanced graph algorithms designed specifically for shortest path problems. We&amp;rsquo;ll explore Dijkstra&amp;rsquo;s Algorithm, a classic for graphs with non-negative edge weights, and then move on to Bellman-Ford, which gracefully handles negative edge weights and even detects negative cycles. Finally, we&amp;rsquo;ll touch upon Floyd-Warshall, an elegant solution for finding all-pairs shortest paths.&lt;/p&gt;</description></item><item><title>Chapter 10: Customizing Graph Aesthetics - Nodes, Links &amp;amp; Labels</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-10-custom-graph-aesthetics/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-10-custom-graph-aesthetics/</guid><description>&lt;h2 id="chapter-10-customizing-graph-aesthetics---nodes-links--labels"&gt;Chapter 10: Customizing Graph Aesthetics - Nodes, Links &amp;amp; Labels&lt;/h2&gt;
&lt;p&gt;Welcome back, visualization explorer! In our previous chapters, we laid the groundwork for creating dynamic, force-directed graphs using D3.js and rendering them efficiently on an HTML Canvas. We&amp;rsquo;ve seen how to get data flowing and nodes wiggling, but let&amp;rsquo;s be honest, our graphs are still a bit&amp;hellip; plain. They&amp;rsquo;re functional, but they don&amp;rsquo;t yet tell a story with their looks.&lt;/p&gt;</description></item><item><title>Chapter 12: Optimizing Canvas Performance for Large Graphs</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-12-optimizing-performance/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-12-optimizing-performance/</guid><description>&lt;h2 id="chapter-12-optimizing-canvas-performance-for-large-graphs"&gt;Chapter 12: Optimizing Canvas Performance for Large Graphs&lt;/h2&gt;
&lt;p&gt;Welcome back, visualization explorer! In our previous adventures, we&amp;rsquo;ve learned how to harness the power of D3.js with HTML5 Canvas to create beautiful and interactive graphs. You&amp;rsquo;ve seen how flexible and fast Canvas can be, especially compared to its SVG cousin for certain tasks.&lt;/p&gt;
&lt;p&gt;However, as your datasets grow from a few dozen points to hundreds, thousands, or even tens of thousands, you might start noticing your visualizations feeling a bit sluggish. This is completely normal! Even the mighty Canvas has its limits if we don&amp;rsquo;t treat it right. This chapter is all about becoming a Canvas performance wizard. We&amp;rsquo;ll dive into techniques to keep your large, complex D3.js Canvas graphs running smoothly, ensuring a fantastic user experience.&lt;/p&gt;</description></item><item><title>Chapter 4: Introducing Graph Data - Nodes and Links</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-4-graph-data-structures/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-4-graph-data-structures/</guid><description>&lt;h2 id="chapter-4-introducing-graph-data---nodes-and-links"&gt;Chapter 4: Introducing Graph Data - Nodes and Links&lt;/h2&gt;
&lt;p&gt;Welcome back, intrepid data explorer! In our previous chapters, we laid the groundwork for D3.js and got our hands dirty with drawing basic shapes on the HTML5 Canvas. We learned how D3 helps us bind data to visual elements and manipulate them programmatically. Now, it&amp;rsquo;s time to dive into one of the most powerful and visually captivating data structures: &lt;strong&gt;graphs&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;In this chapter, we&amp;rsquo;ll unravel the mystery of graph data. You&amp;rsquo;ll learn what nodes and links are, how to represent them in a way D3.js loves, and how to draw these fundamental components onto our Canvas. This is a crucial step towards creating dynamic, interactive network visualizations and understanding complex relationships in your data. Get ready to connect the dots – literally!&lt;/p&gt;</description></item><item><title>Chapter 5: Drawing Our First Static Graph on Canvas</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-5-first-static-graph/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-5-first-static-graph/</guid><description>&lt;h2 id="chapter-5-drawing-our-first-static-graph-on-canvas"&gt;Chapter 5: Drawing Our First Static Graph on Canvas&lt;/h2&gt;
&lt;p&gt;Welcome back, visualization explorer! In our previous chapters, you&amp;rsquo;ve mastered the foundational concepts of D3.js and started creating basic SVG-based visualizations. Now, we&amp;rsquo;re going to embark on an exciting new journey: bringing our data to life using the HTML &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
&lt;p&gt;This chapter will guide you step-by-step through the process of drawing your very first static graph – a network of nodes and links – entirely on a Canvas. We&amp;rsquo;ll explore why Canvas is a powerful alternative to SVG for certain types of visualizations, understand its core mechanics, and get our hands dirty with code. By the end, you&amp;rsquo;ll have a solid understanding of how to leverage Canvas for D3.js and be ready to tackle more complex, performant graph visualizations.&lt;/p&gt;</description></item><item><title>Chapter 8: The Power of Physics - Introduction to D3-Force</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-8-intro-d3-force/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-8-intro-d3-force/</guid><description>&lt;h2 id="chapter-8-the-power-of-physics---introduction-to-d3-force"&gt;Chapter 8: The Power of Physics - Introduction to D3-Force&lt;/h2&gt;
&lt;p&gt;Welcome back, intrepid data explorer! In our journey through D3.js, we&amp;rsquo;ve learned how to draw static shapes and bind data to them. But what if your data isn&amp;rsquo;t static? What if you want to visualize relationships, networks, or systems where elements interact and move? That&amp;rsquo;s where things get really exciting!&lt;/p&gt;
&lt;p&gt;In this chapter, we&amp;rsquo;re going to dive into one of D3.js&amp;rsquo;s most captivating modules: &lt;code&gt;d3-force&lt;/code&gt;. This powerful tool allows us to simulate physical forces, bringing our data visualizations to life with organic, dynamic layouts. We&amp;rsquo;ll specifically focus on using &lt;code&gt;d3-force&lt;/code&gt; with HTML5 Canvas, leveraging its performance benefits for complex, interactive graphs.&lt;/p&gt;</description></item><item><title>Chapter 9: Building an Interactive Force-Directed Graph</title><link>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-9-interactive-force-graph/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/d3js-canvas-graphs-2025/chapter-9-interactive-force-graph/</guid><description>&lt;h2 id="introduction-bringing-data-to-life-with-dynamic-graphs-on-canvas"&gt;Introduction: Bringing Data to Life with Dynamic Graphs on Canvas&lt;/h2&gt;
&lt;p&gt;Welcome back, fellow data explorers! In our previous chapters, we&amp;rsquo;ve dabbled with D3.js and SVG, crafting beautiful static visualizations. But what if your data relationships are complex, interconnected, and need to tell a story through movement and interaction? That&amp;rsquo;s where &lt;strong&gt;force-directed graphs&lt;/strong&gt; come in, and for truly massive or highly interactive graphs, &lt;strong&gt;HTML5 Canvas&lt;/strong&gt; is often our rendering surface of choice.&lt;/p&gt;</description></item><item><title>D3.js with Canvas Practical Field Guide</title><link>https://ai-blog.noorshomelab.dev/guides/d3js-canvas-graphs-guide/</link><pubDate>Thu, 04 Dec 2025 00:00:00 +0000</pubDate><guid>https://ai-blog.noorshomelab.dev/guides/d3js-canvas-graphs-guide/</guid><description>&lt;h2 id="welcome-to-the-d3js-canvas-graph-masterclass"&gt;Welcome to the D3.js Canvas Graph Masterclass!&lt;/h2&gt;
&lt;p&gt;Hello, aspiring data visualization artist! Are you ready to dive deep into the world of dynamic, high-performance data visualization? This guide is your personal roadmap to mastering D3.js specifically with HTML5 Canvas, focusing on creating beautiful and complex graph visualizations.&lt;/p&gt;
&lt;h3 id="what-is-d3js-with-canvas-for-graphs"&gt;What is D3.js with Canvas for Graphs?&lt;/h3&gt;
&lt;p&gt;D3.js (Data-Driven Documents) is a powerful JavaScript library that helps you bring data to life using web standards. While D3 is famously known for its SVG capabilities, it also offers robust support for rendering visualizations on the HTML5 Canvas element.&lt;/p&gt;</description></item></channel></rss>