Skip to content

Instantly share code, notes, and snippets.

@infographie

infographie/README.md

Last active December 13, 2015 15:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save infographie/fdd0f28025f856593fc8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save infographie/fdd0f28025f856593fc8 to your computer and use it in GitHub Desktop.
Download ZIP
test
Raw
data.csv
nom ref2010 ref2014 statut lon lat
Afghanistan 20600 41300 depart 63 34
Syrie 815 122800 depart 34.5 34.7
Kosovo 9260 37900 depart 20.3 42.6
Allemagne 48500 202700 arrivee 6 51.5
Suède 31900 81200 arrivee 8.6 62
France 51600 62800 arrivee -4 40
Italie 10100 64000 arrivee 8 36
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment