We resume our work with Cities Alive only now with a more concrete model for what the hypertext should look like. See Cities Alive as Hypertext
We will excerpt from the Sustasis patterns for growing regions making them the seeds for a web of related work that others will write.
We've copied this TOC from a pdf and now have mechanically transcribed the rest. The ✔︎ and ☆ mark pages we modeled by hand.
# Codes
We start with the ebook format converted to html. We expect to use class tags on various elements to guide our conversion. First we write a function that tallies classes.
[].slice.call(document.getElementsByTagName('div')) .map(e=>(e.getAttribute('class')||'null')) .reduce((h,e)=>{h[e]=(h[e]||0)+1;return h},{})
For <div>
Photo-bw _idGenObjectStyleOverride-2: 59 Photo-small: 35 Photo-small-wide: 21 _idFootnote: 11 _idFootnotes: 1 _idGenObjectLayout-1: 116 _idGenObjectStyleOverride-1: 3
For <p>
Body_-----: 102 Body_Solution: 111 Body_Therefore: 57 Body_body-italic: 9 Body_body-text: 283 Body_body-text ParaOverride-1: 10 Body_body-text ParaOverride-2: 1 Body_body-text ParaOverride-4: 1 Body_body-text ParaOverride-5: 5 Body_body-text ParaOverride-6: 1 Body_body-text ParaOverride-7: 1 Body_body-text ParaOverride-8: 10 Body_body-text ParaOverride-10: 1 Body_body-text ParaOverride-12: 1 Body_body-text _idGenParaOverride-1: 2 Body_body-title: 6 Body_footnote: 10 Body_upward-tekst: 47 Body_upward-tekst ParaOverride-1: 6 Body_upward-tekst ParaOverride-5: 1 Body_upward-tekst ParaOverride-11: 1 Images_Caption: 60 Images_Caption ParaOverride-1: 1 Images_Pattern-photo: 1 TOC_TOC-1: 15 TOC_TOC-2: 59 Titles_Chapter-title: 60 Titles_Section-title: 15 null: 1
# Download
I test javascript in the debug console but eventually put what works in a single file which I add to the html that I am translating. github 
<script src="growing.js"></script>
file:///Users/ward/FedWiki/sustasis-mapmatic/ebook-formats/APLFGR%2026.02%20ebook.html
I write code to create a whole new site as a single object, slug ⇒ page, which I download idiomatically.
var json = JSON.stringify(e, null, ' ') download(json, 'export.json', 'text/plain') function download(text, name, type) { var a = document.createElement("a"); var file = new Blob([text], {type: type}); a.href = URL.createObjectURL(file); a.download = name; a.click(); }
This appears as a download notice below the footer of the browser from where it can be dragged to a wiki to be examined by the import mechanism.
# Links
We've found inconsistent naming of patterns cause more than half links not resolve. We find localized diagrams help debug these problems. Notice the varying degrees of linking within vs. between locales.
Construction Patterns within locale.
strict digraph { node [shape=box style=filled fillcolor=lightgray] rankdir=LR "Design-Build Adaptation" [fillcolor=bisque] "Biophilic Urbanism" [fillcolor=lightblue] "Biophilic Urbanism" -> "Design-Build Adaptation" "Design-Build Adaptation" -> "Community Mockups" "Human-Scale Detail" [fillcolor=bisque] "Design-Build Adaptation" [fillcolor=bisque] "Design-Build Adaptation" -> "Human-Scale Detail" "Ornamental Construction" [fillcolor=lightblue] "Human-Scale Detail" -> "Ornamental Construction" "Complex Materials" [fillcolor=lightblue] "Human-Scale Detail" -> "Complex Materials" "Ornamental Construction" [fillcolor=bisque] "Human-Scale Detail" [fillcolor=bisque] "Human-Scale Detail" -> "Ornamental Construction" "Complex Materials" [fillcolor=bisque] "Biophilic Urbanism" [fillcolor=lightblue] "Biophilic Urbanism" -> "Complex Materials" "Community Mockup" [fillcolor=lightblue] "Complex Materials" -> "Community Mockup" }
Geometric Patterns mixed.
digraph { node [shape=box style=filled fillcolor=lightgray] rankdir=LR "Local Symmetry" [fillcolor=bisque] "Biophilic Urbanism" [fillcolor=lightblue] "Biophilic Urbanism" -> "Local Symmetry" "Lace Networks" [fillcolor=lightgray] "Lace Networks" -> "Local Symmetry" "Courtyard Buildings" [fillcolor=lightgray] "Courtyard Buildings" -> "Local Symmetry" "Ornament" [fillcolor=lightgray] "Local Symmetry" -> "Ornament" "Human-Scale Detail" [fillcolor=lightblue] "Local Symmetry" -> "Human-Scale Detail" "Small Groups of Elements" [fillcolor=bisque] "Public Space System" [fillcolor=lightblue] "Public Space System" -> "Small Groups of Elements" "Walkable Streetscape" [fillcolor=lightblue] "Walkable Streetscape" -> "Small Groups of Elements" "Human-Scale Detail" [fillcolor=lightblue] "Small Groups of Elements" -> "Human-Scale Detail" "Fractal Pattern" [fillcolor=bisque] "Biophilic Urbanism" [fillcolor=lightblue] "Biophilic Urbanism" -> "Fractal Pattern" "Local Symmetry" [fillcolor=bisque] "Fractal Pattern" -> "Local Symmetry" "Human-Scale Design" [fillcolor=lightgray] "Fractal Pattern" -> "Human-Scale Design" "Ornament" [fillcolor=lightgray] "Fractal Pattern" -> "Ornament" "Framing" [fillcolor=bisque] "Layered Zones" [fillcolor=lightblue] "Layered Zones" -> "Framing" "Passageway View" [fillcolor=lightblue] "Passageway View" -> "Framing" "Human-Scale Design" [fillcolor=lightgray] "Framing" -> "Human-Scale Design" }
Retrofit Patterns between locales.
digraph { node [shape=box style=filled fillcolor=lightgray] rankdir=LR "Slum Upgrade" [fillcolor=bisque] "Polycentric Region" [fillcolor=lightblue] "Polycentric Region" -> "Slum Upgrade" "Sprawl Retrofit" [fillcolor=bisque] "Polycentric Region" [fillcolor=lightblue] "Polycentric Region" -> "Sprawl Retrofit" "Tax Increment Financing" [fillcolor=lightgray] "Sprawl Retrofit" -> "Tax Increment Financing" "Land Value Tax" [fillcolor=lightblue] "Sprawl Retrofit" -> "Land Value Tax" "Urban Regeneration" [fillcolor=bisque] "Polycentric Region" [fillcolor=lightblue] "Polycentric Region" -> "Urban Regeneration" "Land Value Tax" [fillcolor=lightblue] "Urban Regeneration" -> "Land Value Tax" "Urban Consolidation" [fillcolor=bisque] "Polycentric Region" [fillcolor=lightblue] "Polycentric Region" -> "Urban Consolidation" "Neighborhood Planning Center" [fillcolor=lightblue] "Urban Consolidation" -> "Neighborhood Planning Center" }
This diagrams have been sufficiently useful already that I want to make them fully automatic. After some discussion I came to a proposal. See Extract Site to Dot
Try another Growing Regions as Hypertext. Is it faster having already loaded vis.js?
# To Do
Convert image names to include pattern's slug.
Add fork and delete to Asset plugin.
Correct handling of title case for "as" and "AV".
Remove page references.
Remove ... and adjust capitalization accordingly.
Add DOT constructor markup to Graphviz plugin.
Fractured link in Walkable Streetscape. wiki