add d3 day4pm

lewagon · Mar 1, 2015 · 38f2869 · 38f2869
1 parent ae96539
commit 38f2869
Show file tree

Hide file tree

Showing 18 changed files with 14,319 additions and 0 deletions.
diff --git a/day4/d3Wagon/README.md b/day4/d3Wagon/README.md
@@ -0,0 +1,29 @@
+d3Wagon
+=======
+
+Session d'introduction aux concepts clés de d3.js.
+
+Pour suivre cette session nous vous conseillons d'avoir la configuration technique suivante :
+
+	Python
+
+Nous allons utiliser le serveur local de Python pour pouvoir lire des fichiers extérieurs (csv, json etc..) pour les visualiser ensuite. 
+
+Python est installé par défaut sur Mac. 
+
+Si vous êtes sous Windows, vous pouvez trouver la version 2.7 à cette adresse : http://www.python.org/getit//. Il vous faudra également ajouter Python à votre variable d'environnement (voir à ce sujet ce tutoriel : http://sametmax.com/ajouter-un-chemin-a-la-variable-denvironnement-path-sous-windows/).
+
+Pour lancer le serveur web installé par défaut sur python 2.7, utilisez la commande :
+
+```python -m SimpleHTTPServer 8888 ```
+
+
+	Un éditeur de texte
+
+Le Wagon vous recommande notamment Sublime (http://www.sublimetext.com/) pour PC ou TextMate (http://macromates.com/) pour Mac.
+
+	Google Chrome
+
+Nous allons utiliser les outils de développement intégrés au navigateur Google Chrome (http://www.google.fr/intl/fr/chrome/browser/)
+
+Yallah !
diff --git a/day4/d3Wagon/alltogethernow/alltogethernow.html b/day4/d3Wagon/alltogethernow/alltogethernow.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<head>
+
+	<script type="text/javascript" src="../src/d3.js"></script>
+
+<style>
+
+rect {stroke:black;fill:white;}	
+
+line {stroke:#ccc;}
+
+text {font-family: sans-serif; font-size: 10px;}
+
+h1 {font-family: sans-serif; }
+
+.titre {font-family: sans-serif; font-size: 12px; font-weight: bold;}
+
+.left {margin-left:45px;}
+
+</style>
+
+</head>
+
+<body>
+
+<h1 class="left"> All together now ! </h1>
+
+<table border="0" class="left">
+<tr class="titre">
+  <td >Lycee</td>
+  <td >Ville</td>
+  <td >Effectif</td>
+  <td>Success</td>
+</tr>
+<tr height="30px">
+  <td id="lycee" width="400px"></td>
+  <td id="ville" width="100px"></td>
+  <td id="effectif" width="80px"></td>
+  <td id="success" width="80px"></td>
+</tr>
+</table>
+
+	<script type="text/javascript">
+
+// variables utiles 
+
+var margin = {top: 40, right: 40, bottom: 40, left: 40},
+	square = {width: 110, height: 110, margin: 15}
+    width = 1060,
+    height = 500;
+
+// Container
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .attr("class", "dot chart")
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+d3.csv("../data/sets/lyceeFR.csv",function(csv) {
+
+// Data wrangling
+
+ var data=d3.nest()
+    .key(function(d) {return d.ville;})
+    .sortKeys(d3.ascending)  
+    .entries(csv);
+
+//On calcule ici la moyenne en utilisant un nest, puis en appliquant une moyenne à chaque noeud. On 
+
+ var Avg=d3.nest()
+    .key(function(d) {return d.ville;}) 
+    .rollup(function(d) {return {effectif:d3.mean(d,function(g) {return +g.effectif;}),success:d3.mean(d,function(g) {return +g.success})};})
+    .map(csv);
+
+// Scales 
+
+var x=d3.scale.linear().domain(d3.extent(csv, function(d) { return parseFloat(d.effectif); })).range([square.margin,square.width-square.margin]);
+var y=d3.scale.linear().domain(d3.extent(csv, function(d) { return parseFloat(d.success); })).range([square.height-square.margin,square.margin]);
+var color = d3.scale.category20();
+
+
+// On créé ici un g par ville
+
+ var g=svg.selectAll("g").data(data).enter()
+    .append("g")
+    .attr("transform",function(d,i) {return "translate("+((i%9)*square.width)+","+(Math.floor(i/9)*square.height)+")";});
+
+   g.append("rect")
+    .attr("x",square.margin/2)
+    .attr("y",square.margin/2)
+    .attr("width",square.width-square.margin)
+    .attr("height",square.height-square.margin)
+      .append("title")
+      .text(function(d) {return d.key;})
+
+  g.append("text")
+    .attr("y",square.height+square.margin/3)
+    .attr("x",square.margin)
+    .text(function(d) {return d.key;})
+
+// On associe pour chaque ville l'ensemble des lycées
+
+  g.selectAll("circle")
+  	.data(function(d) {return d.values;})
+  .enter().append("svg:circle")
+  	.attr("cx",function(d) {return x(parseFloat(d.effectif));})
+  	.attr("cy",function(d) {return y(parseFloat(d.success));})
+  	.attr("r",3)
+  	.attr("fill",function(d) {return color(d.type);})
+  	.attr("opacity",0.5)
+    .on("mouseover",function(d) {addTitle(this, d);})
+    .on("mouseout",function() {removeTitle(this);})
+
+ // add Average lines 
+
+  g.append("line")
+    .attr("x1",square.margin/2)
+    .attr("x2",square.width-square.margin/2)
+    .attr("y1",function(d) {return y(Avg[d.key].success);})
+    .attr("y2",function(d) {return y(Avg[d.key].success);})
+    .append("title").text(function(d) {return "Avg. success rate:"+Avg[d.key].success.toFixed(1);});
+
+  g.append("line")
+    .attr("y1",square.margin/2)
+    .attr("y2",square.height-square.margin/2)
+    .attr("x1",function(d) {return x(Avg[d.key].effectif);})
+    .attr("x2",function(d) {return x(Avg[d.key].effectif);})
+    .append("title").text(function(d) {return "Avg. effectif:"+Avg[d.key].effectif.toFixed(1);});
+
+
+  // Ajouter le nom du lycée au détail
+
+  function addTitle(e, d) {
+    d3.select(e).attr("r",7).attr("opacity",1); 
+    d3.select("#lycee").append("text").text(d.lycee);
+    d3.select("#ville").append("text").text(d.ville);
+    d3.select("#effectif").append("text").text(d.effectif);
+    d3.select("#success").append("text").text(d.success);
+
+  }
+
+  // Supprimer le nom du lycée 
+
+  function removeTitle(e) {
+
+    d3.select(e).attr("r",3).attr("opacity",0.5);
+    d3.select("#lycee").select("text").remove();
+    d3.select("#ville").select("text").remove();
+    d3.select("#effectif").select("text").remove();
+    d3.select("#success").select("text").remove();
+
+  }
+
+
+});
+
+	</script>
+
+</body>
diff --git a/day4/d3Wagon/d3Wagon.pdf b/day4/d3Wagon/d3Wagon.pdf
diff --git a/day4/d3Wagon/data/data01.html b/day4/d3Wagon/data/data01.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<head>
+
+	<script type="text/javascript" src="../src/d3.js"></script>
+
+<style>
+
+</style>
+
+</head>
+
+<body>
+
+<script type="text/javascript">
+
+// Data
+
+var data = [
+  {x: 10.0, y: 9.14, type: "A"},
+  {x:  8.0, y: 8.14, type: "B"},
+  {x: 13.0, y: 8.74, type: "C"},
+  {x:  9.0, y: 8.77, type: "A"},
+  {x: 11.0, y: 9.26, type: "A"},
+  {x: 14.0, y: 8.10, type: "C"},
+  {x:  6.0, y: 6.13, type: "C"},
+  {x:  4.0, y: 3.10, type: "A"},
+  {x: 12.0, y: 9.13, type: "D"},
+  {x:  7.0, y: 7.26, type: "A"},
+  {x:  5.0, y: 4.74, type: "D"},
+];
+
+// On déclare ici les variables utiles 
+
+var margin = {top: 40, right: 40, bottom: 40, left: 40},
+    width = 960,
+    height = 500;
+
+// Les scales gérent les mises à l'échelle (x,y)
+
+var x = d3.scale.linear()
+    .domain([0,14.0])
+    .range([0,width - margin.left - margin.right]);
+
+var y = d3.scale.linear()
+    .domain([0,9.26])
+    .range([height - margin.top - margin.bottom,0]);
+
+var color = d3.scale.category10();
+
+// Création d'un container
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+// Création du scatterplot
+
+svg.selectAll(".dot") 
+    .data(data)
+  .enter().append("circle")
+    .attr("cx", function(d, i) { return x(d.x); })
+    .attr("cy", function(d) {return y(d.y); })
+    .attr("fill","steelblue")
+    .attr("r", 12);
+
+</script>
+
+</body>
diff --git a/day4/d3Wagon/data/data02.html b/day4/d3Wagon/data/data02.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<head>
+
+	<script type="text/javascript" src="../src/d3.js"></script>
+
+<style>
+
+text {
+  font: bold 48px monospace;
+}
+
+.update {
+
+  fill: #333;
+
+}
+
+.new {
+
+  fill: steelblue;
+}
+
+
+.remove {
+
+  fill: red;
+}
+
+
+</style>
+
+</head>
+
+<body>
+
+<script type="text/javascript">
+
+// datas
+
+var data = ["Le Wagon".split(""),
+            "le wagon est en marche".split(""),
+            "Le Wagon est en marche. Ne le ratez pas.".split("")];
+
+// On déclare ici les variables utiles 
+
+var margin = {top: 40, right: 40, bottom: 40, left: 40},
+    width = 1350,
+    height = 500;
+
+// Création d'un container SVG
+
+var svg = d3.select("body").append("svg:svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + (height/2) + ")");
+
+function update(a) {
+
+var dataUpdate = data[a];
+
+// 1 - DATA JOIN (via la fonction data)
+
+textUpdate = svg.selectAll("text").data(dataUpdate);
+
+// 2 - Actualiser les anciens éléments en modifiant le texte et la classe
+
+textUpdate.text(function(d) {return d;}).attr("class","update");
+
+// 3 - Ajouter les éléments manquants.  (via la fonction enter()) 
+
+textUpdate.enter().append("text")
+    .attr("x", function(d, i) { return i * 32; })
+    .attr("dy", ".35em")
+    .attr("class","new")
+    .text(function(d) {return d;});
+
+// 4 - Supprimer les éléments excédentaires (via la fonction exit())
+
+textUpdate.exit().attr("class","remove");
+
+
+};
+
+</script>
+
+</body>
diff --git a/day4/d3Wagon/data/data03.html b/day4/d3Wagon/data/data03.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<head>
+
+	<script type="text/javascript" src="../src/d3.js"></script>
+
+<style>
+
+
+</style>
+
+</head>
+
+<body>
+
+	<script type="text/javascript">
+
+d3.csv("sets/lyceeFR.csv",function(csv) {
+
+var maxEffectif = d3.max(csv,function(d, i) {return parseFloat(d.effectif);}),
+    minEffectif = d3.min(csv,function(d, i) {return parseFloat(d.effectif);});
+
+console.log("max effectif : " + maxEffectif);
+
+console.log("min effectif : " + minEffectif);
+
+});
+
+	</script>
+
+</body>