Skip to content

Instantly share code, notes, and snippets.

@coulmont

coulmont/data2.tsv

Created July 11, 2013 12:20
Show Gist options
  • Save coulmont/5974977 to your computer and use it in GitHub Desktop.
Save coulmont/5974977 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data2.tsv
LABEL PROP TOTAL GAR
Adam 3.409090909 176 1
Adelaide 13.51351351 111 0
Adele 20.6557377 305 0
Adeline 3.885135135 592 0
Adrien 8.850574713 1740 1
Agathe 16.12903226 713 0
Agnes 12.93103448 116 0
Alan 3.191489362 188 1
Alban 6.918238994 159 1
Alex 6.920415225 289 1
Alexandra 8.101265823 790 0
Alexandre 7.971215057 3613 1
Alexia 7.407407407 756 0
Alexis 6.143856144 2002 1
Alice 17.61316872 1215 0
Alicia 5.390334572 538 0
Aline 11.41732283 254 0
Alison 4.680851064 235 0
Alix 17.40412979 339 0
Alizee 7.782101167 257 0
Allan 3.726708075 161 1
Amandine 6.712433257 1311 0
Amaury 9.848484848 264 1
Ambre 6.637168142 226 0
Amel 4 125 0
Amelie 9.226467847 1073 0
Amina 5 120 0
Amine 3.937007874 127 1
Anaelle 7.457627119 295 0
Anais 6.13645539 2477 0
Andrea 5.833333333 600 0
Angele 9.677419355 124 0
Angeline 10.81081081 111 0
Angelique 4.071246819 393 0
Anissa 3.585657371 251 0
Anna 15.36312849 358 0
Annabelle 6.622516556 151 0
Anne 17.39130435 460 0
Anne-Laure 13.17829457 129 0
Anne-Sophie 8.267716535 254 0
Anouk 21.00840336 119 0
Anthony 4.138398915 1474 1
Antoine 9.427609428 3267 1
Antonin 12.45551601 281 1
Apolline 19.14893617 188 0
Armand 13.55932203 118 1
Arnaud 10.86448598 856 1
Arthur 10.34755134 1266 1
Astrid 11.11111111 180 0
Aude 15.25974026 308 0
Audrey 7.581699346 1530 0
Augustin 15.83710407 221 1
Aurelia 7.692307692 143 0
Aurelie 7.361376673 1046 0
Aurelien 11.02257636 753 1
Auriane 17.39130435 138 0
Aurore 9.26916221 561 0
Axel 5.041031653 853 1
Axelle 8.045977011 435 0
Aymeric 7.741935484 310 1
Baptiste 9.395017794 1405 1
Barbara 7.075471698 212 0
Bastien 6.786850477 943 1
Benedicte 11.48648649 148 0
Benjamin 7.719836401 1956 1
Benoit 10.54977712 673 1
Berenice 7.913669065 139 0
Bertrand 10.09174312 109 1
Blandine 11.61825726 241 0
Boris 4.838709677 124 1
Brandon 3.759398496 133 1
Brice 7.619047619 210 1
Bruno 10.4 125 1
Bryan 2.259887006 177 1
Camille 10.74946467 4670 0
Candice 9.6069869 229 0
Capucine 20.625 160 0
Carla 11.46245059 253 0
Carole 14.61538462 130 0
Caroline 10 1250 0
Cassandra 4.646017699 452 0
Cassandre 9.130434783 230 0
Cecile 15.54140127 785 0
Cecilia 10.07194245 139 0
Cedric 5.081300813 492 1
Celia 9.067017083 761 0
Celine 7.591377694 1067 0
Charlene 3.921568627 765 0
Charles 9.344490934 717 1
Charlie 7.619047619 105 0
Charline 6.021505376 465 0
Charlotte 9.538461538 1950 0
Charly 3.067484663 163 1
Chloe 10.81953977 2477 0
Christelle 12.64367816 174 0
Christophe 5.387205387 297 1
Christopher 3.29218107 243 1
Cindy 3.265306122 735 0
Claire 13.20754717 1802 0
Clara 15.87537092 1348 0
Clarisse 11.11111111 324 0
Claudia 6.289308176 159 0
Clemence 12.35632184 1392 0
Clement 9.319804585 2661 1
Clementine 12.28956229 594 0
Cloe 3.827751196 209 0
Clothilde 7.96460177 113 0
Clotilde 23.80952381 168 0
Coline 16.49746193 394 0
Constance 15.64417178 326 0
Coralie 6.221719457 884 0
Coraline 9.644670051 197 0
Corentin 8.155080214 1496 1
Cynthia 1.369863014 219 0
Cyprien 16.93548387 124 1
Cyrielle 12.12121212 198 0
Cyril 5.714285714 455 1
Damien 6.234718826 818 1
Daniel 8.904109589 146 1
David 5.570291777 754 1
Deborah 6.25 384 0
Delphine 11.51960784 408 0
Diane 20.13651877 293 0
Dimitri 4.692082111 341 1
Dorian 6.705539359 343 1
Doriane 5.194805195 154 0
Dorine 3.305785124 121 0
Dylan 3.078677309 877 1
Edouard 9.318996416 279 1
Elena 11.38211382 123 0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.log()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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.tsv("data2.tsv", function(error, data) {
data.forEach(function(d) {
d.TOTAL = +d.TOTAL;
d.PROP = +d.PROP;
});
x.domain(d3.extent(data, function(d) { return d.PROP; })).nice();
y.domain(d3.extent(data, function(d) { return d.TOTAL; })).nice();
// axe des abscisses
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Proportion de mention TB");
// axe des ordonnées
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Effectif")
// placement des points
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 10)
.attr("cx", function(d) { return x(d.PROP); })
.attr("cy", function(d) { return y(d.TOTAL); })
.style("fill", "white");
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d.LABEL;
})
.attr("x", function(d) { return x(d.PROP); })
.attr("y", function(d) { return y(d.TOTAL); })
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.style("fill", function(d) { return color(d.GAR); });
});
function tick(e) {
circle
.each(collide(.5))
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
// Resolve collisions between nodes.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + radius.domain()[1] + padding,
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2
|| x2 < nx1
|| y1 > ny2
|| y2 < ny1;
});
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment