Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VP | LV2 | Zadatak 1</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script>
            window.onload = function() {
              var body = d3.select("body");
              body.append("h1").text("Korisnici sustava e-Građani po županijama");

              var width = 400;
              var height = 200;
              var margin = {top: 20, bottom: 70, left:70, right: 20};
              var barPadding = 4;

              var data = [
                {"Naziv_županije": "Splitsko-dalmatinska","Broj_jedinstvenih_korisnika":  42123},
                {"Naziv_županije": "Primorsko-goranska","Broj_jedinstvenih_korisnika":  42107},
                {"Naziv_županije": "Zagrebačka","Broj_jedinstvenih_korisnika":  36689},
                {"Naziv_županije": "Osječko-baranjska","Broj_jedinstvenih_korisnika":  30191},
                {"Naziv_županije": "Istarska","Broj_jedinstvenih_korisnika":  29292},
                {"Naziv_županije": "Varaždinska","Broj_jedinstvenih_korisnika":  22083},
                {"Naziv_županije": "Sisačko-moslavačka","Broj_jedinstvenih_korisnika":  16212},
                {"Naziv_županije": "Zadarska","Broj_jedinstvenih_korisnika":  15513},
                {"Naziv_županije": "Vukovarsko-srijemska","Broj_jedinstvenih_korisnika":  14534},
                {"Naziv_županije": "Međimurska","Broj_jedinstvenih_korisnika":  14452},
                {"Naziv_županije": "Krapinsko-zagorska","Broj_jedinstvenih_korisnika":  14441},
                {"Naziv_županije": "Brodsko-posavska","Broj_jedinstvenih_korisnika":  12742},
                {"Naziv_županije": "Koprivničko-križevačka","Broj_jedinstvenih_korisnika":  12221},
                {"Naziv_županije": "Dubrovačko-neretvanska","Broj_jedinstvenih_korisnika":  11274},
                {"Naziv_županije": "Karlovačka","Broj_jedinstvenih_korisnika":  11243},
                {"Naziv_županije": "Bjelovarsko-bilogorska","Broj_jedinstvenih_korisnika":  9432},
                {"Naziv_županije": "Šibensko-kninska","Broj_jedinstvenih_korisnika":  8461},
                {"Naziv_županije": "Virovitičko-podravska","Broj_jedinstvenih_korisnika":  6856},
                {"Naziv_županije": "Požeško-slavonska","Broj_jedinstvenih_korisnika":  5833},
                {"Naziv_županije": "Nepoznato","Broj_jedinstvenih_korisnika":  3776},
                {"Naziv_županije": "Ličko-senjska","Broj_jedinstvenih_korisnika":  3435}
              ];

              var barWidth = width / data.length - barPadding;

              var xScale = d3.scale.ordinal()
                .domain(d3.range(data.length))
                .rangePoints([0, width]);

              var yScale = d3.scale.linear()
                .domain(
                  [
                    d3.min(
                      data.map(function(d) {
                        return d.Broj_jedinstvenih_korisnika;
                      })
                    ),
                    d3.max(
                      data.map(function(d) {
                        return d.Broj_jedinstvenih_korisnika;
                      })
                    )
                  ]
                )
                .range([height, 0]);

              var svg = d3.select("body")
                .append("svg")
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.bottom + margin.top)
                  .style("background-color", "lightblue")
                .append("g")
                  .attr(
                    "transform",
                    "translate(" + margin.left + "," + margin.top + ")"
                  );

              var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .tickFormat(function(d, i) { return i + 1; });

              var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(10);

              svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .selectAll("text")
                .style("text-anchor", "middle");

              svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Vrijednost");

              var barchart = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                  .attr("x", function(d, i) { return xScale(i); })
                  .attr("y", function(d) { return yScale(d.Broj_jedinstvenih_korisnika); })
                  .attr("height", function(d) { return height - yScale(d.Broj_jedinstvenih_korisnika); })
                  .attr("width", barWidth)
                  .attr("fill", "blue");
            };
        </script>
    </head>
    <body>
    </body>
</html>