blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQ. tags)
black: the HTML tag, the root node
gray: all other tags
As the dots are quite small my color blindness gets in my way to read the graph at its full value. It is not easy at all to tell the different dots apart from each other because the colors are not distinguishable.
- Where is the Black dot among all those Blue ones?
- Blue is very close to Violet,
- Orange flows into Green,
- Green is anyway the same as Red and
- Yellow is sometimes hard to see at all.
It would be much better to use some kind of patterns to distinguish the different types. Only three different colors should be used in graphs that they can been told apart even by colorblinds. If you have a look at the legend above you would have to choose three well distinguishable colors and two extra patterns to make the website graph more readable.