Vizualizacija podataka
Download
Report
Transcript Vizualizacija podataka
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,15,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,
• JavaScript (D3js 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)
SVG
• prednosti: skalabilnost, neovisnost o rezoluciji,
jednostavno animiranje objekata, dostupnost preko
DOM-a, stiliziranje CSS-om, 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"
<style type="text/css">
svg {width: 600px; height: 500px; border:1px solid
#000;}
#prvi {fill: orange;stroke: red;
stroke-width: 5px;}
#drugi {fill:lightblue;stroke:blue;stroke-
width:3px;opacity: 0.8; }
circle {fill:lightgreen;stroke:darkgreen;strokewidth:10px;stroke-opacity:0.5;}
ellipse {fill:yellow;stroke:orange;stroke-width:5px; fillopacity:0.5;}
line {stroke:orange; stroke-width:10px;}
polyline {fill:none; stroke: red; }
polygon {fill:green;}
text {fill: red;font-family:Arial, Helvetica, sans-serif;fontsize:24px; text-shadow: 2px 2px 5px #000;}
image{opacity:0.3;}