Skip to content

Instantly share code, notes, and snippets.

@jowang0319

jowang0319/data.csv

Created October 19, 2015 16:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jowang0319/afe6b2d4375d53e32ab6 to your computer and use it in GitHub Desktop.
Save jowang0319/afe6b2d4375d53e32ab6 to your computer and use it in GitHub Desktop.
Download ZIP
new transition plot
Raw
data.csv
Country male female Rate
Afghanistan 62 32 97
Albania 99 99 15
Algeria 94 89 25
Angola 80 66 167
Argentina 99 99 13
Armenia 100 100 16
Azerbaijan 100 100 34
Bahrain 99 98 6
Bangladesh 78 82 41
Belarus 100 100 5
Benin 55 31 85
Bhutan 80 68 36
Bolivia (Plurinational State of) 99 99 39
Bosnia and Herzegovina 100 100 7
Botswana 94 98 47
Brazil 98 99 14
Brunei Darussalam 100 100 10
Bulgaria 98 98 12
Burkina Faso 47 33 98
Burundi 90 88 83
Cabo Verde 98 98 26
Cambodia 88 86 38
Cameroon 85 76 95
Central African Republic 49 27 139
Chad 54 44 148
Chile 99 99 8
China 100 100 13
Colombia 98 99 17
Comoros 86 87 78
Congo 86 77 49
Costa Rica 99 99 10
C�te d'Ivoire 58 39 100
Croatia 100 100 5
Cuba 100 100 6
Cyprus 100 100 4
Democratic People's Republic of Korea 100 100 27
Democratic Republic of the Congo 79 53 119
Dominican Republic 96 98 28
Ecuador 99 99 23
Egypt 92 86 22
El Salvador 96 97 16
Equatorial Guinea 98 99 96
Eritrea 93 89 50
Estonia 100 100 3
Ethiopia 63 47 64
Gabon 87 89 56
Gambia 73 66 74
Georgia 100 100 13
Ghana 88 83 78
Greece 99 99 4
Guatemala 95 92 31
Guinea 38 22 101
Guinea-Bissau 80 69 124
Guyana 92 94 37
Haiti 74 70 73
Honduras 94 96 22
Hungary 99 99 6
India 88 74 53
Indonesia 99 99 29
Iran (Islamic Republic of) 98 98 17
Iraq 84 81 34
Israel 100 99 4
Italy 100 100 4
Jamaica 93 99 17
Jordan 99 99 19
Kazakhstan 100 100 16
Kenya 83 82 71
Kuwait 99 99 10
Kyrgyzstan 100 100 24
Lao People's Democratic Republic 89 79 71
Latvia 100 100 8
Lebanon 98 99 9
Lesotho 74 92 98
Liberia 63 37 71
Libya 100 100 15
Lithuania 100 100 5
Madagascar 66 64 56
Malawi 74 70 68
Malaysia 98 98 9
Maldives 99 99 10
Mali 56 39 123
Malta 97 99 6
Mauritania 66 48 90
Mauritius 98 99 14
Mexico 99 99 15
Mongolia 98 99 32
Montenegro 99 99 5
Morocco 89 74 30
Mozambique 80 57 87
Myanmar 96 96 51
Namibia 83 91 50
Nepal 89 77 40
Nicaragua 85 89 24
Niger 35 15 104
Nigeria 76 58 117
Oman 97 98 11
Pakistan 78 63 86
Palau 100 100 18
Panama 98 97 18
Papua New Guinea 67 76 61
Paraguay 99 99 22
Peru 99 99 17
Philippines 97 98 30
Poland 100 100 5
Portugal 99 99 4
Qatar 99 100 8
Republic of Moldova 100 100 15
Romania 99 99 12
Russian Federation 100 100 10
Rwanda 77 78 52
Samoa 99 100 18
Sao Tome and Principe 83 77 51
Saudi Arabia 99 99 16
Senegal 74 59 55
Serbia 99 99 7
Seychelles 99 99 14
Sierra Leone 72 54 161
Singapore 100 100 3
Slovenia 100 100 3
South Africa 98 99 44
Spain 100 100 4
Sri Lanka 98 99 10
State of Palestine 99 99 22
Sudan 90 85 77
Suriname 98 99 23
Swaziland 92 95 80
Syrian Arab Republic 97 94 15
Tajikistan 100 100 48
Thailand 97 97 13
The former Yugoslav Republic of Macedonia 99 98 7
Timor-Leste 80 79 55
Togo 87 73 85
Tonga 99 100 12
Trinidad and Tobago 100 100 21
Tunisia 98 96 15
Turkey 100 98 19
Turkmenistan 100 100 55
Uganda 90 85 66
Ukraine 100 100 10
United Arab Emirates 94 97 8
United Republic of Tanzania 76 73 52
Uruguay 99 99 11
Uzbekistan 100 100 43
Vanuatu 95 95 17
Venezuela (Bolivarian Republic of) 98 99 15
Viet Nam 97 97 24
Yemen 97 78 51
Zambia 70 58 87
Zimbabwe 90 92 89
Raw
data2.csv
country malemarriage femalemarriage malejus femalejus maleknow femaleknow malemedia femalemedia
Albania 1 8 37 24 21 36 97 99
Armenia 1 8 21 8 4 10 94 92
Azerbaijan 0 10 63 39 2 3 97 95
Benin 2 14 16 15 27 26 67 59
Bosnia and Herzegovina 0 1 5 1 41 42 100 100
Burkina Faso 2 32 40 39 31 29 61 55
Burundi 1 9 56 74 45 43 83 69
Cambodia 2 10 24 42 41 43 73 76
Cameroon 2 24 43 50 30 26 77 66
Comoros 8 16 17 43 21 18 79 67
Congo 3 19 76 73 25 16 56 68
C�te d'Ivoire 1 21 51 51 21 15 73 62
Equatorial Guinea 5 22 56 57 12 17 91 91
Eritrea 1 17 60 51 32 22 70 54
Ethiopia 2 19 51 64 32 24 42 38
Gabon 1 14 47 58 35 29 95 94
Ghana 1 7 37 53 34 35 93 87
Guinea 1 33 63 89 29 20 55 53
Guyana 1 16 25 18 45 53 94 94
Haiti 2 12 22 24 25 32 85 80
Honduras 5 23 18 15 33 29 98 94
India 5 30 47 45 35 19 88 72
Indonesia 0 13 48 45 4 9 88 91
Kazakhstan 1 5 14 9 30 30 99 99
Kenya 0 12 54 57 51 42 91 81
Kiribati 5 16 65 77 46 41 58 57
Kyrgyzstan 1 10 40 25 18 14 98 96
Lao People's Democratic Republic 9 25 50 56 25 23 92 93
Lesotho 1 16 54 48 28 35 64 69
Liberia 3 19 37 48 21 18 73 63
Madagascar 7 28 44 47 24 21 62 59
Malawi 2 23 21 16 45 40 82 65
Marshall Islands 5 21 71 47 35 27 86 85
Mongolia 1 5 9 14 24 28 99 98
Mozambique 8 37 20 24 49 27 73 57
Namibia 0 5 44 38 59 62 86 88
Nepal 7 29 27 24 33 25 86 76
Niger 3 61 41 54 21 12 35 44
Nigeria 1 29 25 33 29 22 54 50
Pakistan 2 14 33 53 5 1 59 49
Rwanda 0 4 35 56 44 49 88 73
Samoa 1 7 50 58 5 2 97 97
Sao Tome and Principe 1 20 25 23 39 39 96 95
Senegal 1 24 31 61 28 26 86 81
Serbia 1 5 6 2 43 53 99 100
Solomon Islands 0 13 73 72 26 29 71 54
Swaziland 0 4 34 42 52 56 94 89
Timor-Leste 0 8 72 81 15 11 61 62
Tuvalu 2 8 83 69 57 31 89 95
Uganda 2 20 52 62 36 36 88 82
Ukraine 0 7 2 2 37 43 97 96
United Republic of Tanzania 4 18 39 52 42 37 79 70
Zambia 1 18 55 61 38 36 80 71
Zimbabwe 1 23 48 48 42 46 59 53
Raw
index.html
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Transition scatter plot</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-->
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
.selected {
background-color: steelblue;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #ccc;
stroke-width: 1px;
}
.line {
fill: none;
stroke: black;
stroke-width: 1px;
stroke-opacity: 80%;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
line-height: 1em;
}
.map_note {
padding-top: 150px;
padding-left: 50px;
}
.tooltip {
position: absolute;
z-index: 10;
opacity:1;
}
.tooltip p {
background-color: white;
border-radius: 0px 10px 10px;
border: rgba(0,153,255,0.8) 2px solid;
padding: 5px;
color: black;
}
/*circle:hover {
fill: rgba(51,51,153,0.5);
}
/* this is an adjustment to bootstrap's row for my page */
.row {
padding-top: 50px;
}
/* this is an adjustment to bootstrap for my page */
.btn-group {
padding-top: 20px;
}
.dots {
fill: rgba(0,153,255,0.5);
}
.highlighted {
fill: rgba(255,0,153,0.5);
}
.xlabel{
fill:grey;
}
.ylabel{
fill:grey;
}
#img2,#img3,#img4{
display:none;
}
#img1{
display:inline;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<h1>UNICEF Adolescent Data Regarding Gender</h1>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="marriage">Adolescent Currently Married</button>
<button type="button" class="btn btn-default" id="jus">Justification of wife-beating</button>
<button type="button" class="btn btn-default" id="know">Comprehensive knowledge of HIV</button>
<button type="button" class="btn btn-default" id="media">Use of mass media</button>
</div>
<div id="svg"></div>
<p>Source: <a href="http://www.unicef.org/">UNICEF</a></p>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="map_note">
<p></br></br></br></br></p>
<img id="img1"src="http://static.un.org/News/dh/photos/large/2011/September/13-09-2011unicef.jpg" class="img-responsive" alt="girls and boys" height="600" width="600">
<img id="img2"src="http://images.alarabiya.net/6e/e7/640x392_77439_210174.jpg" class="img-responsive" alt="girls and boys" height="600" width="600">
<img id="img3"src="http://www.afternoondc.in/Thumbnails.aspx?Filename=2011112802611.jpg&w=340&h=226" class="img-responsive" alt="girls and boys" height="600" width="600">
<img id="img4"src="http://deafrica.org/wp-content/uploads/2013/12/unnamed-1.jpg" class="img-responsive" alt="girls and boys" height="600" width="600">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var width = 600;
var height = 600;
var margin = {top: 20, right: 10, bottom: 40, left: 50};
var dotRadius = 5;
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left])
.domain([-5,100]);
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top ])
.domain([-5,100]);
// Custom tick count if you want it.
// Create your axes here.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5); // fix this to a good number of ticks for your scale later.
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("#svg")
.append("svg")
.attr("width", width)
.attr("height", height);
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
d3.csv("data2.csv", function(data) {
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.
circles.attr("cx", function(d) {
return xScale(+d.malemarriage);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.femalemarriage);
})
.attr("class", function(d){
if (d.country === "Niger" || d.country === "Bosnia and Herzegovina" || d.country == "Serbia") {
return "highlighted";
}
else {
return "dots";
}
});
// adding a silly intro animation to catch the eye -- using transition:
circles.sort(function(a, b) {
return d3.ascending(+a.malemarriage, +b.malemarriage);
})
.transition()
.delay(function(d, i) {
return i * 10;
})
.duration(1000) // milliseconds, so this is 1 second.
.attr("r", dotRadius);
circles
.on("mouseover", mouseoverFunc1)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
// fix these translates so they use your margin and height width as needed
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.style("fill","grey");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis)
.selectAll("text")
.style("fill","grey");
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height-20) + ")")
.style("text-anchor", "middle")
.attr("dy", "12")
.text("Male");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "translate(" + margin.right + " ," +
(height/2) + ")")
.style("text-anchor", "middle")
.attr("dx", "-300")
.attr("dy", "20")
.attr("transform", "rotate(-90)")
.text("Female");
d3.select("button#marriage").on("click", function() {
d3.select("img#img1").style("display", "inline");
d3.select("img#img2").style("display", "none");
d3.select("img#img3").style("display", "none");
d3.select("img#img4").style("display", "none");
circles
.transition()
.attr("cx", function(d) {
return xScale(+d.malemarriage);
})
.attr("cy", function(d) {
return yScale(+d.femalemarriage);
});
circles.selectAll("title").remove();
circles
.on("mouseover", mouseoverFunc1)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
d3.select("button#jus").on("click", function() {
d3.select("img#img2").style("display", "inline");
d3.select("img#img1").style("display", "none");
d3.select("img#img3").style("display", "none");
d3.select("img#img4").style("display", "none");
circles
.transition()
.attr("cx", function(d) {
return xScale(+d.malejus);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.femalejus);
});
// We can't transition the new title text -- must remove and rewrite.
circles.selectAll("title").remove();
circles
.on("mouseover", mouseoverFunc2)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
d3.select("button#know").on("click", function() {
d3.select("img#img3").style("display", "inline");
d3.select("img#img2").style("display", "none");
d3.select("img#img1").style("display", "none");
d3.select("img#img4").style("display", "none");
circles
.transition()
.attr("cx", function(d) {
return xScale(+d.maleknow);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.femaleknow);
});
// We can't transition the new title text -- must remove and rewrite.
circles.selectAll("title").remove();
circles
.on("mouseover", mouseoverFunc3)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
d3.select("button#media").on("click", function() {
d3.select("img#img4").style("display", "inline");
d3.select("img#img2").style("display", "none");
d3.select("img#img3").style("display", "none");
d3.select("img#img1").style("display", "none");
circles
.transition()
.attr("cx", function(d) {
return xScale(+d.malemedia);
// return the value to use for your x scale here
})
.attr("cy", function(d) {
return yScale(+d.femalemedia);
});
// We can't transition the new title text -- must remove and rewrite.
circles.selectAll("title").remove();
circles
.on("mouseover", mouseoverFunc4)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
d3.selectAll("button").classed("selected", false);
thisButton.classed("selected", true);
});
function mouseoverFunc1(d){
d3.select(this)
.transition()
.style("opacity", 0.8)
.attr("r", 12);
return tooltip
.style("display",null)
.html("<p>Country: " + "<strong>" + d.country + "</strong>" +
"<br>Female adolescent currently married rate: " + "<strong>" + d.femalemarriage
+ "</strong>" + "<strong>%</strong><br>Male adolescent currently married rate: " + "<strong>" + d.malemarriage + "</strong>" + "<strong>%</strong></p>");
}
function mouseoverFunc2(d){
d3.select(this)
.transition()
.style("opacity", 0.8)
.attr("r", 12);
return tooltip
.style("display",null)
.html("<p>Country: " + "<strong>" + d.country + "</strong>" +
"<br>Female adjustment of wife-beating rate: " + "<strong>" + d.femalejus
+ "</strong>" + "<strong>%</strong><br>Male adjustment of wife-beating rate: " + "<strong>" + d.malejus + "</strong>" + "<strong>%</strong></p>");
}
function mouseoverFunc3(d){
d3.select(this)
.transition()
.style("opacity", 0.8)
.attr("r", 12);
return tooltip
.style("display",null)
.html("<p>Country: " + "<strong>" + d.country + "</strong>" +
"<br>Female comprehensive knowledge of HIV rate: " + "<strong>" + d.femaleknow
+ "</strong>" + "<strong>%</strong><br>Male comprehensive knowledge of HIV rate: " + "<strong>" + d.maleknow + "</strong>" + "<strong>%</strong></p>");
}
function mouseoverFunc4(d){
d3.select(this)
.transition()
.style("opacity", 0.8)
.attr("r", 12);
return tooltip
.style("display",null)
.html("<p>Country: " + "<strong>" + d.country + "</strong>" +
"<br>Female use of mass media rate: " + "<strong>" + d.femalemedia
+ "</strong>" + "<strong>%</strong><br>Male use of mass media rate: " + "<strong>" + d.malemedia + "</strong>" + "<strong>%</strong></p>");
}
function mousemoveFunc(d){
return tooltip
.style("top",(d3.event.pageY - 10) + "px")
.style("left",(d3.event.pageX + 10) + "px");
}
function mouseoutFunc(d){
d3.select(this)
.transition()
.duration(300)
.style("opacity", 1)
.attr("r", 5);
return tooltip
.style("display","none");
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment