D3 Examples - O Êxodo Português (1994-2014)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>O Êxodo Português (1994-2014) </title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <style type="text/css">
​
        body {
            text-align: left;
            font-family: Helvetica, Arial, Sans-serif;
            margin-left: 30px;
        }
​
        h1 {
            font-size: 2em;
            margin-bottom:4px;
        }
​
        h2 {
            font-style: italic;
            font-weight: normal;
            font-size: 1,5em;
            margin-top: 0px;
        }
​
        rect:hover {
            fill:rgb(201,84,74)!important;
        }
​
        .axis path,
        .axis line {
            fill:none;
            stroke:black;
            shape-rendering:crispEdges;
        }
​
        .axis text {
            font-family: sans-serif;
            font-size: 14px;
        }
​
        .y.axis path,
        .y.axis line {
            opacity: 0;
        }
​
        .y.axis text {
            font-size: 18px;
        }
​
    </style>
​
</head>
<body>
​
    <h1>O Êxodo Português (1994-2014)</h1>
    <h2>Retrato de uma crise demográfica</h2>
​
<script type="text/javascript">
​
    var w = 900;
    var h = 600;
    var padding = [20,10,20,50];
​
​
    var widthScale = d3.scale.linear()
                        .range([0,w- padding[1] - padding[3] ]);
​
    var heightScale = d3.scale.ordinal()
                        .rangeRoundBands([ padding[0], h - padding[2]],0.1);
​
    var svg = d3.select("body")
                .append("svg")
                .attr("width",w)
                .attr("height",h);
​
​
    var xAxis = d3.svg.axis()
                    .scale(widthScale)
                    .orient("bottom");
​
    var yAxis = d3.svg.axis()
                    .scale(heightScale)
                    .orient("left");
​
    d3.csv("emigrantes.csv",function(data) {
​
        console.log(data);
​
        data.sort(function(a,b){
            return d3.descending(+a.ano , +b.ano);
        });
​
        widthScale.domain([0,d3.max(data, function(d){
                return +d.n_emigrantes;
        })]);
​
​
        heightScale.domain(data.map(function(d){
            return d.ano;
        }));
​
​
​
​
​
​
        //var points = [50,100,150,200,250,300,350,400,450,500,550]
        var i;
​
        for (i = 0; i < 11; i++) {
​
            svg.append("line")
                .attr("x1", padding[3] + widthScale(i * 5000))
                .attr("y1", padding[0]+8)
                .attr("x2", padding[3] + widthScale(i * 5000))
                .attr("y2", h - padding[2])
                .attr("style", "stroke:rgb(187,196,196);stroke-width:1");
            
        };
​
​
​
​
​
​
​
        var rect = svg.selectAll("rect")
                        .data(data)
                        .enter()
                        .append("rect");
​
        rect .attr("x",padding[3])
            .attr("y",function(d){
                return heightScale(d.ano);
            })
            .attr("width",function(d){
                return widthScale(d.n_emigrantes);
            })
            .attr("height",heightScale.rangeBand())
            .attr("style","stroke: gray; fill:rgb(4,91,114);")
​
​
        svg.append("g")
            .attr("class","x axis")
            .attr("transform", "translate(" +padding[3] + "," +(h-padding[2]+")"))
            .call(xAxis)
​
        svg.append("g")
            .attr("class","y axis")
            .attr("transform", "translate(" + (padding[3] ) + ",0)")
            .call(yAxis);
​
​
​
​
​
    });
    
</script>
​
<p>Source: <a href="https://www.pordata.pt">Pordata</a><br>
Autoria: <a href="https://www.ruimgbarros.com"><em>Rui Barros</em></p>
​
​
​
</body>
</html>
    