Obsidian - Extended Graph - 7 Examples
đź”— **Source:** [Obsidian - Extended Graph - 7 Examples](https://youtube.com/watch?v=4xcEc4_qxJs&si=Glhn0ZIjpuCancPV)
> [!note]+ Document Notes
> tags:
> - #obsidian
> - #extendedgraph
> - #pkm
> Author: Unknown (creator name not provided in transcript)
> Source: YouTube — “Obsidian - Extended Graph - 7 Examples”
> Reference: https://www.youtube.com/watch?v=4xcEc4_qxJs
> date created: {{date:YYYY-MM-DD}} {{time:HH:mm}}
>
> # Obsidian Extended Graph — 7 Examples (Transcript Notes)
>
<!-- deep-read:sections start -->
## 🧠Table of Contents
- [đź“ť Summary](#-summary)
- [đź“– Main Content](#-main-content)
- [🖼️ Art Project: Images & Video Thumbnails](#️-art-project-images--video-thumbnails)
- [đź“Š Dashboard: Icons, Emojis, and Pinned Hubs](#-dashboard-icons-emojis-and-pinned-hubs)
- [🎓 PhD Graph: Titles, Attachments, and External Links](#-phd-graph-titles-attachments-and-external-links)
- [🏢 Startup Map: Relationship Types and Filters](#-startup-map-relationship-types-and-filters)
- [🎨 CSS Styling: Per-Graph Custom Labeling](#-css-styling-per-graph-custom-labeling)
- [✍️ Story Building: Folder-Scoped CSS & Roles](#️-story-building-folder-scoped-css--roles)
- [🧩 System Architecture: Shapes & Arrows](#-system-architecture-shapes--arrows)
- [🎬 Global Graph: Movies, Actors, Directors, Stats](#-global-graph-movies-actors-directors-stats)
- [🔎 Focus, Search, and Depth Cues](#-focus-search-and-depth-cues)
- [đź“š References](#-references)
- [🗒️ Notes](#️-notes)
- [🗣️ Paraphrase](#️-paraphrase)
- [đź“° Newsletter](#-newsletter)
- [âś… Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [đź“Š Methodology](#-methodology)
- [âť“ Questions](#-questions)
- [đź”® Future Research](#-future-research)
- [đź’ˇ Implications](#-implications)
- [🧠Learning Styles Assessment](#-learning-styles-assessment)
- [đź“Š Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [🧷 Logical Validity & Tone Analysis](#-logical-validity--tone-analysis)
- [🔍 SEO Evaluation](#-seo-evaluation)
- [🎯 Conclusion](#-conclusion)
### đź“š References: Include a list of sources consulted and cited in the article.
- YouTube: Obsidian — “Extended Graph — 7 Examples” (video + description) — https://www.youtube.com/watch?v=4xcEc4_qxJs
---
## đź“ť Summary
- **What it is:** Extended Graph is an Obsidian plugin that upgrades Graph View with images, icons, shapes, filtering, and graph metrics. [0:01](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1)
- **Why it matters:** You can model worlds, teams, research, or systems and then **see** relationships, not just read them.
- **Seven demos:** Art gallery, personal dashboard, academic graph, startup org map, CSS styling, story building, system architecture, and a global graph of Korean films with statistics.
---
## đź“– Main Content
### 🖼️ Art Project: Images & Video Thumbnails
- **Feature:** Load images into nodes; supports video previews but heavy files slow rendering. [1:00](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=60) · [1:20](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=80) · [1:34](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=94) · [1:47](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=107)
- **Options:** Show images in global/local graphs; pull from frontmatter `image`, embeds, or online sources. [2:13](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=133)–[2:36](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=156)
- **Why it matters:** Visual anchors help you navigate dense knowledge faster.
### đź“Š Dashboard: Icons, Emojis, and Pinned Hubs
- **Feature:** Use emojis or plugin-friendly icons (Iconic/Iconize) for folders and notes; inherit icons from parents or set per-note with `icon`. [3:40](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=220) · [4:58](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=298)
- **Styling:** Toggle borders/backgrounds; use emoji average color; pin key nodes to hold structure. [5:44](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=344)–[6:16](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=376)
- **Why it matters:** A visual “home screen” for your vault accelerates context switching.
### 🎓 PhD Graph: Titles, Attachments, and External Links
- **Readable labels:** Truncate displayed titles; show full on hover. [7:14](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=434)–[7:45](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=465)
- **Neighborhood names:** Show labels for hovered node **and** neighbors. [8:11](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=491)
- **Attachments:** Color code attachments; display just filename (hide long paths). [8:27](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=507)–[8:53](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=533)
- **External links:** Surface `url` links as domain nodes and truncate to last segment. [9:01](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=541)–[10:15](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=615)
- **Why it matters:** Academic references get human-friendly labels without renaming files.
### 🏢 Startup Map: Relationship Types and Filters
- **Link types:** Define edges like `collaborates_with`, `manages`, `reports_to`; use curved lines to show bidirectionality. [11:13](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=673)–[12:11](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=731)
- **Filtering:** Show only org structure; hide non-essential links. [12:21](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=741)
- **Tag/prop filters:** Combine with AND/OR; e.g., staff with “JavaScript” **and** “networking,” exclude juniors. [13:06](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=786)–[14:19](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=859)
- **Why it matters:** Turn your team graph into a staffing and skills dashboard.
### 🎨 CSS Styling: Per-Graph Custom Labeling
- **Scoped CSS:** Target specific graphs with `.graph-local/.graph-global` and `data-focus-file`. [15:09](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=909)
- **Readable labels:** Change font, weight, stroke, padding; improve overlap contrast. [16:29](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=989)–[17:16](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1036)
- **Why it matters:** Typography choices can make a busy graph legible.
### ✍️ Story Building: Folder-Scoped CSS & Roles
- **Folder scoping:** Apply CSS when path includes `Story Building/`. [17:56](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1076)–[18:24](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1104)
- **Role styling:** Characters red serif, worldbuilding green handwritten, protagonist big small-caps. [19:22](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1162)–[20:19](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1219)
- **Why it matters:** Visual roles make narrative relationships pop.
### 🧩 System Architecture: Shapes & Arrows
- **Shapes:** Squares for frontend, diamonds for APIs, hexagons for security, star-like for analytics. [21:12](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1272)–[22:04](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1324)
- **Arrows:** Pick styles, invert, set opacity, scale, and fixed size for zoom consistency. [22:37](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1357)–[24:17](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1457)
- **Why it matters:** Architecture graphs benefit from conventional shapes and clear flow.
### 🎬 Global Graph: Movies, Actors, Directors, Stats
- **Scoping state:** Filter the global graph to a folder (e.g., `movies/`). [25:02](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1502)–[25:35](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1535)
- **Visual types:** Posters for films, profile images for actors, clapper icon for directors; distinct shapes. [25:42](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1542)–[26:17](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1577)
- **Metrics:** Size/color by centrality (betweenness, degree, closeness); choose directed/undirected for correctness. [26:38](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1598)–[30:32](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1832)
- **Why it matters:** Statistics reveal hubs, bridges, and outliers at a glance.
### 🔎 Focus, Search, and Depth Cues
- **Focus highlight:** The active note grows in size in a global graph; opened notes show thicker borders. [35:22](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2122)–[35:38](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2138)
- **Search highlight:** Query matches glow (e.g., “lee sun”). [35:53](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2153)–[36:14](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2174)
- **Depth coloring:** Color nodes by graph distance from the focus. [36:41](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2201)–[37:07](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2227)
- **Why it matters:** Wayfinding in large graphs becomes practical.
---
## đź“š References
- Primary source (video): https://www.youtube.com/watch?v=4xcEc4_qxJs
---
## 🗒️ Notes
- **Core upgrade** — Images, icons, link-type colors, filters by tags/properties, and node sizing via graph metrics. [0:01–0:27](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1)
- Graph can reflect semantics, not just connectivity.
- Metrics include betweenness, degree, closeness; pick directed/undirected per use.
- **Media nodes** — Image/video previews in nodes; heavy videos slow parsing of frames. [1:20–1:47](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=80)
- Prefer images or short clips for performance.
- Sources: frontmatter, embeds, URLs.
- **Iconography** — Folder/file icons or frontmatter `icon`; emoji average color; border/background toggles. [3:40–6:16](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=220)
- Inherit icons from parent folders; pin core hubs.
- Works without external icon plugins.
- **Readable labels** — Truncate titles; show neighbors’ labels on hover. [7:14–8:21](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=434)
- Show filenames only for attachments; trim paths.
- External links render as domain/address nodes. [9:01–10:15](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=541)
- **Org relationships** — Edge types like `manages` and `collaborates_with`; curved lines for bidirectional ties. [11:13–12:11](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=673)
- Filter by skills/tags using AND/OR; exclude junior staff. [13:06–14:19](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=786)
- **CSS per graph** — Target with `data-focus-file`; tune fonts, strokes, spacing for clarity. [15:09–17:16](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=909)
- **Story theming** — Folder-scoped CSS defines role-specific fonts/colors; highlight protagonist visually. [17:56–20:19](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1076)
- **Architecture shapes** — Diamonds for APIs, hexagons for security, squares for frontend; tune arrowheads. [21:12–24:17](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1272)
- **Global stats** — Size/color by centrality; save default states; pick metrics suited to your link directionality. [26:38–30:32](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1598)
- **Wayfinding** — Focus size, open-note borders, search highlights, and depth-based coloring. [35:22–37:07](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=2122)
---
## 🗣️ Paraphrase
- **On images and videos in nodes:**
*Original idea:* You can render images and even video frames in graph nodes; large videos slow things down.
*Paraphrase:* Nodes can display thumbnails from images or videos. Long videos add overhead, so keep media lightweight for smooth graph interaction. [1:20–1:47](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=80)
- **On graph metrics for node size/color:**
*Original idea:* Use centrality metrics to control node size and color; choose directed/undirected as appropriate.
*Paraphrase:* Let math narrate the graph. Size and tint nodes using degree, betweenness, or closeness, then match metric assumptions to how your links actually flow. [26:38–30:32](https://www.youtube.com/watch?v=4xcEc4_qxJs&t=1598)
---
## đź“° Newsletter
**Learn:** Obsidian’s Extended Graph turns your notes into a living map. Add images, icons, shapes, and even graph stats to spotlight the real hubs in your knowledge.
**Update:** New demos show folder-scoped CSS, skill filters for team graphs, and architecture-friendly shapes.
**Community:** Perfect for worldbuilding, research, and contributor mapping.
**Try it:** Watch the 7-example tour → https://www.youtube.com/watch?v=4xcEc4_qxJs
**Pro tip:** Use degree centrality to identify your “connectors,” then sanity-check with directed edges for accuracy.
---
## âś… Action Items
- **Create contributor-mapping states (OSPO-ready):** One state per lens—*skills*, *project ownership*, *governance role*, *sponsorship*. Use link types like `maintains`, `reviews`, `mentors`.
- **Use metrics for advocacy:**
- **Degree centrality:** Find connectors who bridge teams.
- **Betweenness:** Spot gatekeepers at risk of burnout; propose pairing or sponsorship.
- **Closeness:** Identify fast disseminators for release comms.
- **Education artifacts:** Record short looms showing how to add `icon`, `image`, and `url` frontmatter. Turn into micro-lessons for new contributors.
- **Governance modeling:** Represent The WPCC, FAIR, teams, and initiatives as nodes; link with typed edges (`funds`, `partners_with`, `leads`). Visualize gaps before partnership talks.
- **KPI alignment:** Track graph changes quarterly. Aim for decreased betweenness on single maintainers and increased evenness across teams.
- **Prompt template (drop-in for future articles):**
*“Analyze how this piece supports open-source advocacy, contributor onboarding, and sustainable funding. Extract actions for OSPO maturity (policy, inventory, community, risk). Map entities and relationships as graph nodes/edges, propose link types, and suggest centrality-driven interventions. Output: 1) alignment summary, 2) graph schema (frontmatter + link types), 3) advocacy actions for GoDaddy + The WPCC, 4) risks and mitigation, 5) metrics to monitor next quarter.”*
---
## 🧪 Hypotheses
- **H1:** Graph views with typed edges improve contributor onboarding task assignment speed by ≥25%.
- **H2:** Teams using centrality dashboards reduce single-point-of-failure risk (max betweenness per person) by ≥30% in two quarters.
- **H3:** Folder-scoped CSS and shapes increase comprehension scores on architecture reviews by ≥20%.
### đź“Š Methodology
- **Design:** A/B projects: Graph-enabled vs. checklist-only.
- **Data:** Onboarding time to first PR, review latency, centrality over time, incident postmortems.
- **Analysis:** Survival analysis on time-to-first-PR; compare centrality distributions; pre/post comprehension quizzes.
### âť“ Questions
- Which edge semantics best capture governance (authority vs. influence)?
- How does directed vs. undirected choice distort metrics in note graphs?
- Can we flag burnout risk from rising betweenness + issue load?
### đź”® Future Research
- Weighted edges (e.g., sponsorship dollars, review volume).
- Time-aware graphs to see role drift and seasonal load.
- Automated schema inference from PRs, issues, and meeting notes.
### đź’ˇ Implications
- **Practice:** Better staffing, equitable load, clearer ownership.
- **Policy:** Data-informed sponsorships and contributor grants.
- **Knowledge:** Empirical evidence for graph-based PKM in OSS.
---
## 🧠Learning Styles Assessment
- **Visual:** Strong — images, icons, shapes, colors, depth gradients. *Improve:* Add on-screen legends and mini-maps.
- **Aural:** Present — narration explains options. *Improve:* Provide downloadable audio summary and chaptered podcast version.
- **Verbal:** Moderate — clear descriptions. *Improve:* Add transcript headings, glossary, and code snippets for CSS.
- **Kinesthetic:** Light — viewers watch, not do. *Improve:* Include downloadable vault with states and exercises.
- **Logical:** Strong — metrics, filters, typed edges. *Improve:* Show decision trees for metric selection.
- **Social:** Light — solo demo. *Improve:* Link to forum threads and example repos for collaboration.
- **Solitary:** Present — transcript suits reflective review. *Improve:* Add self-check tasks per section.
- **Naturalistic:** Not applicable. *Improve:* Provide real-world analogies (ecosystems for centrality).
**Readability (approx.):** Upper high-school to early college due to technical terms and configuration steps.
---
## đź“Š Accessibility Assessment
- **Screen readers:** Depends on YouTube + transcript quality. *Improve:* Provide full HTML article with headings and alt text for example images.
- **Keyboard navigation:** Video player supports; graph UI specifics not shown. *Improve:* Document keyboard shortcuts and focus states for the plugin.
- **Contrast & fonts:** Varies with theme. *Improve:* Recommend WCAG AA colors in examples; show code for font scaling.
- **Text resizing:** Not discussed. *Improve:* Demonstrate responsive label sizes and collision handling.
---
## 🌍 DEIB Assessment
- **Cultural relevance:** Neutral technical content. *Improve:* Use examples beyond Western naming and include diverse datasets.
- **Inclusive language:** Mostly inclusive, jargon present. *Improve:* Define terms (betweenness, eccentricity) in tooltips.
- **Neurodiversity:** Long sequences may overwhelm. *Improve:* Chunk content with chapter cards and checklists.
- **Representation:** People examples limited. *Improve:* Use varied personas in “startup” demo.
- **Psychological safety:** No sensitive topics. *Improve:* Encourage respectful Q&A and community code of conduct in linked docs.
---
## 🧷 Logical Validity & Tone Analysis
- **Reasoning strengths:**
- *Causal demonstration:* Feature → setting → observable outcome (e.g., curved edges clarify bidirectionality). This grounds claims in visible evidence.
- *Analogical mapping:* Shapes reflect domain concepts (diamonds for APIs). This aids schema transfer.
- *Method selection:* Notes when metrics require directed graphs, preventing category errors.
- **Potential gaps:**
- *Appeal to practicality:* “It should be fine later” on CSS bridging is tentative; lacks explicit benchmarks. Mitigate with performance notes.
- *Hasty generalization (minor risk):* Examples may not cover edge cases (huge vaults). Add stress-test data.
- **Tone:** Calm, exploratory, and candid about limitations; instructive without hype.
---
## 🔍 SEO Evaluation
- **Keywords:** “Obsidian,” “Extended Graph,” “Graph View,” “centrality,” “icons,” “shapes,” “filters.” Use naturally in title/description and within first 100 words.
- **Meta description (video):** Aim for ~155 chars: “Upgrade Obsidian’s Graph View with images, icons, shapes, filters, and graph metrics—see 7 practical examples in this walkthrough.”
- **Title tag:** Clear, under 60 chars; current title is close. Consider “Obsidian Extended Graph: 7 Practical Examples.”
- **Headers:** In companion article, use H2 per example with keyword variants.
- **Length:** Target 1,500–2,000 words for the article version.
- **Links:** Add internal links to related Obsidian docs; external links to graph theory primers.
- **URL:** `.../obsidian-extended-graph-examples`
- **Images:** Add alt text describing node shapes/colors and what they signify.
- **Mobile:** Compress screenshots; lazy-load images.
- **Engagement:** Include a downloadable demo vault; add CTAs for comments and forks.
- **Schema:** Use `VideoObject` + `HowTo` for the article.
- **Social:** Open Graph/Twitter Card with a high-contrast screenshot.
---
## 🎯 Conclusion
Extended Graph turns Obsidian’s Graph View into a modeling tool. Images and icons improve wayfinding. CSS and shapes encode meaning. Filters and centrality expose structure and risk. With a few conventions—typed links, scoped states, and the right metrics—you can move from pretty constellations to actionable maps of teams, research, and stories.
<!-- deep-read:sections end -->