Provide tags as graph CSS classes/attributes to allow coloring of graph nodes

[dardan]

Within Obsidian I work a lot with tags, to differentiate between different types of notes.
0.9.0 graph view already allows us to use different colors for tag nodes and attachment nodes.
But what would be really amazing in my opinion is, if we could assign different colors to note-nodes according to their tags (in graph view).

I don’t know how complicated (or even possible) the CSS -> WebGL conversion would be, but I could imagine the following methods:

a) Make tags accessible through a tag attribute. The tags attribute would contain a whitespace separated list of all tags on this node.
This would allow styling the nodes similar to the Tag Pills (Common CSS hacks) by using something like:

.graph-view.color-fill[tag~=idea] {
  color: blue;
}

This would also allow other fancy tricks as described in HTML attribute selectors.

b) Make tags available as classes so that we can access them like:

.graph-view.color-fill.idea {
  color: blue;
}

or maybe:

.graph-view.color-fill.tag-idea {
  color: blue;
}

I saw a bunch of other threads talking about similar ideas (coloring/highlighting graph nodes).
But exposing them for CSS would be the most flexible option.

[dardan]

This would also (partly) solve this feature request to some extent and address this comment.

[Emile]

I would also love this! I used this a lot in Neo4J Bloom and it’s so pretty and useful

[CKHarwood]

This would also also make it easier to use notes as tags on other notes, instead of making pages for all tags as requested here. (I promise that sentence is coherent in context. Cf. the discussion on that request.)

Another approach would be to support this through YAML metadata on a note.

[rasulkireev]

This would be super cool. Allowing for additional layer of usefulness to the graph.

One thing I’m wondering is if a note has multiple tags, what will happen then? Colors mix, or one of the colors takes over?

[Emile]

I’ve implemented graph styling, including coloring by tags, in the Neo4j Graph View Plugin:

[dardan]

According to the CSS specification id multiple rules (with same specificity) apply to the same element. The last rule inside the css file is applied.

Cascade and inheritance - Learn web development | MDN

So if we got

.graph-view.color-fill[tag~=idea] {
    color: blue;
}
.graph-view.color-fill[tag~=todo] {
    color: red;
}

And the node is tagged with #todo and #idea the node would show red (because this rule is later in the css file).

Altough mixed colours would be pretty amazing but you could do that with a third css rule manually:

.graph-view.color-fill[tag~=todo].color-fill[tag~=idea] {
    color: purple;
}

Which should have higher specificity if I understand it correctly.

[andavargas]

I want this too! Is there a way to change the color of the nodes in graph view?

[han_tani]

I would love to use this - mainly some notes function as hubs within my graph and it would be nice to highlight them

[lefthegelian]

I also would like to have this feature. However, I would already be very happy if could cluster tags under a certain class and exclude or include them in my search.

The way my Obsidian vault is set up is that I have different classes of tags and which have different colors. I have type tags that are grey and which tell me that a note is literature note or concept note or an author note. I have discipline tags which are red and tell me within which disciplines a note falls for example history, economics or philosophy. These are colored red. I also have status tags which tell me the status of certain note, those are purple. And finally I have keyword tags which are the standard color.

I don’t know if there is already a way to cluster tags in these way, without manually having to type every tag which falls under the cluster. I would be nice if you could you add a tag once to a certain cluster when you start using it and then never have to worry about it.

[dardan]

I just realized that V0.11.0 adds the possibility to define groups via queries and assign a color to them .

This basically solves my request. BUT the problem is that groups are cleared in new local graphs (in the global graph they persist).

It would be great if we could define default groups for all newly opened local graphs or an option so that the groups persist when the local graph is closed and opened again.

[Abhuva]

Not sure if it might be better to open this as a new feature-request so it doesnt get lost. Anyway - now that we have the color-groups for graphs i would like to request predefined groups that i can switch between.

Why? I love the coloring to easy spot different things in the graph, depending on what i am after i use completely different search-phrases for the colors.

I.e. : i color all my MOCs, the status of notes (seed, fleeting, permanent etc…) and can get an idea of the overall “health” and state of my pkm
Then i filter only atomic notes and links between and color them to see what overall Themes they fit in - here i can see what Themes are bad linked (lots of orphans) or if there are themes often intersecting …

This goes on… To do it right now, i have to setup the coloring each time i change what i want to look at.

Goal: I would like to be able to define color-groups (maybe elsewhere, in a file or in another menu), name the whole group and just tell the graph to use a certain pre-defined “color-group” then.

[geoffwright]

If this is not already up as a feature request, I second it!

I’m about a week into Obsidian and was over the moon to see I could colour-group my graph view by tags (#people, #books, #songs, concepts etc). However when messing with other graph settings later, I hit ‘restore defaults’ and it deleted the beautiful colour schemes I had set! Not a huge deal to fix a few days in, but I can only imagine the anguish if I had been a month in and accidentally deleted the colour-tagged groups.

[greglh]

My input is that expanding tag and interactive tag related graph functionality in general would make obsidian much more useful and differentiated for use with real world projects and content management workflows.

In addition to supporting graph color options ― I would request and suggest adding shape-icon, and graph visualization options and functionality that support how tags are used, visualized and navigated to provides a more generalized and complete solution for managing and interacting visually with our knowledge graph and use of tags.

Below are an image and explanation to help communicate these points:

IMAGE

EXPLANATION:

 A. On the left is an example panel for (1) selecting tags by pre-configured types, classes, etc. and (2) selecting graph visualization by types (just 2 here, but there are several other types commonly used by mind-mapping type apps)
 B. On the main graph in the center are examples of how these visualizations might look by example. Note they are imagined as foldable visualizations and iconic on the main graph to reduce clutter.  This would allow fast visual confirmation of the type of tag organization type or class is being used by the underlying content
 C. On the right is an example of the pane showing the iconic visualization un-folded in the main graph showing it in full detail, color matched when the node is expanded in the main graph.
 D. To provide maximum flexibility is it would be best if these selections are FILTER type selections, which could stored as views, to give the underlying content and tags and visualizations maximum flexibility depending on how the user wants to slice and dice their content in different ways to match different workflow needs. And, perhaps subsets locked into a particular style differently for each particular stored view.  NOTION does this multi-view store quite well.

SAMPLE USE CASE EXAMPLES

Vault contains CONTENT user wants to partly organize and at times visualize as structured and part unstructured.

• One part or at one time visualizing KBASE to discover related concepts as a result of tagging over time
• Managing the same content but visualizing it based on different projects within the whole KBASE GRAPH or graph subsets larger than themselves see and manage: (1) hierarchies of pages, categories, tags and content for a website, (2) book, chapter, pages of a book ― and for these providing a way to (3) turning on and off different types of tags that would show concepts linked to nodes in (1), (2) while they remain visualized in a their structured form.

This type of approach might enable a very high degree of visualization and content management capability and flexibility, while being easy to use.

[JoshT]

This is great! Do you know if it’s also possible to use groups or CSS to selectively colour nodes in Obsidian Publish?

[basemaly]

Thank you for all these great tips! I’m wondering if there’s a way to use CSS to change the color of neighbor links. Any advice would be most appreciated. Thanks!