Untitled

<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<meta charset ="utf-8">
</head>
<body>
<h1>Popis stanovništva po bitnim kontinentima u tisućama</h1>
<script>
//Standardno definiranje podataka - primjer ulov ribe po godinama
//Dvodimenzionalno polje u kojem svaki element ima dva atributa
var data = [
{"godina": "Svijet","ribe": 7162119},
{"godina": "Azija","ribe": 4298723},
{"godina": "Afrika","ribe": 1110635},
{"godina": "Amerike","ribe": 972005},
{"godina": "Europa","ribe": 742452},
//{"godina": "Austrijanci","ribe": 297},
//{"godina": "Bugari","ribe": 350},
//{"godina": "Crnogorci","ribe": 4517},
//{"godina": "Česi","ribe": 9641},
//{"godina": "Makedonci","ribe": 4138},
//{"godina": "Nijemci","ribe": 2965},
//{"godina": "Poljaci","ribe": 672},
//{"godina": "Romi","ribe": 16975},
//{"godina": "Rumunji","ribe": 435},
//{"godina": "Rusi","ribe": 1279},
//{"godina": "Rusini","ribe": 1936},
//{"godina": "Slovaci","ribe": 4753},
//{"godina": "Slovenci","ribe": 10517},
//{"godina": "Srbi","ribe": 186633},
//{"godina": "Talijani","ribe": 17807},
//{"godina": "Turci","ribe": 367},
//{"godina": "Ukrajinci","ribe": 1878},
//{"godina": "Vlasi","ribe": 29},
//{"godina": "Židovi","ribe": 509},
//{"godina": "Bosanci","ribe": 2059},
//{"godina": "Hercegovci","ribe": 75},
//{"godina": "Kosovari","ribe": 568},
//{"godina": "Jugoslaveni","ribe": 331},
//{"godina": "Belgijanci","ribe": 62},
//{"godina": "Bjelorusi","ribe": 68},
//{"godina": "Britanci","ribe": 139},
//{"godina": "Englezi","ribe": 212},
//{"godina": "Škoti","ribe": 16},
//{"godina": "Danci","ribe": 24},
/*{"godina": "Finci","ribe": 31},
{"godina": "Francuzi","ribe": 273},
{"godina": "Grci","ribe": 105},
{"godina": "Nizozemci","ribe": 156},
{"godina": "Irci","ribe": 39},
{"godina": "Letonci","ribe": 14},
{"godina": "Litavci","ribe": 19},
{"godina": "Estonci","ribe": 13},
{"godina": "Norvežani","ribe": 22},
{"godina": "Portugalci","ribe": 30},
{"godina": "Španjolci","ribe": 85},
{"godina": "Šveđani","ribe": 58},
{"godina": "Švicarci","ribe": 137},
{"godina": "Moldavci","ribe": 74},
{"godina": "Aškalije","ribe": 172},
{"godina": "Goranci","ribe": 428},
{"godina": "Ostali narodi Europe","ribe": 265},
{"godina": "Amerikanci","ribe": 419},
{"godina": "Kanađani","ribe": 91},
{"godina": "Meksikanci","ribe": 25},
{"godina": "Kubanci","ribe": 13},
{"godina": "Ostali narodi Sjeverne i Srednje Amerike","ribe": 126},
{"godina": "Argentinci","ribe": 35},
{"godina": "Bolivijci","ribe": 7},
{"godina": "Brazilci","ribe": 88},
{"godina": "Čileanci","ribe": 40},
{"godina": "Peruanci","ribe": 33},
{"godina": "Kolumbijci","ribe": 23},
{"godina": "Ostali narodi Južne Amerike","ribe": 36},
{"godina": "Alžirci","ribe": 25},
{"godina": "Egipćani","ribe": 16},
{"godina": "Libijci","ribe": 9},
{"godina": "Sudanci","ribe": 30},
{"godina": "Ostali narodi Afrike","ribe": 160},
{"godina": "Arapi","ribe": 139},
{"godina": "Indijci","ribe": 45},
{"godina": "Iračani","ribe": 24},
{"godina": "Iranci","ribe": 25},
{"godina": "Japanci","ribe": 54},
{"godina": "Kinezi","ribe": 492},
{"godina": "Korejci","ribe": 26},
{"godina": "Jordanci","ribe": 29},
{"godina": "Libanonci","ribe": 36},
{"godina": "Sirijci","ribe": 71},
{"godina": "Palestinci","ribe": 68},
{"godina": "Armenci","ribe": 37},
{"godina": "Gruzijci","ribe": 20},
{"godina": "Ostali narodi Azije","ribe": 208},
{"godina": "Australci","ribe": 88},
{"godina": "Novozelanđani","ribe": 14},
{"godina": "Ostali narodi Oceanije","ribe": 25},*/
//{"godina": "Istrani","ribe": 25491},
//{"godina": "Dalmatinci","ribe": 705},
//{"godina": "Primorci","ribe": 50},
//{"godina": "Slavonci","ribe": 133},
//{"godina": "Međimurci","ribe": 135},
//{"godina": "Zagorci","ribe": 139},
//{"godina": "Ostale regionalne pripadnosti","ribe": 572},
//{"godina": "Muslimani","ribe": 7558},
//{"godina": "Pravoslavci","ribe": 2560},
//{"godina": "Ostala vjerska izjašnjavanja","ribe": 64},
//{"godina": "Neraspoređeno","ribe": 731},
//{"godina": "Ne izjašnjavaju se","ribe": 26763},
//{"godina": "Nepoznato","ribe": 8877}]
]
//Definiranje širine barova kao i njihova visina
var barWidth = 150;
var width = (barWidth + 100) * data.length;
var height = 200;
//Kreiranje skale u kojoj ćemo prikazati bar graf
//http://alignedleft.com/tutorials/d3/scales
var xScale = d3.scale.linear()
.domain([0, data.length])
.range([0, width]);
//Ulazni podaci se nalaze u domain, a izlazni u range što znači da će x podaci
//biti uzimani od 0-duljine_podataka pa izlazni 0-širina canvasa
//Za y varijablu ulaz se uzima od 0-maksimalne vrijednosti ulova ribe
//a izlaz je prikazan od 0-najviše visine zadanog bar grafa
//prema ovom primjeru bar visine 200 odgovarat će ulovu ribe 77
var yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.ribe; })])
//.domain([0, 100]) //primjer
.rangeRound([0, height]);
var color = d3.scale.linear()
.domain([0, data.length])
.range(["red","blue"]);
//dodavanje canvas u DOM
var bargrph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//Dodavanje rect u vizualizaciju bargrph koja je definirana prije
bargrph.selectAll("rect")
//data-enter-append se dodaju kad novim podacima dodjeljujemo nove vizualizacije
//pogledati link gornji
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return height - yScale(d.ribe); })
.attr("height", function(d) { return yScale(d.ribe); })
.attr("width", barWidth)
//.attr("fill", "blue");
//.attr("fill", "#60009f");
.attr("fill", function(d,i) {console.log(i, color(i)); return color(i); });
//console.log služi za ispisivanje željenih podataka u konzoli
bargrph.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return height - yScale(d.ribe); })
//dx i dy su padding-zi od položaja x i y
//tj. to je ručno pomicanje od gore određenih koordinata
.attr("dx", barWidth/2)
.attr("dy", "1.2em")
// 1em = standardna veličina korištenog fonta
// 2em = dvostruko veća slova od korištenog fonta
.attr("text-anchor", "middle")
//anchor je kao onaj align unutar textboxa - govori gdje će tekst biti ispisan
.text(function(d) { return d.ribe;})
.attr("fill", "white");
bargrph.attr("height", height + 30);
//dodajemo padding na dno grafa jer ako hoćemo dodati tekst ispod grafa kojem
//smo definirali širinu i visinu potrebno je dodati nešto dolje jer se inače
//neće vidjeti
bargrph.selectAll("text.yAxis")
.data(data)
.enter()
.append("text")
.attr("x", function(d, i) { return xScale(i) + barWidth ; })
.attr("y", height)
.attr("dx", -barWidth/2)
.attr("text-anchor", "middle")
.attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
.text(function(d) { return d.godina;})
.attr("transform", "translate(0, 18)")
//umjesto da se dira atribut y - visina
//može se pomicati transformacijom, tj. translacijom u ovom slučaju gdje su (0,18)
//koordinate x - ništa, y - za 18 dolje
.attr("class", "yAxis");
//atribut class dodijeljuje ime ovim text.yAxis yAxis po kojem se mogu onda raspoznavati
//pogledati u Elements u debugger modu
</script>
</body>
</html>