HercegBosna.org

HercegBosna.org

Forum Hrvata BiH
 
Sada je: 28 ožu 2024, 14:57.

Vremenska zona: UTC + 01:00




Započni novu temu Odgovori  [ 15 post(ov)a ] 
Autor/ica Poruka
 Naslov: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 12:55 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Ako nikome ne smeta ja bi ovdje malo opisao svoj hobi projekt i podjelio štogod skromnog programerskog znanja, a možda bude zanimljivo i forumskim kartomanima.

PROJEKT: https://github.com/uselesshb/BiHDataVisualization

WEB: https://uselesshb.github.io/BiHDataVisualization/

CILJ: Stvaranje sustava za vizualizaciju podataka (izbora, popisa i sl.) na karti BiH.

MOTIVACIJA: Kad je teško objasnit, nacrtaj - svak voli kad mi se nešto lijepo vizualno prezentira. Učenje meni nove tehnologije.

PROBLEM 1: Odabir tehnologije

I sa strane osobonog razvoja, a i sa tehničke strane izbor je jasno pao na web tehnologije. Većinu svoje karijere radim u c++-u i c#, a nikad nisam napravio ništa sa html-om i javascriptom, što bi po meni svaki programer trebao malo poznavati. Sa tehničke strane je stvar jasna, sustav treba biti lako dostupan svakome ko bi htio stavit neke podatke na mapu, a nema dostupnije stvari od web stranice.

PROBLEM 2: Karta i granice

Prva stvar koja je potrebna jest karta, odnosno granice općina, kantona, entiteta i države koje bi kasnije mogao bojati. Prva opcija je bila da sam nacrtam granice po već postojećim slikama kojih ima i tu na forumu u izobilju. U tu svrhu bi koristio htmlov svg sustav, vektorski način grafičkog prikaza gdje primjerice možete definirati nekoliko točaka na ekranu, a sustav ih poveže crtom. Iako je riječ o puno točaka, puno crta i puno granica to sam čak bio i napravio pomoću besplatnog alata Inkscape u kojem linije pravite potezom miša, a točke se automatski definiraju. Međutim, palo mi je na pamet da bi stvar možda puno ljepše izgledala kad bi ispod granica bila slika reljefa ili prometnica, što me je dovelo do google mapsa i spoznaje da oni imaju sustav pomoću kojeg se na njihovim mapama mogu crtati razni oblici. Brzo sam od toga odustao jer se sustav plaća svakim njegovim korištenjem da se nešto ucrta (što bi se događalo svaki put kad bi neki korisnik pristupio mom sustavu vizualizacije). Guglanjem za alternativama naišao sam na Open Street Map, koja je praktički wikipedija među internet kartama. Moderiraju je korisnici. Uz tu mapu se po forumima najčešće veže sustav koji se zove OpenLayers - ista stvar kao i googleov sustav crtanja oblika osim što je cijela stvar besplatna. OpenLayers funkcionira na način da crta na dva sloja i sastavi ih za konačni prikaz. Na jednom sloju je karta Open Street Mapa, a na drugom sloju su oblici koje sam nacrtam. Više manje ono što sam tražio.

Da bi cijela stvar bila bolja primjetio sam da kad na Open Street Mapu potražim općinu Grude, prikaže ju omeđenu narančastom granicom, što je značilo da su granice već negdje ucrtane, a pošto je cijela stvar otvorenog tipa ti podaci bi trebali biti javno dostupni. Tako sam došao do openstreetmap wiki stranice administrativnih granica bih.

PROBLEM 3: Pravilno formatiranje granica sa OpenStreetMapa wikija

Pregledom ove wiki stranice je bilo vidljivo da su razni entuzijasti ucrtavali linije granica, te su se čak trudili to raditi po katastarskim podacima. Granice su formatirane na sljedeći način:
Jedna administrativna granica se naziva relation. Jedan relation je zapravo lista više way-ova, a to su zapravo međugranične linije. Jedan way samo lista više node-ova, a jedan node je točka na karti, odnosno njena koordinata. Na primjeru Gruda: relation, way između Gruda i Posušja, prvi node tog waya.
Podaci su tu, sad je trebalo vidjeti kako OpenLayers crta oblike. U OpenLayers sam između ostalih oblika vidio i mogućnost crtanja poligona, zada se niz točaka koje OpenLayers uveže crtom - sve što treba da se ucrta jedna granica. Zaključak je bio sljedeći - sa wiki stranice me samo zanima koje node-ove ima općina Grude i da su poredani pravilno jedan za drugim (da nije jedan na granici sa Posušjom, pa odmah sljedeći neki na granici sa Ljubuškim i sl. situacije), ne trebam taj među sloj - way-ove. Odlučio sam napraviti jednu listu (nodes) u kojoj su svi node-ovi koji će mi trebati za sve granice (svaki node ima id i koordinate), a drugu listu u kojoj su područja (areas) - jedno područje (area) je zapravo samo lista node id-ova koji definiraju njegovu granicu.
Ovo sam postigao python skriptom koja je iskoritila OpenStreetMap API pomoću kojeg se moglo pristupiti podacima relations, ways, nodes u obliku xml-a. Primjer Gruda. Skripta je morala obaviti još neke stvari poput pravilnog redanja node-ova za jedan area jer na open streetmap wikiju nije nužno sve bilo uredno posloženo.

PROBLEM 4: OpenLayers crtanje poligona

Da bi bilo šta počeli raditi našem index.html-u moraju biti dodane js skripta OpenLayers sustava, kao i skripte areas i nodes, index.js u kojem pišemo naš kod.
Kod:
   
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="nodes.js"></script>
<script src="areas.js"></script>
<script src="index.js"></script>

Budući da su podaci (nodes i areas) uredno posloženi za unos u OpenLayers nije bilo komplicirano nacrtati jedan poligon koristeći taj sustav. Osnova tog sustava je objekt koji se naziva Map, u tom objektu se definiraju slojevi(layers), jedan layer je Open Street Map karta, a drugi vector layer u kojem crtamo naše granice. Map objektu još moramo reći gdje se na karti treba poiziconirati i kojim zoomom. Javascript kod u grubo izgleda ovako:
Kod:
const vectorSource = new ol.source.Vector();

//layer na kojem crtamo granice
const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
});

//layer koji će prikazati Open Street Map kartu
const tileLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

//definira gdje se pozicioniramo na karti i koliki je zoom
const mapView = new ol.View({
    center: ol.proj.fromLonLat([17.450, 43.930]),
    zoom: 8.45
});

//glavni objekt - kažemo mu koje layere da koristi i koji view
const map = new ol.Map({
    target: "map",
    layers: [
        tileLayer,
        vectorLayer
    ],
    view: mapView
});

Osnovne stvari su postavljene, crtanje vlastitih oblika u vector layeru se radi pomoću objekta Feature. Feature je objekt koji u sebi sadrži geometriju koju želimo nacrtati, a geometrija je već praktički definirana u areas.js fileu kojeg sam napravio pomoću python skripte. Kad bi dodao sljedeći kod nacrtao bih granicu BiH koja je prva u tom fileu.
Kod:
//stvori feature koristeći poligon granice BiH
const feature = new ol.Feature({geometry: new ol.geom.MultiPolygon(areas[0].polygons)});

//dodaj feature mapi
map.getLayers().getArray()[1].getSource().addFeature(feature);

Stiliziranje jednog Feature-a je također vrlo jednostavno, definira se boja i debljina granice (Stroke) i boja kojom punimo područje (Fill):
Kod:
const style = new ol.style.Style();
const stroke = new ol.style.Stroke({color: "grey", width: 1.25});
const fill = new ol.style.Fill({color: "rgba(120,100,80,0.5)"});
style.setStroke(stroke);
style.setFill(fill);
feature.setStyle(style);


PROBLEM 5: Unos podataka


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 13:01 
Offline
Avatar

Pridružen/a: 16 lip 2019, 22:02
Postovi: 533
Općina Stanari nedostaje na osm.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 13:11 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Da znam, na njihovu forumu ima tema o toj općini, ali nitko je nije dosad ucrtao.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 13:18 
Offline
Avatar

Pridružen/a: 16 lip 2019, 22:02
Postovi: 533
Baci pogled na http://umap.openstreetmap.fr/en/map/new ... 75/17.7077

Mozes mijenjat slojeve, dodavat, mijenjat prikaz ucrtanih objekata itd.

Ovo si vjerojatno već vidio. http://maperitive.net/


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 13:27 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Nisam to ništa vidio. Vidio sam doduše da ima takvih sličnih rješenja kao umap gdje pomoću OpenLayersa daju mogućnost da rukom crtaš poligone.

Ovaj umap ima zgodno sučelje možda bi se dalo štogod kopirat.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 15:58 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
PROBLEM 5: Unos podataka

Po pitanju unosa podataka sam se odlučio za csv format. Pod pretpostavkom da se s većinom podataka radi u excelu, csv je očiti izbor jer se svaka excel tablica može sačuvati u csv format. Csv je najobičniji tekstualni file u kojem se koristi neki znak kao delimiter, te novi redak da bi glumio tablice. Delimiter kod excel izvoza je znak točka-zarez ";". Pa tako iz ovoga:
Privitak:
sheet.png
sheet.png [ 3.02 KiB | Pogledano 1975 put/a. ]

Dobijemo ovo:
Kod:
Grude;15000
Posušje;20000
Široki Brijeg;25000


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 16:24 
Offline

Pridružen/a: 03 ruj 2009, 00:51
Postovi: 802
Pratim.

Lijepo, kroz projekt se naucis html i intelektualno zabavis, a ujedno mozda i nesto korisno napravis za HB zajednicu.
Ja isto slabo znam web tehnologije, praktički ništa, nikad mi nisu trebale (s izuzetkom djelića jednog projekta) i to mi je nekako bila najdosadnija vrsta programiranja. Isto kao i ti većinom znam C++ ili Python (mada nisam programer, znam osnovno programirati ali to mi je sekundarni skill, nužan, ali ipak sekundarni).

Ako si programer onda bi morao malo ovoga znat, da ne moraš vući za rukav nekoga da ti pravi grafička rješenja.
Html se može naučit za jedan dan, ali naravno za level majstorije, kao i u svemu, je potrebno puno iskustva.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 19:53 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Hvala. C++ kao sekundarna zanimacija? Za python razumijem jer ga je lako naucit, ima super sintaksu, neobicno mi je bilo koliko je lako u njemu napraviti neke stvari. Zato se i koristi u neuralnim mrezama, jer ih ne rade programeri, nego matematicari. C++ je ipak ozbiljan jezik za ozbiljne stvari. Drago mi je sto je prvi jezik kojeg sam ucio jer se kasnije bilo sta savlada bez ikakvi problema.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 20:46 
Offline

Pridružen/a: 03 ruj 2009, 00:51
Postovi: 802
A C++ je teži jer je apstraktniji, poanta je da sto vise barataš s klasama, sto skraćuje kod ali je i teze za smisliti. Cilj je poopćavanje i generalizacija, da ne moraš 100 puta pisat slican kod.

Za C++ sam ovo prolazio.
https://www.tutorialspoint.com/cplusplus/index.htm
http://www.cplusplus.com/

Mada, dobar dio mojeg koda je više običan C. Ja sa C++ zovem samo ono sto ima klase.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 15 stu 2019, 22:12 
Offline

Pridružen/a: 03 sij 2012, 23:08
Postovi: 4974
lajk i od mene, 99,9% mapa bejha na internetu su škrabotine sa krivim granicama svega...

mape sa tih linkova gore izgledaju jako dobro... već sam stavio na drugoj temi, evo brutalna mapa od pave b. sa forum.hr, 1971. pite na detaljnoj topografskoj karti 20k x 20k pixela http://www.forum.hr/showpost.php?p=7506 ... count=2967

profesionalno urađeno, možda malo preveliko ali skinite pa smanjite, uglavnom mapa za primjer, koristio je ovaj program https://www.gimp.org/


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 16 stu 2019, 09:00 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Pogledao sam kartu, skoro mi komp crka :D. Mogućnost vizualizacije po mjestima je i jedan od mojih ciljeva, ali nemam još plana za to.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 16 stu 2019, 09:50 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
PROBLEM 6: Jednostavni prikaz

Pod jednostavnim prikazom smatram vizualizaciju jednog podatka na jednom području (e.g. ukupni broj stanovnika u općini). Već sam napisao iznad kako bi se ta tablica unijela u sustav (najjednostavije napravit je u excelu ili google sheetsu i eksportirati kao csv datoteku, a uvijek možete i ručno napisati tekstualni file i sačuvati ga kao .csv). Ostaje pitanje kako obojati općine s obzirom na ukupni broj stanovnika. Po tom pitanju sam se odlučio za novu csv datoteku u kojoj će biti opisan stil. Ta datoteka bi izgledala ovako:
Svaki redak bi imao početak raspona;kraj raspona;rgba kod boje. Uzmimo primjer broja stanovnika po općinama u ZHŽ:
Data csv datoteka bi izgledala ovako:
Kod:
Grude;17308
Posušje;20477
Ljubuški;28184
Široki Brijeg;28929

Recimo da želim do 20000 stanovnika općinu obojati u zeleno, od 20000 do 25000 u žuto, od 25000 do 30000 u crveno.
RGB vrijednosti možete saznati na bilo kojem color pickeru:
Crvena je (255,0,0), zelena (0,255,0), žuta(255,255,0). A vrijednost predstavlja transparentnost boje i ide od 0 do 1, ako želimo bojati sa 50% transparentnosti onda stavimo A 0.5.
Stil csv datoteka bi izgledala ovako:
Kod:
0;20000;rgba(0,255,0,0.5)
20000;25000;rgba(255,255,0,0.5)
25000;30000;rgba(255,0,0,0.5)

Konačni rezultat:
Privitak:
map.png
map.png [ 231.53 KiB | Pogledano 1893 put/a. ]


Kako to sve u pozadini radi:

Cijeli sustav se oslanja na ispravan unos imena područja u data csv. Na web stranici ima dugme za imena područja u kojem pišu sva imena koja su validna za sustav. Ako se napiše pogrešno ime sustav izbacuje grešku. Sustav čita data csv liniju po liniju i u koliko je ispravno ime, pronalazi Feature sa tim imenom i dodaje ga mapi, uz to u Feature bilježi i podatak koji je u toj liniji data csv-a (Feature objekt omogućava da se u njega zabilježi bilo kakav podatak).

Kod se može vidjeti na liniji 120 index.js skripte:
Kod:
//bilježi broj stanovnika općine u feature
feature.set("data", parseInt(line_data[1]), true);

//dodaje feature mapi
map.getLayers().getArray()[1].getSource().addFeature(feature);

Sljedeća stvar je čitanje stil csv datoteke. Kod prolazi preko svih feature-a dodanih mapi i čita im spremljeni podataka, kad pročita podataka onda prelazi preko svih linija u stil csv datoteci da vidi u koji od raspona taj podatak spada. Kada vidi da recimo Grude koje imaju podatak 17308 spada u raspon na prvoj liniji (0-20000), uzima rgba kod iz te linije i od njega stvori Fill, odnosno boju kojom će se popuniti taj Feature.

Kod se može vidjeti na liniji 190 index.js skripte:
Kod:
//nakon što je pronađen pravi raspon stvori fill koristeći rgba (line_data[2]) i dodaj taj fill u stil feature-a.
const fill = new ol.style.Fill({color: line_data[2]});
features[i].getStyle().setFill(fill);


Ako za neki feature koji smo dodali mapi nije pronađen odgovarajući raspon i rgba onda sustav boji taj feature u crno da korisniku bude očito da je negdje promašio.

U repozitoriju projekta se mogu još naći data i stil csv datoteke za broj stanovnika po općinama po popisu iz 2013.

KRAJ.

To je sve što imam zasad, sljedeći korak bi očito bio kompleksni prikaz kojim bi se prikazivalo više podataka po području (e.g. broj h,s i b po području, glasovi više stranaka po području itd). Za to bi morao koristit nekakav pie chart lociran u centru područja ili nekako prikazivati različite podatke hrpom točkica na području ili nešto slično. Svi prijedlozi dobrodošli! Ako koga šta zanima slobodno nek pita.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 16 stu 2019, 11:34 
Offline

Pridružen/a: 03 sij 2012, 23:08
Postovi: 4974
Bilo bi zanimljivo da obojis tako H M S po opcinama i u centru svake opcine dodas pitu. Mada to imaju na interaktivnoj mapi na statistika.ba... i njihova podloga je jako precizna.

Inace dok vidim te kodove prodimi mi iz usiju :D


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 16 stu 2019, 11:55 
Offline

Pridružen/a: 09 vel 2014, 19:07
Postovi: 3022
Pogleda sam tu stranicu, ima dosta stvari koje bi moga dodat, poput tekstova u sredini opcina i malog prozorcica sa detaljima kad dodjes misom iznad opcine. Kako mislis precizna podloga? I ne vidim nigdi pite u centrima opcina. Kad odaberem tu opciju "etnicki sastav" pita se pojavi sa strane tek kad dodjem misom iznad opcine.

Citat:
Inace dok vidim te kodove prodimi mi iz usiju :D


Ako te to zanima slobodno pitas. To se zove javascript i imas dosta tutoriala za to.


Vrh
   
 
 Naslov: Re: Projekt: vizualizacija podataka na karti BiH
PostPostano: 16 stu 2019, 14:19 
Offline

Pridružen/a: 03 sij 2012, 23:08
Postovi: 4974
da u pravu si, ne znam zašto su mi ostale pite u centru općina u glavi... možda jer sam bio naletio na odličnu mapu slovačke na tu shemu...
inače ne volim interaktivne mape, jebo mapu ako je ne možeš otvorit u paintu i dijelit bosnu... a pod preciznu podlogu mislim na granice entiteta i općina, kažem to je na većini mapa (praktički svakoj) koje se povlače netom sfušano.

ta podloga sa open street map izgleda precizno, čini mi se bolje od google maps


Vrh
   
 
Prikaži postove “stare”:  Redanje  
Započni novu temu Odgovori  [ 15 post(ov)a ] 

Vremenska zona: UTC + 01:00


Online

Trenutno korisnika/ca: / i 19 gostiju.


Ne možeš započinjati nove teme.
Ne možeš odgovarati na postove.
Ne možeš uređivati svoje postove.
Ne možeš izbrisati svoje postove.
Ne možeš postati privitke.

Forum(o)Bir:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Facebook 2011 By Damien Keitel
Template made by DEVPPL - HR (CRO) by Ančica Sečan
phpBB SEO