HTML5/JS Pedigree

1,781 views
Skip to first unread message

Dovy Paukstys

unread,
Aug 2, 2012, 3:16:38 PM8/2/12
to root...@googlegroups.com
I've been meaning to post this for nearly three months. I'm cleaning up the code, but I'm releasing this HTML5/Pedigree open source.


Give it a try. You can switch views, zoom, pan, recenter, and switch orientation. Here's the GitHub: https://github.com/dovy/Pedigree-Viewer. I'll finish cleaning up all the code later this week. Give me your input.  :)

Justin York

unread,
Aug 2, 2012, 3:24:41 PM8/2/12
to root...@googlegroups.com
You are really good at visual design.

Does it load the entire tree at once?

--
 
 
 

Dovy Paukstys

unread,
Aug 2, 2012, 3:33:16 PM8/2/12
to root...@googlegroups.com
It's all run off a little json file. http://tree.sharingtime.com/data.json    I can actually display 20 generations. 

Here it is really ugly, but fully functional: http://dovy.github.com/Pedigree-Viewer/tree/html/descendantChart.html


Let me finish cleaning up the code and sticking in new HTML.  ;)

Dovy Paukstys

unread,
Aug 2, 2012, 3:36:54 PM8/2/12
to root...@googlegroups.com
Something that's really nice is the ancestry path highlighting. You can see how each person you hover came to be as well as all of their descendants.  ;)


On Thursday, August 2, 2012 1:33:16 PM UTC-6, Dovy Paukstys wrote:
It's all run off a little json file. http://tree.sharingtime.com/data.json    I can actually display 20 generations. 

Here it is really ugly, but fully functional: http://dovy.github.com/Pedigree-Viewer/tree/html/descendantChart.html


Let me finish cleaning up the code and sticking in new HTML.  ;)


On Thursday, August 2, 2012 1:24:41 PM UTC-6, Justin York wrote:
You are really good at visual design.

Does it load the entire tree at once?

Justin York

unread,
Aug 2, 2012, 3:39:53 PM8/2/12
to root...@googlegroups.com
I remember seeing one somewhere that lazy-loaded. It was very nice. I thought it was WebTrees but that appears to be incorrect.

--
 
 
 

Dallan Quass

unread,
Aug 2, 2012, 3:51:03 PM8/2/12
to root...@googlegroups.com
WeRelate's is lazy-loaded. When you click on the + signs, an ajax call
is made to get additional generations. That lets it handle very large
trees and allows people to expand the lines that they're most interested
in, but means you need a server.

-dallan
http://www.werelate.org/wiki/User:Dallan

On 8/2/2012 2:39 PM, Justin York wrote:
> I remember seeing one somewhere that lazy-loaded. It was /very/ nice. I
> thought it was WebTrees <http://webtrees.net/> but that appears to be
> incorrect.
>
> On Thu, Aug 2, 2012 at 1:36 PM, Dovy Paukstys <do...@rtcollab.com
> <mailto:do...@rtcollab.com>> wrote:
>
> Something that's really nice is the ancestry path highlighting. You
> can see how each person you hover came to be as well as all of their
> descendants. ;)
>
>
> On Thursday, August 2, 2012 1:33:16 PM UTC-6, Dovy Paukstys wrote:
>
> It's all run off a little json file.
> http://tree.sharingtime.__com/data.json
> <http://tree.sharingtime.com/data.json> I can actually
> display 20 generations.
>
> Here it is really ugly, but fully functional:
> http://dovy.github.com/__Pedigree-Viewer/tree/html/__descendantChart.html
> <http://dovy.github.com/Pedigree-Viewer/tree/html/descendantChart.html>
>
> http://dovy.github.com/__Pedigree-Viewer/tree/html/
> <http://dovy.github.com/Pedigree-Viewer/tree/html/>
>
> Let me finish cleaning up the code and sticking in new HTML. ;)
>
>
> On Thursday, August 2, 2012 1:24:41 PM UTC-6, Justin York wrote:
>
> You are really good at visual design.
>
> Does it load the entire tree at once?
>
> On Thu, Aug 2, 2012 at 1:16 PM, Dovy Paukstys wrote:
>
> I've been meaning to post this for nearly three months.
> I'm cleaning up the code, but I'm releasing this
> HTML5/Pedigree open source.
>
> http://tree.sharingtime.com/?__ctype=descendant#h
> <http://tree.sharingtime.com/?ctype=descendant#h>
>
> Give it a try. You can switch views, zoom, pan,
> recenter, and switch orientation. Here's the GitHub:
> https://github.com/dovy/__Pedigree-Viewer
> <https://github.com/dovy/Pedigree-Viewer>. I'll finish
> cleaning up all the code later this week. Give me your
> input. :)
>
> --
>
>
>
>
> --
>
>
>
>
> --
>
>
>

Dovy Paukstys

unread,
Aug 2, 2012, 4:00:50 PM8/2/12
to root...@googlegroups.com
Dallan:
A server is not required truly for any of this, it's based off one JSON file. WeRelate has an advantage because you can load more branches at this time though I suspect this viewer could be modified to do the same.

I'll try to get a functioning code push later today showcasing all the options.

Justin York

unread,
Aug 2, 2012, 4:00:45 PM8/2/12
to root...@googlegroups.com
That is a nice improvement. Can it be configured to load more than one generation at once? Like how the FamilySearch's Family Tree does it.

But what I meant by lazy-loading is that it automatically loaded more generations when you moved around -- no click required. I wish I could remember where I saw that...

--




Dovy Paukstys

unread,
Aug 2, 2012, 4:26:40 PM8/2/12
to root...@googlegroups.com
Justin:
Dallan's work is very similar to FamilySearch. Click to expand a generation. He's done great work.

The pedigree viewer I am releasing is more based off, take a json file and display it. I want to do the expanding, but it was more focused on features such as smooth scale, pan, zoom, recenter, orientation, bowtie-view, path highlighting, backwards compatibility, large tree display, etc.

Both pedigrees have different feature sets. I only wish we had worked together on the same pedigree to make one have it all!  :)

Dallan Quass

unread,
Aug 2, 2012, 4:56:51 PM8/2/12
to root...@googlegroups.com
You can certainly configure it to load more than one generation at once.
That's just a setting.

Lazy loading by moving around is tricky. As you moved right to show
later generations, the earlier generations need to spread apart (up and
down) so that they stay horizontally-aligned with the later generations.
Then as you move left, you'd want the earlier generations to come
closer together again. Not saying it couldn't be done, but it would be
tricky to get right. Using something like a hypertree might be
interesting; for example:
http://thejit.org/static/v20/Jit/Examples/Hypertree/example1.html

-dallan
http://www.werelate.org/wiki/User:Dallan

On 8/2/2012 3:00 PM, Justin York wrote:
> That is a nice improvement. Can it be configured to load more than one
> generation at once? Like how the FamilySearch's Family Tree does it.
>
> But what I meant by lazy-loading is that it automatically loaded more
> generations when you moved around -- no click required. I wish I could
> remember where I saw that...
>
> On Thu, Aug 2, 2012 at 1:51 PM, Dallan Quass <dal...@gmail.com
> <mailto:dal...@gmail.com>> wrote:
>
> WeRelate's is lazy-loaded. When you click on the + signs, an ajax
> call is made to get additional generations. That lets it handle
> very large trees and allows people to expand the lines that they're
> most interested in, but means you need a server.
>
> -dallan
> http://www.werelate.org/wiki/__User:Dallan
> <http://www.werelate.org/wiki/User:Dallan>
>
> On 8/2/2012 2:39 PM, Justin York wrote:
>
> I remember seeing one somewhere that lazy-loaded. It was /very/
> nice. I
> thought it was WebTrees <http://webtrees.net/> but that appears
> to be
>
> incorrect.
>
> On Thu, Aug 2, 2012 at 1:36 PM, Dovy Paukstys <do...@rtcollab.com
> <mailto:do...@rtcollab.com>
> <mailto:do...@rtcollab.com <mailto:do...@rtcollab.com>>> wrote:
>
> Something that's really nice is the ancestry path
> highlighting. You
> can see how each person you hover came to be as well as all
> of their
> descendants. ;)
>
>
> On Thursday, August 2, 2012 1:33:16 PM UTC-6, Dovy Paukstys
> wrote:
>
> It's all run off a little json file.
> http://tree.sharingtime.__com/__data.json
>
> <http://tree.sharingtime.com/__data.json
> <http://tree.sharingtime.com/data.json>> I can actually
> display 20 generations.
>
> Here it is really ugly, but fully functional:
> http://dovy.github.com/____Pedigree-Viewer/tree/html/____descendantChart.html
> <http://dovy.github.com/__Pedigree-Viewer/tree/html/__descendantChart.html>
>
> <http://dovy.github.com/__Pedigree-Viewer/tree/html/__descendantChart.html
> <http://dovy.github.com/Pedigree-Viewer/tree/html/descendantChart.html>>
>
> http://dovy.github.com/____Pedigree-Viewer/tree/html/
> <http://dovy.github.com/__Pedigree-Viewer/tree/html/>
>
> <http://dovy.github.com/__Pedigree-Viewer/tree/html/
> <http://dovy.github.com/Pedigree-Viewer/tree/html/>>
>
> Let me finish cleaning up the code and sticking in new
> HTML. ;)
>
>
> On Thursday, August 2, 2012 1:24:41 PM UTC-6, Justin
> York wrote:
>
> You are really good at visual design.
>
> Does it load the entire tree at once?
>
> On Thu, Aug 2, 2012 at 1:16 PM, Dovy Paukstys wrote:
>
> I've been meaning to post this for nearly three
> months.
> I'm cleaning up the code, but I'm releasing this
> HTML5/Pedigree open source.
>
> http://tree.sharingtime.com/?____ctype=descendant#h
> <http://tree.sharingtime.com/?__ctype=descendant#h>
>
>
> <http://tree.sharingtime.com/?__ctype=descendant#h
> <http://tree.sharingtime.com/?ctype=descendant#h>>
>
> Give it a try. You can switch views, zoom, pan,
> recenter, and switch orientation. Here's the
> GitHub:
> https://github.com/dovy/____Pedigree-Viewer
> <https://github.com/dovy/__Pedigree-Viewer>
> <https://github.com/dovy/__Pedigree-Viewer
> <https://github.com/dovy/Pedigree-Viewer>>. I'll finish
>
> cleaning up all the code later this week. Give
> me your
> input. :)
>
> --
>
>
>
>
> --
>
>
>
>
> --
>
>
>
>
> --
>
>
>
>
> --
>
>
>

Doug Blank

unread,
Aug 2, 2012, 5:09:54 PM8/2/12
to root...@googlegroups.com
On Thu, Aug 2, 2012 at 4:26 PM, Dovy Paukstys <do...@rtcollab.com> wrote:
> Justin:
> Dallan's work is very similar to FamilySearch. Click to expand a generation.
> He's done great work.
>
> The pedigree viewer I am releasing is more based off, take a json file and
> display it. I want to do the expanding, but it was more focused on features
> such as smooth scale, pan, zoom, recenter, orientation, bowtie-view, path
> highlighting, backwards compatibility, large tree display, etc.
>
> Both pedigrees have different feature sets. I only wish we had worked
> together on the same pedigree to make one have it all! :)

Well, it is not too late :) I suspect as others look to include either
of these into their own projects, they will see opportunities for
additional, and merged capabilities. Which brings a question to mind:
releasing code as open source is great; maintaining code over time
with bug fixes, feature requests, etc. is even greater! What are the
plans for these tools?

And I meant to ask on this list but accidentally asked on FSDN: is
rootsdev planning on having a list of such tools, perhaps with a brief
comment/recommendation? They all don't have to be Javascript of
course. A collection of Open Genealogical Resources (for example,
research papers on visualization ideas, libraries, websites, APIs,
databases, etc.) would be very valuable to me.

-Doug
> --
>
>
>

Dallan Quass

unread,
Aug 2, 2012, 5:35:18 PM8/2/12
to root...@googlegroups.com, Doug Blank
> Well, it is not too late :) I suspect as others look to include either
> of these into their own projects, they will see opportunities for
> additional, and merged capabilities. Which brings a question to mind:
> releasing code as open source is great; maintaining code over time
> with bug fixes, feature requests, etc. is even greater! What are the
> plans for these tools?

For me, I'll be posting it on github and be open to pull requests. I
honestly haven't had any feature requests for the family tree area at
WeRelate - it seems to be pretty stable.

> And I meant to ask on this list but accidentally asked on FSDN: is
> rootsdev planning on having a list of such tools, perhaps with a brief
> comment/recommendation? They all don't have to be Javascript of
> course. A collection of Open Genealogical Resources (for example,
> research papers on visualization ideas, libraries, websites, APIs,
> databases, etc.) would be very valuable to me.

You want this page: https://github.com/rootsdev/rootsdev.github.com/wiki

It's not well advertised yet (needs to be linked to more prominently
from the rootsdev.org home page, but it has the information you're
looking for.

Dallan

Sean Gates

unread,
Aug 2, 2012, 5:43:13 PM8/2/12
to root...@googlegroups.com
The best way to do this is with shared html template objects that can be hydrated as people move around the page. A la Netflix: http://www.youtube.com/watch?v=xuMWhto62Eo

-- Sean

-- 
Sean Gates
Sent with Sparrow

--

Ben Brumfield

unread,
Aug 2, 2012, 5:47:27 PM8/2/12
to root...@googlegroups.com, Doug Blank
>> A collection of Open Genealogical Resources (for example,
>> research papers on visualization ideas, libraries, websites, APIs,
>> databases, etc.) would be very valuable to me.
> You want this page: https://github.com/rootsdev/rootsdev.github.com/wiki

One of my goals for rootsdev was exactly this kind of resource list.
For whatever reason, I found it much easier to find out about relevant
tools (e.g. APIs for place-name resolution) from the library or
academic world than the genealogy world, even though I was working on
an application for genealogists.

However, without an active community, lists like that age more quickly
than the 1982 Personal Computer Handbook I have sitting on my
bookshelf.

Ben

David Tanner

unread,
Aug 2, 2012, 11:04:30 PM8/2/12
to root...@googlegroups.com

I am working on a good landing page, I just havent had much time over the last couple days to do it.  For my work I have done a lot of work with Bugzilla, Rally, Hudson, and Jenkins so I would love to get a continuous build set up and Jira for bug and issue tracking.

--



Justin York

unread,
Aug 2, 2012, 11:08:16 PM8/2/12
to root...@googlegroups.com
Is the issue tracker in github not enough?

--
 
 
 

Dallan Quass

unread,
Aug 2, 2012, 11:21:58 PM8/2/12
to root...@googlegroups.com, David Tanner
You're doing a terrific job David - thank you!

I'm not sure we need an issue tracker. Github's is pretty good.

-dallan
http://www.werelate.org/wiki/User:Dallan

On 8/2/2012 10:04 PM, David Tanner wrote:
> I am working on a good landing page, I just havent had much time over
> the last couple days to do it. For my work I have done a lot of work
> with Bugzilla, Rally, Hudson, and Jenkins so I would love to get a
> continuous build set up and Jira for bug and issue tracking.
>
> On Aug 2, 2012 3:47 PM, "Ben Brumfield" <benw...@gmail.com
> <mailto:benw...@gmail.com>> wrote:
>
> >> A collection of Open Genealogical Resources (for example,
> >> research papers on visualization ideas, libraries, websites, APIs,
> >> databases, etc.) would be very valuable to me.
> > You want this page:
> https://github.com/rootsdev/rootsdev.github.com/wiki
>
> One of my goals for rootsdev was exactly this kind of resource list.
> For whatever reason, I found it much easier to find out about relevant
> tools (e.g. APIs for place-name resolution) from the library or
> academic world than the genealogy world, even though I was working on
> an application for genealogists.
>
> However, without an active community, lists like that age more quickly
> than the 1982 Personal Computer Handbook I have sitting on my
> bookshelf.
>
> Ben
>
> --
>
>
>
> --
>
>
>
Reply all
Reply to author
Forward
0 new messages