Vizualizacija podataka Danas generiramo ogromnu koliinu informacija Brze

Vizualizacija podataka

• Danas generiramo ogromnu količinu informacija • Brze veze i veliki kapaciteti prijenosa i skladištenja podataka omogućili velikom broju informacija da lako putuju od korisnika do korisnika • Pojam BIG DATA • Definicija: - ekstremno velika količina podataka - ekstremno velika brzina podataka - velika raznovrsnost podataka

• Pitanje: kako podatke obraditi da nam budu korisni? • Potreba za analizom i vizualizacijom • Mnogo lakše razumijevanje i učenje kroz mapiranje podataka na vizual • Ljudima je mnogo lakše detektirati uzorke na vizualnoj prezentaciji nego u običnom skupu brojeva ili teksta

Koliko brzo ćemo pronaći najmanju i najveću vrijednost? 10, 13, 19, 21, 25, 22, 18, 5, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25

Charles Joseph Minard – 1869, Napoleonova ratna kampanja u Rusiji 1812

Harry Beck 1931 - Londonski metro

Fukushima – izljevanje radioaktivne vode

Statistika ratova vođenih u svijetu

• Ključna uloga web tehnologija koje su omogućile brzo dohvaćanje i manipulaciju velikih količina podataka • Omogućena interaktivnost i jednostavno fitriranje podataka • Mnogi moćni alati za kreiranje vizualne prezentacije

• HTML, • CSS, • SVG, • Java. Script (D 3 js library)

• Svg (Scalable Vector Graphics) je baziran na XML-u • svi elementi dostupni za manipuliranje preko DOM-a • Omogućuje kreiranje vektorskih oblika (neovisnost o rezoluciji) • Dodaje animaciju i interaktivnost

SVG • prednosti: skalabilnost, neovisnost o rezoluciji, jednostavno animiranje objekata, dostupnost preko DOM-a, stiliziranje CSSom, malo koda • nedostaci: sporo renderiranje kada se kompleksnost grafike poveća, nije pogodan za aplikacije u igrama… • Preporuke za korištenje SVG-a: web aplikacije i user interface-i neovisni o rezoluciji, interakcije i animacije, vizualizacija podataka, editiranje vektorske grafike

Zadatak Pravokutnik (zaobljeni kutevi) Kružni oblik ( elipsa) Linija Polilinija Poligon Tekst Slika Efekti: Fill, stroke, Širina obruba Transparencija Sjena…

SVG primjer <!DOCTYPE html> <html><head><title>svg</title></head> <body> <svg > <image xlink: href="slika. jpg" x="0" y="0" width="320" height="400" /> <rect id="prvi" x="15" y="15" width="100" height="100"/> <rect id="drugi" x="80" y="70" rx="15" ry="15" width="200" height="100" /> <circle cx="260" cy="70" r="50"/> <ellipse cx="350" cy="80" rx="90" ry="40" /> <line x 1="0" y 1="200" x 2="500" y 2="200"/> <polyline points="0, 180 70, 245 150, 205 230, 245 "/> <polygon points="290, 190 420, 240 360, 315 380, 250 330, 250 350, 330 "/> <text x="50" y="450">Tekst u svg-u</text> </svg></body> </html> <style type="text/css"> svg {width: 600 px; height: 500 px; border: 1 px solid #000; } #prvi {fill: orange; stroke: red; stroke-width: 5 px; } #drugi {fill: lightblue; stroke: blue; strokewidth: 3 px; opacity: 0. 8; } circle {fill: lightgreen; stroke: darkgreen; strokewidth: 10 px; stroke-opacity: 0. 5; } ellipse {fill: yellow; stroke: orange; stroke-width: 5 px; fillopacity: 0. 5; } line {stroke: orange; stroke-width: 10 px; } polyline {fill: none; stroke: red; } polygon {fill: green; } text {fill: red; font-family: Arial, Helvetica, sans-serif; fontsize: 24 px; text-shadow: 2 px 5 px #000; } image{opacity: 0. 3; }