A little tool to navigate WikiTree

Question

I have been playing around with a simple way to navigate WikiTree from profile to profile.

There are still a few bugs - but I would value some feedback.

• Ancestors above the photo have a fractal layout.
• Descendants below the photo have 1 generation per row  (click CHILDREN to drill down)
• Click any profile to bring it to the centre
• Enter your WikiTree ID at the top.

Check it out with Winston Churchill

Hope you like it.

john

Comments

Rest assured Daphne - I will not be taking all of your suggestions - just the good ones ;-)

Yes - this is a work in progress - and I have scarcely touched the responsive optimisations. Just working on getting the concept and structure right first. On a mobile in portrait I reckon a fractal depth of 5 is about max. On a large hi-res screen I think a depth of 10 may be doable. But few of us are that well researched!

Strangely perhaps, I was not initially designing this for we genealogists - I was designing for our families. I have in mind my grandma, or kids, when they are wondering where  Aunt Esmeralda fits in. I want be able to answer that question with the mobile in my pocket. Clutter reduction is critical for a small screen - and so not to overwhelm grandma. But I think the concept might also scale to a genealogist with a big tree and a big screen.

Both the Ancestor fractal and descendant cascade are wholly about orientation within a large and complex family tree - and specifically not about maximising info. That said - I have some ideas about providing much more flexibility for genealogists, but these need a little more code+time. I think I can cover your thoughts about info delivery in the fractal - and would LOVE to hear your thoughts when I get there.

Now to some of the choices in the descendant cascade.

The idea (for my kids) is to be able to open up and compare just 2 branches of descendants from a common ancestor. So we can see our line down from GGG-Grandma, and also see Aunt Esmeralda's line. All on a mobile screen (or tablet at best). A button to "expand all" for genealogists is easy.

Critical to the structure of the descendent cascade is that spouses are presented together and siblings are presented together (close to parents). This is not the case in many other arrangements (compact tree for example). I think this is really important to help orientate within a complex family.

I suspect your development experience might have betrayed you a little. The ▯▯▯▯▯ is a feature not a bug!. The ▯▯▯▯▯ hints that there are 5 children in the next generation. I think ⚬⚬⚬⚬⚬ is probably prettier but the ▯ is more visually similar to what you get if you click. Anyways, this is a finer detail. More importantly the CHILDREN button is too wide and quickly becomes the limiting factor when there are many siblings. Also very importantly, this button needs to be relatively large to make it easy to tap on mobile without accidentally tapping the surrounding person.

Placing the Photo & BDM panels below the Descendant cascade is of course easy. And I think the current arrangement is better for my grandma. But I can certainly appreciate that a genealogist navigating a large structure would prefer to jam as much info on the screen as possible. I think this is definitely doable with the code+time mentioned above.

Daphne - your feedback is very wonderful - thank you. :-)

---

Awesome, thanks for your detailed response, John. Cheers.

---

Hey Daphne - I have tidied up the css a bit - with some more work to do on the responsive front. Bad news: I have reduced the default fractal depth to 6. Good news: I have added a a depth parameter to the GET. So you can now do something like http://gene.nhoj.info/index.php?key=Maddox-1056&depth=10

---

I love the depth parameter!

It instantly showed me, via the giant holes in my fractal, that I have a bunch of known ancestors that I've been neglecting to add to Wikitree! So many ancestors, so little time...

(Bevis to Butthead: Huhhuh. She said holes in her fractal. Huh. Huh.)

Edit: but seriously, this is exactly why the fractal is so cool.

---

"Giant holes in my fractal" Daphne Maddox April 2023.

That one is going to stick. :-)

I have just uploaded the latest developments.

• Should work tolerably well on mobile and tablet screens
• Should jam as much info as possible on all screens
• Hidden depth parameter allows fractal depth of up to 10. Witness Daphne's giant holes. 

On big screens you should be able to tune the experience with browser zoom. (ie ctrl+ and ctrl-)

Please let me know if you encounter problems (send me a WikiTree ID as an example)

thanks

john

---

More new stuff! 

There is now a settings button where you can choose:

•  fractal depth can vary from 4-10 for people with huge trees and screens to match.
•  show-priority to let you make best use of the tight space available in the fractal.

All feedback most welcome.

---

Hi there! First off...this is awesome. Love it.

I think a simplified view is key to being able to share with non-geneaologists (like grandma). When it comes to grandma knowing where Aunt Esmerelda fits in, I think the fractal in its current form is still tricky to read/orient. The initial confusion for me is in determining direct lineage connections. I wonder if a line or something between direct descendants might help? I do love that descendants are viewed close together and that helps, but a line between parents and children might take it that extra distance.

Another initial thought: photo and bio summary take up a lot of space. Perhaps separate the name from the photo & bio? So the name can be large at the top of the page. I know it's in the centre of the fractal as well (could it be extra large there?), but if the target is orienting grandma, a title on the page might help.

Thank you so much for all this development effort! So neat to see the data presented this way. Super easy to find gaps. Amazing.

---

Thanks Jennifer - thrilled you like it - and even more for your ideas :-)

I think I can work something into the fractal to give a visual indicator between child and parents. Now my confusion - are you just talking about strengthening relationships in the fractal ancestors area at the top? Or also talking about the descendants area below the BDM & portrait?

In early drafts I had the name in the centre of the fractal much larger - but it was burning a lot of space. I am interested in how we might arrange the WikiTree - Title - BDM - Portrait area to better effect. I have been primarily attending to the small mobile screen where there is a very constrained area and a very long vertical layout. But, Daphne has a big screen max-data type of focus with a suggestion to relocate all the Portrait-BDM stuff out of the way below the descendant section. Both are possible - but could you explain or sketch in a little more detail how you would layout the  WikiTree - Title - BDM - Portrait elements?

---

Hi Jennifer.

I tried a number of alternatives to visually strengthen the relationships in the ancestor fractal. But most came across as a visual distraction to my eye. I have applied a color gradient - but not sure if it is an improvement. Feedback will be interesting. You may need to clear your browser cache to see the effect (ctrl-shirt-R)

---

Hi  Edison Williams &  George Fulton,

The site is now SSL encrypted. I would be interested to know if this has an impact on the slow loading that you commented on a while back?

Answer 1

Great little tool, it is really nice to see how data can be used in so many different ways. Please keep it going :)

I personally am not a big a fan of the FULL CAPITAL system as it was used mid 19 to mid 20th Century so that would maybe be a suggestion: find another way to highlight the LNAB/Family Name.

Comments

Thanks Michel. The FULL CAPITALS are very easy to change. What do you think works best in this situation to highlight the Family Name?

---

I think in this case the capital surnames when you have so many names in a small area. You have to think of people with poor vision, like myself. Other options are not as effective.

---

I find full capitals difficult to read, and I also have poor vision. We are accustomed to the rhythm of words as commonly written and expect to see capitals at the beginning of words rather than throughout.

---

Allcaps really mess things up when you're trying to distinguish between certain surnames: Mcdonald and McDonald, Laflamme and LaFlamme, and so on.

---

Great feedback - thank you! 

I will fiddle around with some alternatives to FULL CAPITAL and get back to you.

---

I have replaced FULL CAPITAL with Bold to see what feedback I get. And I have a couple of ideas about improvements for the visually impaired, but there is a little bit of code required. Thanks heaps for the discussion. 

---

Hi Dina & Kristina,

We now have the vision impaired options that you inspired.

There is a settings button where you can choose:

• fractal depth can vary from 4-10 to enable you to present a smaller fractal with bigger information (default depth = 6).
• show-priority to let you cut down the information in the fractal to the bare minimum that is most important to you. There is an option to choose last-name or last-name if bold is hard for you to read.

You can also use the browser zoom (ctrl+ and ctrl-) to enlarge your text to something readable.

Hope this helps - feedback most welcome.

Answer 2

I like it a lot

Comments

 Thank you  

Answer 3

Hi John - I can get the first page to display (ancestors in fractal form) which I like a lot, but I can't get the WT profile page to open from any names on this page. The WT IDs don't seem to be populating in each of the profiles on your app. 

When I try to open a WT profile I get a blank white screen and the URL is http://gene.nhoj.info/index.php?key=

Running Chrome 111.0.5563.65 (Official Build) (64-bit) on Windows 11

Comments

Thanks Jo.

I am not entirely sure of the root cause - but I have made a number of little changes to try and resolve. I assume that you are on Fitz-Henry-9  Please try again and let me know the Wiki-ID of a Profile that is giving you trouble.

---

I tried with Winston Churchill himself. I followed from your link above in the main post. I could move around within the fractal page, but couldn't then click off the fractal page to have a look at the selected profile itself on WT - perhaps it's not meant to do that though?

I could see my own line using the Fitz-Henry-9 link you posted above, but it didn't click through to my own profile on WT.

---

At the top of the page, in the centre, there is a link to WikiTree. This should take you to the WT Profile of the person in the centre of the fractal. Perhaps this needs to be more prominent? Or am I misunderstanding your problem?

---

Ah - I didn't realise that THAT was what I had to click on to get the profile in question to show. I thought it was just a hat tip to WT and that the WT-ID box underneath should have been filled by default.

Perhaps it could read "Click here to go to the superb profile on WikTree" to help others slow on the uptake like me!

---

Not slow on the uptake at all Jo! Just honest about my poor design. I have made some changes that hopefully make the link to WikiTree pretty obvious. Thank you.

Answer 4

Very nice, John. I like it a lot.

One little bug in biographies.  Inline citations display an "uparrow" which links back from the citation to the referring point in the text. This feature works correctly in your app, but the arrow displays as the string ât` underlined. (Using Chrome browser, Windows 10).

Comments

Thank you Jim. I have fixed this little encoding problem.

Answer 5

It's pretty good, that, John.  You should add it to the Tree Apps.

Comments

Here, here, Ian. Really looking forward to seeing this as part of our Tree Apps!

Answer 6

John, just a FYI: It is much harder to read centre aligned text. It is better to have aligned left / ragged right (ie not aligned right)

cheers, J

Comments

Jay

you are almost certainly correct

but it offends my sense of symmetry something awful!

In fact, 

I was thinking, 

if every body just had 1 partner and 2 children

 then I could also represent the descendants as a fractal

and the world would be a much tidier place.

---

Had to add that many

Answer 7

I was wondering where the parent/grandparent labels were and then I clicked the help button and saw the great image for frustration! also the labels. I think this is a viable and fun way to navigate thru your family.

and a valuable tool since I entered a WT ID to see where I was last working and only have one parent and one child.... needs to be connected to the rest of the family! ... found a duplicate that was why it looked like the family wasn't connected...    Thanks for the help!

Answer 8

HI John, this is great - I really like the fractual view.  I nearly gave up though, as putting in potter-10870 doesn't work - Potter-10870 does though.  Is there any way of making it not caps sensitive?  Others who are less curious might give up which would be a shame :)

Comments

Thanks Suzie. Good point - thank you. It is actually the WikiTree API that is case sensitive - so the short answer is no. But I can perhaps provide some prompts when someone makes a common error.

---

Hi Susie. I have added some more tests around WikiTree ID validity and a little message to try and help people correct typos. Thanks for your comment :-)

---

Wonderful - thanks!

Answer 9

I like it a lot. One enhancement might be to use a lighter shade of gray for an ancestor that is not confident. That way you see not only the gaps but where work on confidence is needed.

Comments

Hey Dana - this is a really cool idea - but I am going to have to take a rain-check on it for a bit. I am trying to polish up the basic functionality first - and then I can get onto the box of really cool stuff. :-)

---

OK Dana - I am in a position to think about this idea now.

The background work that I needed to complete is now largely done. There is a setting button where you can choose the data fields that you want to show up in the fractal (space permitting). All of these options are currently text fields like first-name last-name birth-date etc.

Currently the gender of each profile is displayed with color. But I imagine that I could add a setting to display confidence as a shade-of-grey for example. But there are a number of ways that we could do this:

• Take the average of confidence across all fields and display the profile as a shade-of-grey
• Take the average of confidence across currently selected fields and display the profile as a shade-of-grey
• Change the color of each individual selected field depending on confidence.
• etc ....

How do you imagine using this? Would you be looking for profiles that are generally uncertain? Or focusing on uncertain birth locations across all ancestors? Or some other approach?

You can already - for example - display the fractal with just a single field - say death location - and easily spot missing locations (but not confidence). Another approach could be to simply limit data to only confident or uncertain in order to spot the culprits (no need for grey-scale).

thoughts?