D3 Examples - Belarus population

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Belarus population by region</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        
        <style type="text/css">
            
            body {background-color: white; font-family: segoe ui; font-size: 10px; color: lightslategray;}
​
            svg {background-color: white;}
            
            .axis path,
            .axis line {stroke-width: 1; fill: none;    stroke: lightgray; shape-rendering: crispEdges;}
            .x.axis text {color: lightgray; font-size: 10px;}
            .y.axis path,
            .y.axis line {opacity: 0;}
            .y.axis text {font-size: 14px;}
            
            rect {fill: lightslategray;}
            
            rect:hover {opacity: 0.6;}
                    
            
            
        </style>
    </head>
    <body>
        <h1>Belarus population by region</h1>
        <script type="text/javascript">     
​
            var w = 300;
            var h = 200;
            var padding = [ 20, 5, 20, 110 ];  //Top, right, bottom, left
            
            var widthScale = d3.scale.linear().range([ 0, w - padding[1] - padding[3] ]);
            var heightScale = d3.scale.ordinal().rangeRoundBands([ padding[0], h - padding[2] ], 0.2);
​
            var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("top")
                            .ticks(5)
                            .tickSize(-h + padding[0] + padding[2], -h + padding[0] + padding[2]) ;
            
            var yAxis = d3.svg.axis().scale(heightScale).orient("left");
            
            var svg = d3.select("body").append("svg").attr("width", w+100).attr("height", h);
​
             d3.csv("Belarus-population-xlsx.csv", function(data) {
                
                data.sort(function(a, b) {return d3.descending(+a.population, +b.population);});
               
                widthScale.domain([ 0, d3.max(data, function(d) {return +d.population;}) ]); 
                heightScale.domain(data.map(function(d) {return d.region; }));
            
                 var rects = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect");
                    
              
                rects.attr("x", padding[3])
                    .attr("y", function(d) {return heightScale(d.region);})
                    .attr("width", function(d) {return widthScale(d.population);})
                    .attr("height", heightScale.rangeBand())
                    .append("title")
                    .text(function(d) {return d.region + "'s population is " + d.population;});
                  
                 svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + padding[3] + "," + (padding[2]) + ")")
                    .call(xAxis);
                 
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
                    .call(yAxis);});
​
                
    </script>
        <p></p><em><b>Source:   </b><a href="https://belstat.gov.by/ssrd-mvf/ssrd-mvf_2/natsionalnaya-stranitsa-svodnyh-dannyh/chislennost-naseleniya-na-1-yanvarya-po-oblastyam-respubliki-belarus/">National statistics committee of the Republic of Belarus</a> </em></p>
    </body>
</html>
    