Hoe het beste een variabel organogram weer te geven?

[Cai]

Doel
Als een vrijwilligersklus wordt een website ontwikkeld waarbij op de lokale sportvereniging leden zich kunnen inschrijven voor een laddercompetitie.

Een voorbeeld van zo'n laddercompetitie is (dit is een voorbeeld van de op twee na bovenste hit op google):

Zoals je ziet doen de beheerder van deze site deze afbeelding handmatig aanpassen en opnieuw uploaden.

Ons doel is om dit dynamisch te doen waarbij de spelers zelf kunnen inloggen en waarbij de administratieve handelingen voor een beheerder naar een minimaal punt gebracht worden.

De vraag
Het codeerstuk is geen probleem, echter het grafische aspect i.c.m. browser-compabiliteit een beetje.

Hoe kan je het beste zo'n scheme op laten bouwen, dat deze er grafisch degelijk uitziet, variabel is en dat het leesbaar blijft voor de gebruiker. Stel je zo'n schema voor met 70 deelnemers, je zal dan toch moeten gaan scrollen/uitzoomen wil het te doen blijven.

Eigen inbreng
Het is natuurlijk mogelijk om met behulp van tabellen te werken. Cel A1 is de leider, daaronder in cel B1 en B2 de volgender rij, enz enz. Echter ziet dit er niet heel mooi uit.

Daarnaast wil ik het liefste weg blijven van Flash.

Ik vraag niet om een kant-en-klare how-to, maar meer een (zachte) schop in de richting van welke kant ik op moet om dit te bewerkstelligen dat wanneer een pagina geladen wordt, deze d.m.v. een routine opgebouwd wordt.

[ Voor 4% gewijzigd door Cai op 12-09-2010 16:10 . Reden: mompelt iets over mod ingreep ]

[SeatRider]

Leuk, zo'n voorbeeld met daarin echte telefoonnummers

[ Voor 79% gewijzigd door SeatRider op 12-09-2010 12:54 ]

[Voutloos]

Er zijn ook javascript libraries voor het weergeven van trees. Bijvoorbeeld: http://thejit.org/demos/

[frickY]

Kun je niet server-side een afbeelding genereren, bijvoorbeeld met ImageMagick?

[Cai]

SeatRider schreef op zondag 12 september 2010 @ 12:54:
Leuk, zo'n voorbeeld met daarin echte telefoonnummers

Het is een voorbeeld van een live competitie welke publiekelijk online staat (zo te zien met telefoonnummers van kinderen..) Als beheerder zou ik het ook anders doen, echter hebben deze competitieleiders voor een openbare insteek gekozen, vandaar de doorlink.

Voutloos schreef op zondag 12 september 2010 @ 13:07:
Er zijn ook javascript libraries voor het weergeven van trees. Bijvoorbeeld: http://thejit.org/demos/

Die Spacetree zit er inderdaad aardig uit. Gedownload en ga daar mee spelen. Wat in de box moet komen zijn spelersnaam (clickable link naar profiel) en evt. een profielfoto. Thanx voor input!

frickY schreef op zondag 12 september 2010 @ 13:18:
Kun je niet server-side een afbeelding genereren, bijvoorbeeld met ImageMagick?

Dan heb je inderdaad een oplossing om bovenstaand voorbeeld te dynamiseren. Mijn doelomschrijving ontbrak te vermelden dat e.e.a. linkable moet zijn. Zie het als een Hyves/Myspace look, maar dan voor deze competitie/sport doeleinde.

[ Voor 0% gewijzigd door Cai op 12-09-2010 13:39 . Reden: typo ]

[Creepy]

Ik heb de telefoonnummers toch even verwijderd. Je hebt al geen toestemming om die afbeelding zomaar ergens anders te gaan gebruiken, laat staan om die telefoonnummers zomaar te verspreiden. Als je een voorbeeld wilt laten zien, pak dan aub een andere afbeelding.

[dB90]

Misschien heb je hier iets aan?

[RobIII]

Ik zou eens kijken naar deze Google Visualization uit hun trukendoos. Daarin kun je clickable maken wat je wil en op vele andere manieren events gebruiken etc. om de hele zaak lekker interactief te maken. Makkelijk te implementeren, eenduidige interface en data formaat, Google hosted, gratis.

[ Voor 39% gewijzigd door RobIII op 12-09-2010 21:59 ]

[LuCarD]

Heeft er iemand ervaring met thejit.org of google visualization. Zeker in combinatie met veel nodes? Ik heb nu een boom van ongeveer 800 nodes, die op dit moment via flex presenteer. Hoe is de performance als je zoveel nodes hebt?

Ik vindt de presentatie van de spacetree wel erg simpel en mooi.

[mithras]

Ik zou de nested set uit de database trekken, dat via een vrij simpel algoritme op een x-y vlak projecteren en dat laten renderen met javascript/svg.

Die laatste stap is makkelijk te realiseren met Raphael of een van de vele alternatieven.

[RobIII]

LuCarD schreef op maandag 13 september 2010 @ 09:56:
Heeft er iemand ervaring met thejit.org of google visualization. Zeker in combinatie met veel nodes? Ik heb nu een boom van ongeveer 800 nodes, die op dit moment via flex presenteer. Hoe is de performance als je zoveel nodes hebt?

Ik vindt de presentatie van de spacetree wel erg simpel en mooi.

Ik zou zeggen: probeer het eens? Het is echt geen uren werk om even wat te benchen en meten = weten.

[Icelus]

Zoiets?
JQuery - Binary Tree plugin.