yan2014/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Adding Labels</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
</head>
<body>

<h3>Survival rate to last grade of primary education in 2012, <div class="poorest">Poorest</div> versus <div class="richest">Richest</div></h3>
<p>Data source: <a href="http://data.unicef.org/education/overview.html"> http://data.unicef.org/education/overview.html</a></p>
</body>
<script src="main.js"></script>
</html>

## main.css
body {
    font-family: sans-serif;
    width: 1000px;
    margin: auto;
}
p {
    color: gray;
}
div.richest {
    color: #6699FF;
    display: inline;
}
div.poorest {
    color: orange;
    display: inline;
}
svg {
    background-color: white;
}
circle {
    stroke-width: 1;
}
circle.richest {
    fill: #6699FF;
}
circle.poorest {
    fill: orange;
}
circle:hover {
    stroke-width: 3;
    stroke: white;
}
line.grid {
    stroke: #eee;
}
line.between {
    stroke: black;
}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
.xlabel {
    font-famile: sans-serif;
    font-size: 11px;
    color: gray;
}

## main.js
/**
 * Created by shiyan on 9/28/15.
 */
// this is the size of the svg container -- the white part
var fullwidth = 1000,
    fullheight = 500;
// these are the margins around the graph. Axes labels go in margins.
var margin = {top: 20, right: 25, bottom: 20, left: 200};
var width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var widthScale = d3.scale.linear()
    .range([ 0, width]);
var heightScale = d3.scale.ordinal()
    .rangeRoundBands([ margin.top, height], 0.2);
var xAxis = d3.svg.axis()
    .scale(widthScale)
    .orient("bottom");
var yAxis = d3.svg.axis()
    .scale(heightScale)
    .orient("left")
    .innerTickSize([0]);
var svg = d3.select("body")
    .append("svg")
    .attr("width", fullwidth)
    .attr("height", fullheight);
d3.csv("primary education.csv", function(error, data) {
    if (error) {
        console.log("error reading file");
    }
    // in this case, i know it's out of 100 because it's percents.
    widthScale.domain([0, 100]);
    // js map: will make a new array out of all the d.country fields
    heightScale.domain(data.map(function(d) { return d.country; } ));
    // Make the faint lines from y labels to highest dot
    var linesGrid = svg.selectAll("lines.grid")
        .data(data)
        .enter()
        .append("line");
    linesGrid.attr("class", "grid")
        .attr("x1", margin.left)
        .attr("y1", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        })
        .attr("x2", function(d) {
            return margin.left + widthScale(+d.Richest);
        })
        .attr("y2", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        });
    // Make the dotted lines between the dots
    var linesBetween = svg.selectAll("lines.between")
        .data(data)
        .enter()
        .append("line");
    linesBetween.attr("class", "between")
        .attr("x1", function(d) {
            return margin.left + widthScale(+d.Poorest);
        })
        .attr("y1", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        })
        .attr("x2", function(d) {
            return margin.left + widthScale(d.Richest);
        })
        .attr("y2", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        })
        .attr("stroke-dasharray", "5,5")
        .attr("stroke-width", "0.5");
    // Make the dots for poorest
    var dotspoorest = svg.selectAll("circle.poorest")
        .data(data)
        .enter()
        .append("circle");
    dotspoorest
        .attr("class", "poorest")
        .attr("cx", function(d) {
            return margin.left + widthScale(+d.Poorest);
        })
        .attr("r", heightScale.rangeBand()/2)
        .attr("cy", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        })
        .append("title")
        .text(function(d) {
            return d.country + " poorest: " + d.Poorest + "%";
        });
    // Make the dots for richest
    var dotsrichest = svg.selectAll("circle.richest")
        .data(data)
        .enter()
        .append("circle");
    dotsrichest
        .attr("class", "richest")
        .attr("cx", function(d) {
            return margin.left + widthScale(+d.Richest);
        })
        .attr("r", heightScale.rangeBand()/2)
        .attr("cy", function(d) {
            return heightScale(d.country) + heightScale.rangeBand()/2;
        })
        .append("title")
        .text(function(d) {
            return d.country + " richest: " + d.Richest + "%";
        });
    // add the axes
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + margin.left + "," + height + ")")
        .call(xAxis);
    var yNode=svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + margin.left + ",0)")
        .call(yAxis);
    svg.append("text")
        .attr("class", "xlabel")
        .attr("transform", "translate(" + (margin.left + width / 2) + " ," +
            (height + margin.bottom) + ")")
        .style("text-anchor", "middle")
        .attr("dy", "12")
        .text("Survival rate-Percent");
    //get the biggest difference
    var difference=[];
    data.forEach(function(d, i){
        difference.push(d.Poorest- d.Richest);
       }
    );
    var most=Math.max.apply(Math, difference);
    var one=0;
    data.forEach(function(d, i){
            if(d.Poorest- d.Richest===most) {one=i;}
        }
    );
    var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array
    d3.select(allYAxisLabels[one]).style("font-size", "20px");
});

## primary education.csv

          
            country
            year
            total
            Male
            Female
            Poorest
            Second
            Middle
            Fourth
            Richest
            ratio
            difference

            
              Argentina
              2012
              97
              95
              98
              93
              96
              99
              99
              99
              0.939393939
              -6

            
              Belarus
              2012
              100
              100
              100
              100
              100
              100
              100
              100
              1
              0

            
              Bosnia and Herzegovina
              2012
              100
              99
              100
              100
              100
              100
              98
              100
              1
              0

            
              Haiti
              2012
              88
              88
              88
              86
              85
              88
              88
              94
              0.914893617
              -8

            
              Honduras
              2012
              84
              82
              86
              72
              80
              85
              95
              97
              0.742268041
              -25

            
              Kyrgyzstan
              2012
              100
              100
              100
              100
              99
              100
              100
              99
              1.01010101
              1

            
              Lao People's Democratic Republic
              2012
              95
              95
              95
              93
              94
              92
              98
              100
              0.93
              -7

            
              Niger
              2012
              92
              92
              92
              90
              94
              87
              90
              96
              0.9375
              -6

            
              Peru
              2012
              87
              87
              88
              83
              86
              89
              89
              93
              0.892473118
              -10

            
              Thailand
              2012
              100
              100
              100
              100
              100
              99
              99
              100
              1
              0

            
              Tunisia
              2012
              97
              97
              96
              93
              97
              95
              100
              99
              0.939393939
              -6

            
              Ukraine
              2012
              100
              100
              100
              100
              100
              100
              100
              100
              1
              0

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Adding Labels</title>
	<link rel="stylesheet" type="text/css" href="main.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	</head>
	<body>

	<h3>Survival rate to last grade of primary education in 2012, <div class="poorest">Poorest</div> versus <div class="richest">Richest</div></h3>
	<p>Data source: <a href="http://data.unicef.org/education/overview.html"> http://data.unicef.org/education/overview.html</a></p>
	</body>
	<script src="main.js"></script>
	</html>
	body {
	font-family: sans-serif;
	width: 1000px;
	margin: auto;
	}
	p {
	color: gray;
	}
	div.richest {
	color: #6699FF;
	display: inline;
	}
	div.poorest {
	color: orange;
	display: inline;
	}
	svg {
	background-color: white;
	}
	circle {
	stroke-width: 1;
	}
	circle.richest {
	fill: #6699FF;
	}
	circle.poorest {
	fill: orange;
	}
	circle:hover {
	stroke-width: 3;
	stroke: white;
	}
	line.grid {
	stroke: #eee;
	}
	line.between {
	stroke: black;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	.xlabel {
	font-famile: sans-serif;
	font-size: 11px;
	color: gray;
	}
	/**
	* Created by shiyan on 9/28/15.
	*/
	// this is the size of the svg container -- the white part
	var fullwidth = 1000,
	fullheight = 500;
	// these are the margins around the graph. Axes labels go in margins.
	var margin = {top: 20, right: 25, bottom: 20, left: 200};
	var width = 1000 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var widthScale = d3.scale.linear()
	.range([ 0, width]);
	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ margin.top, height], 0.2);
	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");
	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left")
	.innerTickSize([0]);
	var svg = d3.select("body")
	.append("svg")
	.attr("width", fullwidth)
	.attr("height", fullheight);
	d3.csv("primary education.csv", function(error, data) {
	if (error) {
	console.log("error reading file");
	}
	// in this case, i know it's out of 100 because it's percents.
	widthScale.domain([0, 100]);
	// js map: will make a new array out of all the d.country fields
	heightScale.domain(data.map(function(d) { return d.country; } ));
	// Make the faint lines from y labels to highest dot
	var linesGrid = svg.selectAll("lines.grid")
	.data(data)
	.enter()
	.append("line");
	linesGrid.attr("class", "grid")
	.attr("x1", margin.left)
	.attr("y1", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	})
	.attr("x2", function(d) {
	return margin.left + widthScale(+d.Richest);
	})
	.attr("y2", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	});
	// Make the dotted lines between the dots
	var linesBetween = svg.selectAll("lines.between")
	.data(data)
	.enter()
	.append("line");
	linesBetween.attr("class", "between")
	.attr("x1", function(d) {
	return margin.left + widthScale(+d.Poorest);
	})
	.attr("y1", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	})
	.attr("x2", function(d) {
	return margin.left + widthScale(d.Richest);
	})
	.attr("y2", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	})
	.attr("stroke-dasharray", "5,5")
	.attr("stroke-width", "0.5");
	// Make the dots for poorest
	var dotspoorest = svg.selectAll("circle.poorest")
	.data(data)
	.enter()
	.append("circle");
	dotspoorest
	.attr("class", "poorest")
	.attr("cx", function(d) {
	return margin.left + widthScale(+d.Poorest);
	})
	.attr("r", heightScale.rangeBand()/2)
	.attr("cy", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	})
	.append("title")
	.text(function(d) {
	return d.country + " poorest: " + d.Poorest + "%";
	});
	// Make the dots for richest
	var dotsrichest = svg.selectAll("circle.richest")
	.data(data)
	.enter()
	.append("circle");
	dotsrichest
	.attr("class", "richest")
	.attr("cx", function(d) {
	return margin.left + widthScale(+d.Richest);
	})
	.attr("r", heightScale.rangeBand()/2)
	.attr("cy", function(d) {
	return heightScale(d.country) + heightScale.rangeBand()/2;
	})
	.append("title")
	.text(function(d) {
	return d.country + " richest: " + d.Richest + "%";
	});
	// add the axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + margin.left + "," + height + ")")
	.call(xAxis);
	var yNode=svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + margin.left + ",0)")
	.call(yAxis);
	svg.append("text")
	.attr("class", "xlabel")
	.attr("transform", "translate(" + (margin.left + width / 2) + " ," +
	(height + margin.bottom) + ")")
	.style("text-anchor", "middle")
	.attr("dy", "12")
	.text("Survival rate-Percent");
	//get the biggest difference
	var difference=[];
	data.forEach(function(d, i){
	difference.push(d.Poorest- d.Richest);
	}
	);
	var most=Math.max.apply(Math, difference);
	var one=0;
	data.forEach(function(d, i){
	if(d.Poorest- d.Richest===most) {one=i;}
	}
	);
	var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array
	d3.select(allYAxisLabels[one]).style("font-size", "20px");
	});
country	year	total	Male	Female	Poorest	Second	Middle	Fourth	Richest	ratio	difference
Argentina	2012	97	95	98	93	96	99	99	99	0.939393939	-6
Belarus	2012	100	100	100	100	100	100	100	100	1	0
Bosnia and Herzegovina	2012	100	99	100	100	100	100	98	100	1	0
Haiti	2012	88	88	88	86	85	88	88	94	0.914893617	-8
Honduras	2012	84	82	86	72	80	85	95	97	0.742268041	-25
Kyrgyzstan	2012	100	100	100	100	99	100	100	99	1.01010101	1
Lao People's Democratic Republic	2012	95	95	95	93	94	92	98	100	0.93	-7
Niger	2012	92	92	92	90	94	87	90	96	0.9375	-6
Peru	2012	87	87	88	83	86	89	89	93	0.892473118	-10
Thailand	2012	100	100	100	100	100	99	99	100	1	0
Tunisia	2012	97	97	96	93	97	95	100	99	0.939393939	-6
Ukraine	2012	100	100	100	100	100	100	100	100	1	0