Last active
August 29, 2015 14:18
-
-
Save alebusi/9bcd2ea8fef331ebba4b to your computer and use it in GitHub Desktop.
Girls' skills in mathematics
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Creating SVG Elements from Data</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
font-family: Verdana; | |
} | |
svg { | |
background-color: white; | |
} | |
rect { | |
fill: rgb(60, 161, 189); | |
} | |
rect:hover { | |
fill: rgb(33, 93, 109); | |
} | |
text { | |
fill: white; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Korean girls know how to count up</h1> | |
<p>This dataset gives an insight about the mathematics skills of girls across 37 OECD countries.</p> | |
<script type="text/javascript"> | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", 700) | |
.attr("height", 1000); | |
d3.csv("OECD_ISA_2012.csv", function(data) { | |
data.sort(function(a,b){ | |
return d3.descending (a.mathGirls, b.mathGirls); | |
}) | |
var rects = svg.selectAll("rect") | |
.data(data) | |
.enter() | |
.append("rect") | |
rects.attr("x", 0) | |
.attr("y", function(d, i){ | |
return i * 25; | |
}) | |
.attr("width", function(d){ | |
return d.mathGirls; | |
}) | |
.attr("height", 20) | |
.append("title") | |
.text(function(d){ | |
return "Girls from "+d.country+" scored "+d.mathGirls+" points in mathematics" | |
}); | |
var labels = svg.selectAll("text") | |
.data(data) | |
.enter() | |
.append("text") | |
labels.attr("x", 10) | |
.attr("y", function(d, i){ | |
return i * 25+14; | |
}) | |
.attr("font-size", 14) | |
.text(function(d){ | |
return d.country; | |
}) | |
}); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
country | mathGirls | mathBoys | readingGirls | readingBoys | scienceGirls | scienceBoys | |
---|---|---|---|---|---|---|---|
Australia | 498 | 510 | 530 | 495 | 519 | 524 | |
Austria | 494 | 517 | 508 | 471 | 501 | 510 | |
Belgium | 509 | 520 | 525 | 493 | 503 | 507 | |
Brazil | 383 | 401 | 425 | 394 | 404 | 406 | |
Canada | 513 | 523 | 541 | 506 | 524 | 527 | |
Chile | 411 | 436 | 452 | 430 | 442 | 448 | |
Czech Republic | 493 | 505 | 513 | 474 | 508 | 509 | |
Denmark | 493 | 507 | 512 | 481 | 493 | 504 | |
Estonia | 518 | 523 | 538 | 494 | 543 | 540 | |
Finland | 520 | 517 | 556 | 494 | 554 | 537 | |
France | 491 | 499 | 527 | 483 | 500 | 498 | |
Germany | 507 | 520 | 530 | 486 | 524 | 524 | |
Greece | 449 | 457 | 502 | 452 | 473 | 460 | |
Hungary | 473 | 482 | 508 | 468 | 493 | 496 | |
Iceland | 496 | 490 | 508 | 457 | 480 | 477 | |
Indonesia | 373 | 377 | 410 | 382 | 383 | 380 | |
Ireland | 494 | 509 | 538 | 509 | 520 | 524 | |
Israel | 461 | 472 | 507 | 463 | 470 | 470 | |
Italy | 476 | 494 | 510 | 471 | 492 | 495 | |
Japan | 527 | 545 | 551 | 527 | 541 | 552 | |
Korea | 544 | 562 | 548 | 525 | 536 | 539 | |
Luxembourg | 477 | 502 | 503 | 473 | 483 | 499 | |
Mexico | 406 | 420 | 435 | 411 | 412 | 418 | |
Netherlands | 518 | 528 | 525 | 498 | 520 | 524 | |
New Zealand | 492 | 507 | 530 | 495 | 513 | 518 | |
Norway | 488 | 490 | 528 | 481 | 496 | 493 | |
Poland | 516 | 520 | 539 | 497 | 527 | 524 | |
Portugal | 481 | 493 | 508 | 468 | 490 | 488 | |
Russia | 483 | 481 | 495 | 455 | 489 | 484 | |
Slovak Republic | 477 | 486 | 483 | 444 | 467 | 475 | |
Slovenia | 499 | 503 | 510 | 454 | 519 | 510 | |
Spain | 476 | 492 | 503 | 474 | 493 | 500 | |
Sweden | 480 | 477 | 509 | 458 | 489 | 481 | |
Switzerland | 524 | 537 | 527 | 491 | 512 | 518 | |
Turkey | 444 | 452 | 499 | 453 | 469 | 458 | |
United Kingdom | 488 | 500 | 512 | 487 | 508 | 521 | |
United States | 479 | 484 | 513 | 482 | 498 | 497 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment