Old school D3 from simpler times

All examples By author By category About

infographie

Full window Github gist

test

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; font-family:Arial, Helvetica, sans-serif ; }
    svg { width: 100%; height: 100%; }
    h1 {text-align:center;}
    div {margin-left:100px;}
    p {margin-top:-110px;font-size:10px;}
#cercle{
  background:transparent;
  display: block;
  border-radius:50%;
  width:20px;
  height:20px;
  border:2px solid; 
    float: right;
}
#carre{
  background:transparent;
  display: block;
  width: 20px;
  height: 20px;
  border:2px solid; 
    float: right;
}

</style>
  <h1>Les demandes d'asile en Europe</h1>
  
</head>

<body>

<div id="carre" style=" color:pink;"><br>Demandes d'asile reçues en 2014</div>
<div id="carre" style="color:#3c8ee0;"><br>Demandes d'asile reçues en 2014</div>
<div id="cercle" style="color:pink"><br>Demandes d'asile émises en 2010</div>
<div id="cercle" style="color:#3c8ee0"><br>Demandes d'asile émises en 2014</div>

<script>
  
    
    var margin = {top: 220, right: 20, bottom: 20, left: 100};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
          
       d3.csv('data.csv', function(err,data) {
         
         data.forEach(function(pays) {
      var r14 = Math.sqrt(pays.ref2014)/5;
      var r10 = Math.sqrt(pays.ref2010)/5;
             var h = pays.lon*10;
             var v = 380 - pays.lat*10;
             var g = svg.append("g")
             .attr('transform', 'translate('+h+','+v+')');
           
           if (pays.statut == "depart") {
             
     g.append("circle")
      .attr({cx: 0, cy: 0, r: r14})
      .style({ fill: "transparent", stroke: "#3c8ee0", "stroke-width": 3})
    g.append("circle")
      .attr({cx: 0, cy: r14-r10, r: r10})
      .style({ fill: "transparent", stroke: "pink", "stroke-width": 3})
     g.append("text")
      .attr({x: 0, y: 0, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.nom)
      g.append("text")
      .attr({x: 0, y: 0-r14-10, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.ref2014)
       g.append("text")
      .attr({x: 0, y: r14+20, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.ref2010) 
           }
         
        
         if (pays.statut == "arrivee") {
             
    g.append("rect")
      .attr({x: -r10, y: 0, width: 2*r10, height: r10})
      .style({ fill: "transparent", stroke: "pink", "stroke-width": 3})
    g.append("rect")
      .attr({x: -r14, y: r10-r14, width: 2*r14, height: r14})
      .style({ fill: "transparent", stroke: "#3c8ee0", "stroke-width": 3})
    g.append("text")
      .attr({x: 0, y: r10/2-10, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.nom)
    g.append("text")
      .attr({x: 0, y: r10+15, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.ref2010)
    g.append("text")
      .attr({x: 0, y: -10, "text-anchor": "middle"})
      .style({ fill: "black"})
			.text(pays.ref2014)
           }

});

});
       
  </script>
    <p>Source  : Eurostat </p>

</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js