Nettskriving
Forum for innholdsutviklere.
En Tagcloud jeg kunne funnet på å likeJeg har sans for ideen tagcloud, men jeg har ennå til gode å se en implementasjon jeg faktisk har likt. Inntil nå. Worlde lager usedvanlige pene tagclouds med frisk typografi, automagisk. Her er del.icio.us-tagsene mine (jada, jeg innser at jeg burde ryddet opp): The catch? Worldle lager den i Java. Ick. | ||
Kommentarer
For lengst blogget her :-)
Jajamennsann. Jeg praktiserer ideen om at du heller vil vite om noe fint en gang for mye enn en gang for lite.
kan bli en liten utfordring å få den til med ajax, med f.eks. live update etc
Den er helt super, men som du sier: Java = ick. Jeg tror det skal gå an å få til å Flash også. Det som gjør det pent er at de klarer å pakke små ord inn i whitespacene og det tror jeg kanskje går an om man rendrer font glyfene til bitmaps og så rett og slett sjekker hvor det fortsatt er hvitt. Det er litt vanskelig å se for seg at det kan gå an i JS/DHTML i det hele tatt.
Burde være en høyst overkommelig utfordring å mekke dette uten å lage en applet av det. Særlig når man ser slike tag-clouds gjort med javascript / svg / vml.
Tror ikke det er vanskelig å rendre alle elementer på serveren for å så sende img til clienten, slik det er vist i slike tag-clouds
Utfordringen er å rendre det heile på klient siden kanskje ved hjelp av CSS3
Ellers vil Flash implementasjon være raskere og mer dynamisk enn img+javascript
Utfordringen er å gjøre rendringen raskt nok. Dette er et såkalt packing problem som kan likne på et bin packing problem, med den forskjell at det utvendige volumet ikke er begrenset; det du altså vil er å finne den mest kompakte måten å pakke objekter inn mot et midtpunkt.
Optimale packing-algoritmer er vanskelige (NP-hard, faktisk), og siden vi ikke trenger å fylle et volum kan vi bruke en mindre vitenskapelig metode som på fagspråket kalles å “kaste ting på skjermen til det passer”. :-)
Min umiddelbare idé er å plassere store objekter først, noe spredt, og deretter kaste på mellomstore objekter der de passer. Til slutt kastes de minste objektene på som fyll, og så drar man iterativt alle objektene sammen mot midten for å skvise ut tomrom. Skvisingen må bruke en polygon-basert kollisjonsdeteksjonsalgoritme.
For å passe objekter inn i hulrom sendes alle objekter først gjennom en rektangeldeteksjonsalgoritme som scanner pikslene for å finne de største tomme rektangulære områdene (filtrert på en minimumsstørrelse). Denne listen over tomrom sorteres etter areal og brukes til å kjapt finne tomrom som små objekter kan passe inn i. (Om man vil unngå å gjøre søkingen lineær kan man f.eks. bruke et intervall-tre til å lagre arealene.)
Denne algoritmen gir ikke nødvendigvis alltid et optimalt resultat (det gjør riktignok ikke Wordle heller), men du kan kanskje kombinere den med genetiske algoritmer til å søke fram til en bedre kombinasjon. Det er helt sikkert masse smarte geometriske grep man kan gjøre her om man tar seg litt tid i tenkeboksen.
Dette blir nok en liten utfordring med bare javascript :)
Jeg ser for meg et flash/flex objekt-beholder som plasserer alle nye elementer mest mulig sentralt – der perfekte utforming er sirkel. Første elementet går i midten, det andre på siden etc. slik at elementer klistrer seg til den forrige samtidig som de former et slags runding. og “perfekte sirkel” vil utvide seg i radius så snart det ikke er plass til neste elementet etc. så fylles runding med elementer, så utvider man radius etc.
Fordel med flash/flex at man kjenner til høyden bredden etc av et label etter at den er fylt opp med tekst og font/størrelse etc.
Tror du er inne på noe, Dmitry. Algoritmen min er ikke god nok fordi den aldri kan garantere en pakking som ikke danner store hull, ei heller noen slags utvendig form.
En riktigere metode er muligens å stegvis finne den neste mest dekkende plasseringen. Her er resultatet fra det første forsøket mitt, som beveger seg fra midten og prøver å finne plasseringer som ligger nær andre. Den bruker utelukkende bounding-rektangler så langt, og støtter ikke hull. Siden den ikke tar hensyn til dekningsgraden blir resultatet aldri optimalt. Men det er en begynnelse. :-)
Heisann, dette ble andre boller:
Her bruker jeg outline-polygonen til bokstavene for kollisjons-deteksjonen, slik at ord kan skvises inn i kriker og kroker, på bekostning av utregningstid.
Algoritmen for plassering er imidlertid fortsatt latterlig dum—for å finne plasseringer foretar jeg et brute-force-søk i konsentriske sirkler rundt midten, og i noen tilfeller kan et enkelt ord ta over et minutt å plassere.
Nå begynner det å likne på noe:
dette er virkelig nice! god spredning der – genialt løsning
trenger bare å justere minFontSize der :)
PS: kjipt at jeg leste innleget/oppdatering bare nå… har ferie og holder på å flytte til ny leilighet
Edit:
Skal prøve å mekke en sånt tagcloud med print til PDF. Der hvert ord har lenke til side i PDF fila. Tror det kan bli gøy å ha det på slutten av PDF i stedenfor kjedelig keywords lister Men usikker om det i det heile tatt mulig (pdflib hmm?)…
Ser jo bra ut dette her.
Spørsmålet er om dette fungerer for besøkende av nettsteder. For min del oppleves slike clouds som en krysning mellom et fucked up hjernekart og en uorganisert liste.
Noen som har gjort, eller vet om undersøkelser hvorvidt clouds fungerer bedre enn rangerte lister?
Tag-liste fra Fotosonen her på Origo :)
Fantastisk.