Created
March 26, 2015 18:47
-
-
Save carlos-jenkins/db076ee6a3c1045dc42a to your computer and use it in GitHub Desktop.
Create a hierarchy of nodes using Graphviz and HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| digraph domains { | |
| Prokaryote [URL="prokaryote.html", tooltip="A cell with no nucleus."]; | |
| Eukaryote [URL="eukaryote.html", tooltip="A cell with a nucleus."]; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Document variables | |
| ENTRY = domains.html | |
| PAGE_TPL = page.tpl | |
| BUILDDIR = build | |
| INPUTS = $(wildcard *.dot) | |
| IMGS = $(INPUTS:%.dot=%.png) | |
| BUILD_IMGS = $(addprefix $(BUILDDIR)/, $(IMGS)) | |
| HTML = $(INPUTS:%.dot=%.html) | |
| BUILD_HTML = $(addprefix $(BUILDDIR)/, $(HTML)) | |
| .PHONY : all clean html template | |
| all: clean html | |
| clean: | |
| rm -rf $(BUILDDIR)/* | |
| html: template $(BUILD_IMGS) $(BUILD_HTML) | |
| template: | |
| mkdir -p $(BUILDDIR) | |
| ln -s $(ENTRY) $(BUILDDIR)/index.html | |
| $(BUILDDIR)/%.map: %.dot | |
| dot -Tcmapx -o$@ $< | |
| $(BUILDDIR)/%.png: %.dot | |
| dot -Tpng -o$@ $< | |
| $(BUILDDIR)/%.html: $(BUILDDIR)/%.map | |
| cp $(PAGE_TPL) $@ | |
| echo "/{map}/{" > $(BUILDDIR)/sedcmd | |
| echo "r $<" >> $(BUILDDIR)/sedcmd | |
| echo "d }" >> $(BUILDDIR)/sedcmd | |
| sed -i -f $(BUILDDIR)/sedcmd $@ | |
| rm $(BUILDDIR)/sedcmd | |
| sed -i -e 's/{name}/$*/g' $@ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="graph"> | |
| <img src="{name}.png" usemap="{name}"/> | |
| {map} | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| digraph prokaryote { | |
| Archaebacteria [ | |
| URL="archaebacteria.html", | |
| tooltip="This group of bacteria-like organisms live in harsh \ | |
| (high temperature, salinity, etc.) environments similar to that of ancient \ | |
| earth (hence the name)." | |
| ]; | |
| Eubacteria [ | |
| URL="eubacteria.html", | |
| tooltip="Single celled organisms with no membrane surrounding the \ | |
| genetic material (Bacteria, Blue-green algae) and circular DNA" | |
| ]; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment