Built with blockbuilder.org
Last active
January 25, 2018 16:24
-
-
Save sytpp/6089bf98eda20ebf313eb5840df2f55a to your computer and use it in GitHub Desktop.
Dendrogram | Searchable Org Chart
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
license: mit |
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
within | id | line_manager | product | job_family | job_title | location | what_i_do | skills | ||
---|---|---|---|---|---|---|---|---|---|---|
acme | Homer Simpson | something | CEO | CEO | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 001 | ||
acme | Ned Stark | Homer Simpson | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 002 | |
acme | Ash Ketchum | Don Draper | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 003 | |
acme | Tony Stark | Homer Simpson | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 004 | |
acme | Don Draper | Leslie Knope | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 005 | |
acme | Borat | Tony Stark | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 006 | |
acme | Master Chief | Ned Stark | something | IT | IT | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 007 | |
acme | Shrek | Ned Stark | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 008 | |
acme | Winnie the Pooh | Master Chief | something | IT | IT | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 009 | |
acme | Wonder Woman | Homer Simpson | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 010 | |
acme | Stewie Griffin | Homer Simpson | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 011 | |
acme | Gollum | Stewie Griffin | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 012 | |
acme | Jack Sparrow | Gollum | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 013 | |
acme | Hermione Granger | Homer Simpson | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 014 | |
acme | Forrest Gump | Hermione Granger | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 015 | |
acme | Sherlock Holmes | Hermione Granger | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 016 | |
acme | Atticus Finch | Gollum | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 017 | |
acme | Scarlett O'Hara | Don Draper | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 018 | |
acme | Mulan | Tony Stark | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 019 | |
acme | Minnie Mouse | Tony Stark | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 020 | |
acme | Liz Lemon | Wonder Woman | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 021 | |
acme | Leslie Knope | Homer Simpson | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 022 | |
acme | The Little Prince | Sherlock Holmes | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 023 | |
acme | Lucille Bluth | Sherlock Holmes | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 024 | |
acme | Cookie Monster | Wonder Woman | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 025 | |
acme | Bob the Builder | Mulan | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 026 | |
acme | Captain Ahab | Ned Stark | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 027 | |
acme | Nancy Drew | Shrek | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 028 | |
acme | Gilgamesh | Hermione Granger | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 029 | |
acme | Lady Macbeth | Leslie Knope | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 030 | |
acme | Ebenezer Scrooge | Gollum | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 031 | |
acme | Tim Riggins | Don Draper | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 032 | |
acme | Frasier | Mulan | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 033 | |
acme | Edward Scissorhands | Shrek | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 034 | |
acme | Buffy | Gollum | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 035 | |
acme | Carrie Bradshaw | Leslie Knope | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 036 | |
acme | HAL 9000 | Sherlock Holmes | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 037 | |
acme | R2D2 | Wonder Woman | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 038 | |
acme | Astro Boy | Gollum | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 039 | |
acme | Godzilla | Master Chief | something | IT | IT | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 040 | |
acme | Sir Lancelot | Nancy Drew | something | HR | HR | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 041 | |
acme | The Cat in The Hat | Stewie Griffin | something | Sales | Sales | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 042 | |
acme | James Bond | Sherlock Holmes | something | R&D | R&D | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 043 | |
acme | Snow White | Minnie Mouse | something | Engineering | Engineering | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 044 | |
acme | Vault Dweller | Lady Macbeth | something | Marketing | Marketing | location | example@acme.com | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | skill 1 . Proin quis maximus ligula. Etiam aliquam dui quis enim sodales mollis. Praesent molestie lectus sed justo pharetra, ut laoreet lorem varius. Skill 2. skill 3 . Skill 405 . Skill 345793845 . Skill 045 |
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
<!-- // from https://bl.ocks.org/cjhin/7023f2df4f9165b6e4ed8e07ab7b968a --> | |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<link rel="stylesheet" href="style.css"> | |
<script src="d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="http://colorbrewer2.org/export/colorbrewer.js"></script> | |
</head> | |
<body> | |
<fieldset class="field_set"> | |
<form name="myform" onSubmit="return handleClickSearch()"> | |
<input name="Submit" type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search"> | |
<input type="text" id="mySearchTerm" size="55" style="font-size: 14px;" placeholder="search in added information e.g. skill 02 or NLP"> | |
<input name="Submit" type="submit" size="30" style="font-size: 14px;" color="#fff" value="Search"> | |
</form> | |
</fieldset> | |
<div class="container"> | |
<svg id="chart"></svg> | |
<div class="ontheright"> | |
<svg id="legend"><svg> | |
<div id="infodiv"></div> | |
</div> | |
</div> | |
<script src="script.js"></script> | |
</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
var cHeight = 800; | |
var cWidth = 700; | |
// Prepare our physical space | |
var canvas = d3 | |
.select("#chart") | |
.attr("width", cWidth) | |
.attr("height", cHeight) | |
.attr("transform", "translate(" + 10 + "," + 0 + ")"); | |
var g = canvas | |
.append("g") | |
.attr("transform", "translate(" + 120 + "," + 0 + ")"); | |
// Define 'div' for tooltips | |
var infodiv = d3.select("#infodiv").attr("opacity", 0); | |
var color = d3.scaleOrdinal(d3.schemeCategory10); | |
function loadAndPrepareData(filter) { | |
d3.csv("data.csv", function(error, csvData) { | |
if (error) throw error; | |
var massagedData = []; | |
if (filter) { | |
massagedData = csvData.map(function(d) { | |
var highlight = | |
d.skills.toLowerCase().search(filter) != -1 || | |
d.what_i_do.toLowerCase().search(filter) != -1 || | |
d.within.toLowerCase().search(filter) != -1 | |
? true | |
: false; | |
return { d: d, highlight: highlight }; | |
}); | |
} else { | |
massagedData = csvData.map(function(d) { | |
return { d: d, highlight: false }; | |
}); | |
} | |
var colorData = Array.from( | |
new Set( | |
csvData.map(function(d) { | |
return d.job_family; | |
}) | |
) | |
).sort(function(a, b) { | |
return a.localeCompare(b); | |
}); | |
//console.log(csvData) | |
//console.log(massagedData) | |
drawViz(massagedData); | |
//console.log(colorData) | |
drawLegend(colorData); | |
}); | |
} | |
function drawLegend(colorData) { | |
d3 | |
.select("#legend") | |
.selectAll("g") | |
.html(""); | |
var legendDotSize = 30; | |
var legendWrapper = d3 | |
.select("#legend") | |
.append("g") | |
.attr("class", "legend"); | |
// The text of the legend | |
var legendText = legendWrapper.selectAll("text").data(colorData); | |
legendText | |
.enter() | |
.append("text") | |
.attr("y", function(d, i) { | |
return i * legendDotSize + 12; | |
}) | |
.attr("x", 20) | |
.merge(legendText) | |
.text(function(d) { | |
return d; | |
}); | |
// The dots of the legend | |
var legendDot = legendWrapper.selectAll("rect").data(colorData); | |
legendDot | |
.enter() | |
.append("rect") | |
.attr("y", function(d, i) { | |
return i * legendDotSize; | |
}) | |
.attr("rx", legendDotSize * 0.5) | |
.attr("ry", legendDotSize * 0.5) | |
.attr("width", legendDotSize * 0.5) | |
.attr("height", legendDotSize * 0.5) | |
.merge(legendDot) | |
.style("fill", function(d) { | |
return color(d); | |
}); | |
} | |
function drawViz(data) { | |
d3 | |
.select("#chart") | |
.selectAll("g") | |
.html(""); | |
var stratify = d3 | |
.stratify() | |
.id(function(d) { | |
return d.d.id; | |
}) | |
.parentId(function(d) { | |
return d.d.line_manager; | |
}); | |
var tree; | |
tree = d3.cluster().size([cHeight, cWidth]); // height, width | |
var root = stratify(data).sort(function(a, b) { | |
return ( | |
a.data.d.job_family.localeCompare(b.data.d.job_family) || | |
b.height - a.height | |
); | |
}); | |
tree(root); | |
//console.log(root); | |
var link = g.selectAll(".link").data(root.descendants().slice(1)); | |
link | |
.enter() | |
.append("path") | |
.attr("class", "link") | |
.merge(link) | |
.attr("d", function(d) { | |
return ( | |
"M" + | |
d.y + | |
"," + | |
d.x + | |
"C" + | |
(d.parent.y + 100) + | |
"," + | |
d.x + | |
" " + | |
(d.parent.y + 100) + | |
"," + | |
d.parent.x + | |
" " + | |
d.parent.y + | |
"," + | |
d.parent.x | |
); | |
}); | |
var node = g.selectAll(".node").data(root.descendants()); | |
node.group = node | |
.enter() | |
.append("g") | |
.attr("class", function(d) { | |
return "node" + (d.children ? " node--internal" : " node--leaf"); | |
}); | |
node.group.merge(node).attr("transform", function(d) { | |
return "translate(" + d.y + "," + d.x + ")"; | |
}); | |
node.group | |
.append("circle") | |
.attr("r", function(d) { | |
return d.data.highlight ? 15 : 10; | |
}) | |
.attr("fill", function(d) { | |
return color(d.data.d.job_family); | |
}) | |
.attr("stroke", "white") | |
.attr("opacity", function(d) { | |
return d.data.highlight ? 1 : 0.7; | |
}); | |
// MOUSEOVER EVENTS - Tooltip stuff after this etc | |
var people = d3.selectAll("circle"); | |
people.on("mouseover", function(d) { | |
d3 | |
.select(this) | |
.transition() | |
.duration(200) | |
.attr("r", function(d) { | |
return d.data.highlight ? 20 : 15; | |
}); | |
infodiv.html( | |
"<big><b>" + | |
d.data.d.id + | |
"</b></big><br>" + | |
d.data.d.job_title + | |
"<br>" + | |
d.data.d.job_family + | |
"<br>" + | |
"Reporting to: " + | |
d.data.d.line_manager + | |
"<br>" + | |
"<br>-----<br><br>" + | |
"ADDED INFORMATION<br>" + | |
"<br><big><b>" + | |
d.data.d.within + | |
"</b></big><br><br>" + | |
"<b>What I do</b><br>" + | |
d.data.d.what_i_do + | |
"<br>" + | |
"<br>" + | |
"<b>Skills</b><br>" + | |
d.data.d.skills + | |
"<br>" + | |
"<br>" + | |
"<b>Contact</b><br>" + | |
d.data.d.email + | |
"<br>" + | |
d.data.d.location + | |
"<br>" | |
); | |
}); | |
people.on("mouseout", function() { | |
d3 | |
.select(this) | |
.transition() | |
.duration(200) | |
.attr("r", function(d) { | |
return d.data.highlight ? 15 : 10; | |
}); | |
}); | |
node.group | |
.append("text") | |
.text(function(d) { | |
return d.data.d.id; | |
}) | |
.merge(node.select("text")) | |
.attr("dy", function(d) { | |
return d.children ? -15 : 10; | |
}) | |
.attr("x", function(d) { | |
return d.children ? -1 * (this.getBBox().width + -15) : 25; | |
}) | |
.attr("font-weight", function(d) { | |
return d.data.highlight ? "bold" : "normal"; | |
}); | |
} | |
// Search | |
function handleClickSearch(event) { | |
currentSearchTerm = document | |
.getElementById("mySearchTerm") | |
.value.toLowerCase(); | |
//console.log(currentSearchTerm) | |
loadAndPrepareData(currentSearchTerm); | |
return false; | |
} | |
loadAndPrepareData(); |
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
body { | |
font-family: sans-serif; | |
} | |
text { | |
font: 12px sans-serif; | |
} | |
fieldset.field_set { | |
border: 0px; | |
} | |
.node text { | |
font: 12px sans-serif; | |
} | |
.node--internal text { | |
/*text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;*/ | |
} | |
.link { | |
fill: none; | |
stroke: #555; | |
stroke-opacity: 0.4; | |
stroke-width: 1.5px; | |
} | |
.container { | |
display: flex; | |
flex-direction: row; | |
width: 100%; | |
} | |
#chart { | |
width: 70%; | |
padding-right: 50px; | |
} | |
.ontheright{ | |
display: flex; | |
flex-direction: column; | |
width: 20%; | |
/*height: 100%;*/ | |
} | |
#infodiv { | |
height:60%; | |
padding-left: : 10px; | |
padding-top: 20px; | |
font: 12px sans-serif; | |
} | |
#legend { | |
height: 40%; | |
overflow: visible; | |
padding-left: : 10px; | |
padding-bottom: 20px; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment