Skip to content

Instantly share code, notes, and snippets.

@shubhgo

shubhgo/README.md

Last active May 19, 2021 14:37
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save shubhgo/80323b7f3881f874c02f to your computer and use it in GitHub Desktop.
Save shubhgo/80323b7f3881f874c02f to your computer and use it in GitHub Desktop.
Download ZIP
D3 tree with weighted links and color coding
Raw
README.md

A tree visualization built using d3 and inspired from mbostock's work. Some of the features supported are:

  • Weighted edges
  • Color coded links
  • Links originate along the height of the node instead of the center of the node

The MIT License (MIT)

Copyright (c) 2014 Shubham Goel

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Raw
data.json
{
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Query"
],
"key" : "Query-Query-Query",
"size" : 19
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Undo"
],
"key" : "Query-Query-Undo",
"size" : 3
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Calculate"
],
"key" : "Query-Query-Calculate",
"size" : 3
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Connect"
],
"key" : "Query-Query-Connect",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Bookmark"
],
"key" : "Query-Query-Bookmark",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Remove"
],
"key" : "Query-Query-Remove",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"hide"
],
"key" : "Query-Query-hide",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Query",
"Annotate"
],
"key" : "Query-Query-Annotate",
"size" : 1
}
],
"name" : [
"Query",
"Query"
],
"key" : "Query-Query",
"size" : 30
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Calculate",
"Query"
],
"key" : "Query-Calculate-Query",
"size" : 4
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Calculate",
"Change-Metaphor"
],
"key" : "Query-Calculate-Change-Metaphor",
"size" : 1
}
],
"name" : [
"Query",
"Calculate"
],
"key" : "Query-Calculate",
"size" : 5
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Undo",
"Undo"
],
"key" : "Query-Undo-Undo",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Undo",
"New"
],
"key" : "Query-Undo-New",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Undo",
"Calculate"
],
"key" : "Query-Undo-Calculate",
"size" : 1
}
],
"name" : [
"Query",
"Undo"
],
"key" : "Query-Undo",
"size" : 4
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Show",
"Query"
],
"key" : "Query-Show-Query",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Show",
"Edit"
],
"key" : "Query-Show-Edit",
"size" : 1
}
],
"name" : [
"Query",
"Show"
],
"key" : "Query-Show",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Filter",
"Filter"
],
"key" : "Query-Filter-Filter",
"size" : 2
}
],
"name" : [
"Query",
"Filter"
],
"key" : "Query-Filter",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"View",
"View"
],
"key" : "Query-View-View",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"View",
"Filter"
],
"key" : "Query-View-Filter",
"size" : 1
}
],
"name" : [
"Query",
"View"
],
"key" : "Query-View",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"New",
"Query"
],
"key" : "Query-New-Query",
"size" : 2
}
],
"name" : [
"Query",
"New"
],
"key" : "Query-New",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Bookmark",
"Query"
],
"key" : "Query-Bookmark-Query",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Bookmark",
"Edit"
],
"key" : "Query-Bookmark-Edit",
"size" : 1
}
],
"name" : [
"Query",
"Bookmark"
],
"key" : "Query-Bookmark",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Remove",
"Query"
],
"key" : "Query-Remove-Query",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Remove",
"Calculate"
],
"key" : "Query-Remove-Calculate",
"size" : 1
}
],
"name" : [
"Query",
"Remove"
],
"key" : "Query-Remove",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Move",
"Modify"
],
"key" : "Query-Move-Modify",
"size" : 1
}
],
"name" : [
"Query",
"Move"
],
"key" : "Query-Move",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Connect",
"Connect"
],
"key" : "Query-Connect-Connect",
"size" : 1
}
],
"name" : [
"Query",
"Connect"
],
"key" : "Query-Connect",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"hide",
"Query"
],
"key" : "Query-hide-Query",
"size" : 1
}
],
"name" : [
"Query",
"hide"
],
"key" : "Query-hide",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Query",
"Annotate",
"Annotate"
],
"key" : "Query-Annotate-Annotate",
"size" : 1
}
],
"name" : [
"Query",
"Annotate"
],
"key" : "Query-Annotate",
"size" : 1
}
],
"name" : [
"Query"
],
"key" : "Query",
"size" : 55
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Filter",
"Filter"
],
"key" : "Filter-Filter-Filter",
"size" : 28
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Filter",
"Save"
],
"key" : "Filter-Filter-Save",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Filter",
"Undo"
],
"key" : "Filter-Filter-Undo",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Filter",
"New"
],
"key" : "Filter-Filter-New",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Filter",
"hide"
],
"key" : "Filter-Filter-hide",
"size" : 1
}
],
"name" : [
"Filter",
"Filter"
],
"key" : "Filter-Filter",
"size" : 32
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Save",
"Query"
],
"key" : "Filter-Save-Query",
"size" : 1
}
],
"name" : [
"Filter",
"Save"
],
"key" : "Filter-Save",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"Undo",
"Undo"
],
"key" : "Filter-Undo-Undo",
"size" : 1
}
],
"name" : [
"Filter",
"Undo"
],
"key" : "Filter-Undo",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"hide",
"Remove"
],
"key" : "Filter-hide-Remove",
"size" : 1
}
],
"name" : [
"Filter",
"hide"
],
"key" : "Filter-hide",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Filter",
"New",
"Query"
],
"key" : "Filter-New-Query",
"size" : 1
}
],
"name" : [
"Filter",
"New"
],
"key" : "Filter-New",
"size" : 1
}
],
"name" : [
"Filter"
],
"key" : "Filter",
"size" : 36
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Annotate",
"Annotate"
],
"key" : "Annotate-Annotate-Annotate",
"size" : 15
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Annotate",
"Resize"
],
"key" : "Annotate-Annotate-Resize",
"size" : 3
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Annotate",
"Bookmark"
],
"key" : "Annotate-Annotate-Bookmark",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Annotate",
"Move"
],
"key" : "Annotate-Annotate-Move",
"size" : 1
}
],
"name" : [
"Annotate",
"Annotate"
],
"key" : "Annotate-Annotate",
"size" : 20
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Resize",
"Resize"
],
"key" : "Annotate-Resize-Resize",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Resize",
"Undo"
],
"key" : "Annotate-Resize-Undo",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Resize",
"Move"
],
"key" : "Annotate-Resize-Move",
"size" : 1
}
],
"name" : [
"Annotate",
"Resize"
],
"key" : "Annotate-Resize",
"size" : 3
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Move",
"Annotate"
],
"key" : "Annotate-Move-Annotate",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Move",
"Move"
],
"key" : "Annotate-Move-Move",
"size" : 1
}
],
"name" : [
"Annotate",
"Move"
],
"key" : "Annotate-Move",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Bookmark",
"Save"
],
"key" : "Annotate-Bookmark-Save",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Annotate",
"Bookmark",
"New"
],
"key" : "Annotate-Bookmark-New",
"size" : 1
}
],
"name" : [
"Annotate",
"Bookmark"
],
"key" : "Annotate-Bookmark",
"size" : 2
}
],
"name" : [
"Annotate"
],
"key" : "Annotate",
"size" : 27
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Undo",
"Undo"
],
"key" : "Undo-Undo-Undo",
"size" : 3
},
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Undo",
"Query"
],
"key" : "Undo-Undo-Query",
"size" : 2
},
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Undo",
"Save"
],
"key" : "Undo-Undo-Save",
"size" : 1
}
],
"name" : [
"Undo",
"Undo"
],
"key" : "Undo-Undo",
"size" : 6
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Annotate",
"Annotate"
],
"key" : "Undo-Annotate-Annotate",
"size" : 2
}
],
"name" : [
"Undo",
"Annotate"
],
"key" : "Undo-Annotate",
"size" : 2
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Query",
"Query"
],
"key" : "Undo-Query-Query",
"size" : 1
},
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Query",
"View"
],
"key" : "Undo-Query-View",
"size" : 1
}
],
"name" : [
"Undo",
"Query"
],
"key" : "Undo-Query",
"size" : 2
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"New",
"Query"
],
"key" : "Undo-New-Query",
"size" : 1
}
],
"name" : [
"Undo",
"New"
],
"key" : "Undo-New",
"size" : 1
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Calculate",
"Query"
],
"key" : "Undo-Calculate-Query",
"size" : 1
}
],
"name" : [
"Undo",
"Calculate"
],
"key" : "Undo-Calculate",
"size" : 1
},
{
"colorCode" : "Meta Actions",
"name" : [
"Undo",
"Save"
],
"key" : "Undo-Save",
"size" : 1
}
],
"name" : [
"Undo"
],
"key" : "Undo",
"size" : 13
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Move",
"Move"
],
"key" : "Move-Move-Move",
"size" : 2
},
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Move",
"Restore"
],
"key" : "Move-Move-Restore",
"size" : 1
},
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Move",
"Resize"
],
"key" : "Move-Move-Resize",
"size" : 1
}
],
"name" : [
"Move",
"Move"
],
"key" : "Move-Move",
"size" : 4
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Annotate",
"Bookmark"
],
"key" : "Move-Annotate-Bookmark",
"size" : 1
},
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Annotate",
"Move"
],
"key" : "Move-Annotate-Move",
"size" : 1
}
],
"name" : [
"Move",
"Annotate"
],
"key" : "Move-Annotate",
"size" : 2
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Resize",
"Resize"
],
"key" : "Move-Resize-Resize",
"size" : 1
}
],
"name" : [
"Move",
"Resize"
],
"key" : "Move-Resize",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Restore",
"Bookmark"
],
"key" : "Move-Restore-Bookmark",
"size" : 1
}
],
"name" : [
"Move",
"Restore"
],
"key" : "Move-Restore",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Move",
"Modify",
"Modify"
],
"key" : "Move-Modify-Modify",
"size" : 1
}
],
"name" : [
"Move",
"Modify"
],
"key" : "Move-Modify",
"size" : 1
}
],
"name" : [
"Move"
],
"key" : "Move",
"size" : 9
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Resize",
"Resize",
"Annotate"
],
"key" : "Resize-Resize-Annotate",
"size" : 2
},
{
"colorCode" : "App Actions",
"name" : [
"Resize",
"Resize",
"Resize"
],
"key" : "Resize-Resize-Resize",
"size" : 2
}
],
"name" : [
"Resize",
"Resize"
],
"key" : "Resize-Resize",
"size" : 4
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Resize",
"Annotate",
"Annotate"
],
"key" : "Resize-Annotate-Annotate",
"size" : 2
}
],
"name" : [
"Resize",
"Annotate"
],
"key" : "Resize-Annotate",
"size" : 2
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Resize",
"Undo",
"Annotate"
],
"key" : "Resize-Undo-Annotate",
"size" : 1
}
],
"name" : [
"Resize",
"Undo"
],
"key" : "Resize-Undo",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Resize",
"Move",
"Annotate"
],
"key" : "Resize-Move-Annotate",
"size" : 1
}
],
"name" : [
"Resize",
"Move"
],
"key" : "Resize-Move",
"size" : 1
}
],
"name" : [
"Resize"
],
"key" : "Resize",
"size" : 8
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Query",
"Move"
],
"key" : "Bookmark-Query-Move",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Query",
"Filter"
],
"key" : "Bookmark-Query-Filter",
"size" : 1
}
],
"name" : [
"Bookmark",
"Query"
],
"key" : "Bookmark-Query",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Bookmark",
"Bookmark"
],
"key" : "Bookmark-Bookmark-Bookmark",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Bookmark",
"Query"
],
"key" : "Bookmark-Bookmark-Query",
"size" : 1
}
],
"name" : [
"Bookmark",
"Bookmark"
],
"key" : "Bookmark-Bookmark",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Edit",
"Query"
],
"key" : "Bookmark-Edit-Query",
"size" : 1
}
],
"name" : [
"Bookmark",
"Edit"
],
"key" : "Bookmark-Edit",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"New",
"Query"
],
"key" : "Bookmark-New-Query",
"size" : 1
}
],
"name" : [
"Bookmark",
"New"
],
"key" : "Bookmark-New",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Bookmark",
"Save",
"New"
],
"key" : "Bookmark-Save-New",
"size" : 1
}
],
"name" : [
"Bookmark",
"Save"
],
"key" : "Bookmark-Save",
"size" : 1
}
],
"name" : [
"Bookmark"
],
"key" : "Bookmark",
"size" : 7
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Calculate",
"Query",
"Query"
],
"key" : "Calculate-Query-Query",
"size" : 3
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Calculate",
"Query",
"Show"
],
"key" : "Calculate-Query-Show",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Calculate",
"Query",
"Undo"
],
"key" : "Calculate-Query-Undo",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"name" : [
"Calculate",
"Query",
"Remove"
],
"key" : "Calculate-Query-Remove",
"size" : 1
}
],
"name" : [
"Calculate",
"Query"
],
"key" : "Calculate-Query",
"size" : 6
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Calculate",
"Change-Metaphor",
"Undo"
],
"key" : "Calculate-Change-Metaphor-Undo",
"size" : 1
}
],
"name" : [
"Calculate",
"Change-Metaphor"
],
"key" : "Calculate-Change-Metaphor",
"size" : 1
}
],
"name" : [
"Calculate"
],
"key" : "Calculate",
"size" : 7
},
{
"colorCode" : "Task Actions",
"children" : [
{
"colorCode" : "Task Actions",
"children" : [
{
"colorCode" : "Task Actions",
"name" : [
"New",
"Query",
"Query"
],
"key" : "New-Query-Query",
"size" : 4
},
{
"colorCode" : "Task Actions",
"name" : [
"New",
"Query",
"Calculate"
],
"key" : "New-Query-Calculate",
"size" : 1
},
{
"colorCode" : "Task Actions",
"name" : [
"New",
"Query",
"Show"
],
"key" : "New-Query-Show",
"size" : 1
},
{
"colorCode" : "Task Actions",
"name" : [
"New",
"Query",
"Bookmark"
],
"key" : "New-Query-Bookmark",
"size" : 1
}
],
"name" : [
"New",
"Query"
],
"key" : "New-Query",
"size" : 7
}
],
"name" : [
"New"
],
"key" : "New",
"size" : 7
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Connect",
"Connect",
"Query"
],
"key" : "Connect-Connect-Query",
"size" : 1
},
{
"colorCode" : "App Actions",
"name" : [
"Connect",
"Connect",
"Connect"
],
"key" : "Connect-Connect-Connect",
"size" : 1
},
{
"colorCode" : "App Actions",
"name" : [
"Connect",
"Connect",
"Analyze"
],
"key" : "Connect-Connect-Analyze",
"size" : 1
}
],
"name" : [
"Connect",
"Connect"
],
"key" : "Connect-Connect",
"size" : 3
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Connect",
"Analyze",
"Extract"
],
"key" : "Connect-Analyze-Extract",
"size" : 1
}
],
"name" : [
"Connect",
"Analyze"
],
"key" : "Connect-Analyze",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Connect",
"Query",
"Query"
],
"key" : "Connect-Query-Query",
"size" : 1
}
],
"name" : [
"Connect",
"Query"
],
"key" : "Connect-Query",
"size" : 1
}
],
"name" : [
"Connect"
],
"key" : "Connect",
"size" : 5
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Remove",
"Remove",
"Remove"
],
"key" : "Remove-Remove-Remove",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"name" : [
"Remove",
"Remove",
"Move"
],
"key" : "Remove-Remove-Move",
"size" : 1
}
],
"name" : [
"Remove",
"Remove"
],
"key" : "Remove-Remove",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Remove",
"Move",
"Move"
],
"key" : "Remove-Move-Move",
"size" : 1
}
],
"name" : [
"Remove",
"Move"
],
"key" : "Remove-Move",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Remove",
"Query",
"Calculate"
],
"key" : "Remove-Query-Calculate",
"size" : 1
}
],
"name" : [
"Remove",
"Query"
],
"key" : "Remove-Query",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Remove",
"Calculate",
"Query"
],
"key" : "Remove-Calculate-Query",
"size" : 1
}
],
"name" : [
"Remove",
"Calculate"
],
"key" : "Remove-Calculate",
"size" : 1
}
],
"name" : [
"Remove"
],
"key" : "Remove",
"size" : 5
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"View",
"Filter",
"Filter"
],
"key" : "View-Filter-Filter",
"size" : 1
}
],
"name" : [
"View",
"Filter"
],
"key" : "View-Filter",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"View",
"View",
"Restore"
],
"key" : "View-View-Restore",
"size" : 1
}
],
"name" : [
"View",
"View"
],
"key" : "View-View",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"View",
"Restore",
"Query"
],
"key" : "View-Restore-Query",
"size" : 1
}
],
"name" : [
"View",
"Restore"
],
"key" : "View-Restore",
"size" : 1
}
],
"name" : [
"View"
],
"key" : "View",
"size" : 3
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Save",
"New",
"Query"
],
"key" : "Save-New-Query",
"size" : 1
}
],
"name" : [
"Save",
"New"
],
"key" : "Save-New",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Save",
"Query",
"Filter"
],
"key" : "Save-Query-Filter",
"size" : 1
}
],
"name" : [
"Save",
"Query"
],
"key" : "Save-Query",
"size" : 1
}
],
"name" : [
"Save"
],
"key" : "Save",
"size" : 3
},
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"children" : [
{
"colorCode" : "Meta Actions",
"name" : [
"Edit",
"Query",
"New"
],
"key" : "Edit-Query-New",
"size" : 2
}
],
"name" : [
"Edit",
"Query"
],
"key" : "Edit-Query",
"size" : 2
}
],
"name" : [
"Edit"
],
"key" : "Edit",
"size" : 2
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Restore",
"Bookmark",
"Bookmark"
],
"key" : "Restore-Bookmark-Bookmark",
"size" : 1
}
],
"name" : [
"Restore",
"Bookmark"
],
"key" : "Restore-Bookmark",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Restore",
"Query",
"Query"
],
"key" : "Restore-Query-Query",
"size" : 1
}
],
"name" : [
"Restore",
"Query"
],
"key" : "Restore-Query",
"size" : 1
}
],
"name" : [
"Restore"
],
"key" : "Restore",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Modify",
"Modify",
"Filter"
],
"key" : "Modify-Modify-Filter",
"size" : 1
}
],
"name" : [
"Modify",
"Modify"
],
"key" : "Modify-Modify",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"Modify",
"Filter",
"Filter"
],
"key" : "Modify-Filter-Filter",
"size" : 1
}
],
"name" : [
"Modify",
"Filter"
],
"key" : "Modify-Filter",
"size" : 1
}
],
"name" : [
"Modify"
],
"key" : "Modify",
"size" : 2
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Show",
"Edit",
"Query"
],
"key" : "Show-Edit-Query",
"size" : 1
}
],
"name" : [
"Show",
"Edit"
],
"key" : "Show-Edit",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Show",
"Query",
"Query"
],
"key" : "Show-Query-Query",
"size" : 1
}
],
"name" : [
"Show",
"Query"
],
"key" : "Show-Query",
"size" : 1
}
],
"name" : [
"Show"
],
"key" : "Show",
"size" : 2
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"hide",
"Remove",
"Remove"
],
"key" : "hide-Remove-Remove",
"size" : 1
}
],
"name" : [
"hide",
"Remove"
],
"key" : "hide-Remove",
"size" : 1
},
{
"colorCode" : "Insight Actions",
"children" : [
{
"colorCode" : "Insight Actions",
"name" : [
"hide",
"Query",
"View"
],
"key" : "hide-Query-View",
"size" : 1
}
],
"name" : [
"hide",
"Query"
],
"key" : "hide-Query",
"size" : 1
}
],
"name" : [
"hide"
],
"key" : "hide",
"size" : 2
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Analyze",
"Extract",
"New"
],
"key" : "Analyze-Extract-New",
"size" : 1
}
],
"name" : [
"Analyze",
"Extract"
],
"key" : "Analyze-Extract",
"size" : 1
}
],
"name" : [
"Analyze"
],
"key" : "Analyze",
"size" : 1
},
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"children" : [
{
"colorCode" : "App Actions",
"name" : [
"Extract",
"New",
"Query"
],
"key" : "Extract-New-Query",
"size" : 1
}
],
"name" : [
"Extract",
"New"
],
"key" : "Extract-New",
"size" : 1
}
],
"name" : [
"Extract"
],
"key" : "Extract",
"size" : 1
},
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"children" : [
{
"colorCode" : "Exploration Actions",
"name" : [
"Change-Metaphor",
"Undo",
"Annotate"
],
"key" : "Change-Metaphor-Undo-Annotate",
"size" : 1
}
],
"name" : [
"Change-Metaphor",
"Undo"
],
"key" : "Change-Metaphor-Undo",
"size" : 1
}
],
"name" : [
"Change-Metaphor"
],
"key" : "Change-Metaphor",
"size" : 1
}
],
"name" : "assignment/ass1-anna-activities",
"size" : 198
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
/*stroke: steelblue;*/
opacity: 0.3;
/*stroke-width: 1.5px;*/
}
#levels{
margin-left: 120px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script></script>
<button type="button" onclick="collapseAll()">Collapse All</button>
<button type="button" onclick="expandAll()">Expand All</button>
<div id="viz"></div>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 1060 - margin.right - margin.left,
height = 1200 - margin.top - margin.bottom;
var i = 0,
duration = 750,// animation duration
root;// stores the tree structure in json format
var tree = d3.layout.tree()
.size([height, width]);
var edge_weight = d3.scale.linear()
.domain([0, 100])
.range([0, 100]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
// adding the svg to the html structure
var svg = d3.select("div#viz").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//loading the json file
d3.json("data.json", function(error, flare) {
edge_weight.domain([0,flare.size]);
root = flare;
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
update(root);
});
d3.select(self.frameElement).style("height", "800px");
/**
* Updates the node.
* cloppases and expands the node bases on the structure of the source
* all 'children' nodes are expanded and '_children' nodes collapsed
* @param {json structure} source
*/
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.text(function(d) { return d.key; })
.style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("circle")
.attr("r", function(d){ return edge_weight(d.size/2);})
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
.remove();
nodeExit.select("circle")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("stroke-width", function(d){
return 1;
})
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.attr("stroke", function(d){
return linkColor(d.target.colorCode);});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function(d){
/* calculating the top shift */
var source = {x: d.source.x - edge_weight(calculateLinkSourcePosition(d)), y: d.source.y};
var target = {x: d.target.x, y: d.target.y};
return diagonal({source: source, target: target});
})
.attr("stroke-width", function(d){
return edge_weight(d.target.size);
});
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
/**
* Calculates the source y-axis position of the link.
* @param {json structure} link
*/
function calculateLinkSourcePosition(link) {
targetID = link.target.id;
var childrenNumber = link.source.children.length;
var widthAbove = 0;
for (var i = 0; i < childrenNumber; i++)
{
if (link.source.children[i].id == targetID)
{
// we are done
widthAbove = widthAbove + link.source.children[i].size/2;
break;
}else {
// keep adding
widthAbove = widthAbove + link.source.children[i].size
}
}
return link.source.size/2 - widthAbove;
}
/*
* Toggle children on click.
* @param {node} d
*/
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
/*
* Collapses the node d and all the children nodes of d
* @param {node} d
*/
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
/*
* Collapses the node in the tree
*/
function collapseAll() {
root.children.forEach(collapse);
update(root);
}
/*
* Expands the node d and all the children nodes of d
* @param {node} d
*/
function expand(d) {
if (d._children) {
d.children = d._children;
d._children = null;
}
if (d.children) {
d.children.forEach(expand);
}
}
/*
* Expands all the nodes in the tree
*/
function expandAll() {
root.children.forEach(expand);
update(root);
}
/*
* dictionary of colors corresponding to the different color categories
* defaults to a generic blue if there are no defined color categories
* in the data set
*/
function linkColor(linkCode) {
switch (linkCode)
{
case 'Exploration Actions':
return '#0000FF';//blue
break;
case 'Task Actions':
return '#FF7F00';//orange
break;
case 'App Actions':
return '#FF0000';//red
break;
case 'Insight Actions':
return '#7F007F';//purple
break;
case 'Meta Actions':
return '#00FFFF';//cyan
break;
default:
return '#0950D0';//generic blue
break;
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment