Blog > Komentarze do wpisu

Wizualizacja danych naukowych w javascript, html5 przy użyciu canvas.

Wizualizacja danych to graficzny sposób prezentacji informacji. Jest szczególnie ważna, bo dane graficzne same w sobie mogą przekazać olbrzymią ilość informacji na raz. Wynika to ściśle z naszej ewolucji, wyjątkowo dobrze ewolucyjnie rozwinięte procesy spostrzegania kolorów, ruchu, wyprzedzają znacznie później rozwiniętą umiejętność czytania. Postrzeganie obejmuje cały obraz w jednym momencie, a do przeczytania tekstu potrzebne jest prześledzenie słowo po słowie i niemal litera po literze. Są dane abstrakcyjne, jak dane liczbowe, które zyskują wiele po przyporządkowaniu im kolorów, same w sobie prawie nie nadają się do interpretacji wzrokowej przez czytelnika. Czym wyższa liczba wymiarów, tym trudniejsza wizualizacja, a tekst już przy dwóch wymiarach przestaje być odpowiednim narzędziem przedstawienia danych i powinien być od razu odrzucony. 

ściągnij bibliotekę - kliknij tutaj prawym przyciskiem myszy i wybierz "zapisz jako".

Wizualizacja danych naukowych

Często w projektach naukowych używane są skomplikowane biblioteki służące wizualizacji danych, zasadniczym problemem związanym z tego typu oprogramowaniem jest niewielka przenośność. Pliki wykonywalne nie do końca sprawdzają się w prezentacji wyników swojej pracy szerokiemu gronu ludzi, ze względu na fragmentację oprogramowania i systemów operacyjnych stosowanych w skali globalnej. Pliki wykonywalne w dobie rozpowszechnienia złośliwego oprogramowania i walki o dane osobowe budzą niechęć wielu osób, a ich instalacja może być zarówno groźna jak i czasochłonna.

HTML5 - efektywny i przenośny.

Na szczęście pojawił się HTML5, który wraz z zaawansowanym i bardzo wydajnym javascript’em umożliwia tworzenie wizualizacji danych zbliżających się efektywnością i szybkością działania, do plików wykonywalnych. Wszystko to dzieje się w przeglądarce, która jest dostępna dla wielu systemów operacyjnych i działa bardzo szybko. Pewne elementy wyświetlania są wspomagane sprzętowo, tak jak to dzieje się w specjalizowanych bibliotekach do wizualizacji danych, a których użycie do tej pory wymagało kompilacji.

Obiekt Canvas pozwala na rysowanie w czasie rzeczywistym przy pomocy pewnych metod prymitywnych, a zarazem umożliwia tworzenie przy ich pomocy bardziej zaawansowanych funkcji. Podobnie, użycie tego elementu zezwala na dostęp do danych zawartych lokalnie w obrazie, a więc wiele algorytmów cyfrowego przetwarzania obrazów może działać w formie rozproszonej na komputerach użytkowników, a nie jak dotychczas, jedynie na serwerze.

Utrzymać uwagę na celu nadrzędnym.

Ideałem w przypadku wizualizacji danych dla celów webowych i naukowych, jest zastosowanie relatywnie łatwej w użyciu biblioteki, która ‘po prostu działa’, aby twórca nie musiał poświęcać długich godzin na choćby uruchomienie wyświetlania. Osoby, które na co dzień zajmują się obliczeniami naukowymi powinny móc użyć developerskiej wersji prostej biblioteki, która pozwoli na bieżąco sprawdzać prawidłowość działania algorytmów, a sama w sobie nie przyprawi o ból głowy w implementacji. W ostatecznej wersji można poświęcić dodatkowe godziny na opanowanie bardziej zaawansowanych sposobów wizualizacji danych, podczas pracy dąży się do jak najprostszego sposobu, aby móc zogniskować uwagę na celu nadrzędnym, a więc samych obliczeniach naukowych. W chwili obecnej łatwo znaleźć ogólne i zaawansowane kombajny graficzne, które nie spełniają założenia prostoty, których modyfikacja i dostosowanie do własnych potrzeb jest możliwa jedynie dla osób, które zajmują się ich wdrażaniem na co dzień. Osoba pracująca nad innym tematem, okazjonalnie używająca bibliotek wizualizacji może mieć z tym duże kłopoty.

To właśnie moja motywacja, podczas tworzenia biblioteki javascript do wyświetlania wykresów liniowych, a także obecnie prezentowanej biblioteki do wizualizacji danych z obliczeń naukowych. W tym przypadku wyświetlenie danych można uzyskać już po napisaniu kilku linijek tekstu w javascript. Wklejenie prostego kilkulinijkowego szablonu i zastąpienie przykładowych danych, własnymi, nie powinno zająć więcej jak minutę czasu. Biblioteka sama interpretuje dane liczbowe zawarte w tablicy dwuwymiarowej i dostosowuje do nich dynamiczne skale wyświetlania kolorów, danych liczbowych i wektorów.

Jak to działa?

Biblioteka ta umożliwia wyświetlenie dwuwymiarowej tablicy z danymi liczbowymi w formie graficznej mapy kolorów, wektorów i liczb. Każda z tych funkcjonalności jest dynamicznie skalowalna, a więc nie wymaga od użytkownika ustalania zakresów. Efektem tego rozwiązania jest prostota implementacji i brak wymagań co do dodatkowego kodu.Biblioteka do wizualizacji danych po prostu działa.

Po podpięciu do niej tablicy dwuwymiarowej, wartości są analizowane i biblioteka automatycznie dobiera skalę kolorystyczną, długości wektorów i zaokrąglanie wartości liczbowych tak, aby wszystko wyglądało i wyświetlało się bezbłędnie. Oprócz tego funkcje zwarte w niej są logicznie pogrupowane i mają informatywne nazwy, modyfikacje nie powinny stanowić dużego problemu, a wręcz, są wskazane. Każdy sposób wizualizacji danych powinien być dostosowany do indywidualnych potrzeb twórcy. Teraz, kiedy wszystkie kluczowe elementy są gotowe, pozostaje jedynie dostosowanie detali, a i bez tego dane prezentują się dobrze.

Wizualizacja danych javascript

Co należy zrobić, aby ją uruchomić? Należy ściągnąć ją stąd, następnie dołączyć w swoim pliku HTML. Podstawę stanowi utworzenie obiektu canvas, a następnie w javascript stworzenie nowego obiektu (nazwijmy go draw) klasy SciDraw, a więc naszego wykresu. Kolejnym krokiem jest wskazanie stworzonego wyżej obiektu canvas, jako powierzchni do rysowania - draw.canvas i w reszcie dołączenie naszej surowej tablicy dwuwymiarowej z danymi do obiektu draw.data. Teraz pozostaje jedynie odrysowanie danych na powierzchni canvas przy pomocy  draw.plot. Jeśli wszystko poszło dobrze, na płótnie(canvas) pojawią się kolory i sformatowane wartości.

Ściągnij i obejrzyj działający przykład (plik zip)

Zapraszam do testowania funkcjonalności biblioteki, wyrażam zgodę na jej dowolne modyfikowane i publikowanie na swoich stronach internetowych i w projektach naukowych. W najbliższej notce postaram się napisać więcej na temat dostosowania biblioteki do własnych potrzeb i pokazać działający przykład użycia. Więcej programowania na podstronie, możesz też skorzystać z poniższej wyszukiwarki.

wtorek, 26 lutego 2013, mathmed
Jeśli treść artykułu spodobała Ci się, polub oficjalną stronę mathmed na facebooku i bądź informowany o nowościach na stronie :
Related Posts Plugin for WordPress, Blogger...
Ponad 150 artykułów na blogu, wyszukaj :
Możesz też podzielić się ze znajomymi treścią artykułu klikając przycisk "lubię to" poniżej:

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Jestem członkiem agregatora naukowego researchblogging.org