|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Scatterplot</title> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
background-color: white; |
|
font-family: Helvetica, Arial, sans-serif; |
|
} |
|
|
|
h1 { |
|
font-size: 18px; |
|
margin: 70; |
|
} |
|
|
|
p { |
|
font-size: 12px; |
|
margin: 12px 0 0 0; |
|
stroke: red; |
|
} |
|
|
|
p2 { |
|
font-size: 8px; |
|
margin: 12px 0 0 0; |
|
stroke: red; |
|
} |
|
|
|
svg { |
|
background-color: white; |
|
} |
|
|
|
circle:hover { |
|
fill: #8c96c6; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: black; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 9px; |
|
} |
|
|
|
.xlabel{ |
|
font-family: sans-serif; |
|
font-size: 9px; |
|
} |
|
|
|
.ylabel{ |
|
font-family: sans-serif; |
|
font-size: 9px; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>Attitudes towards Domestic Violence</h1> |
|
|
|
<p>This data is compiled from individual surveys conducted by the UN, UNICEF and USAID through several projects.</p> <p>Each person was asked whether they felt domestic violence was acceptable.</p> |
|
|
|
<p>It appears from the scatterplot on the left that in most countries more women than men say they find domestic violence acceptable.</p> |
|
|
|
<p>It appears from the scatterplot on the right that more of the poorest women find domestic violence acceptable than the wealthiest women.</p> |
|
|
|
<p>The lack of attitude data from North American and European countries is problematic. I am working on a project to change this lack of data.</p> |
|
|
|
<p2>Sources: <a href="http://www.dhsprogram.com/">DHS</a>, 2000-2014 <a href="http://www.unicef.org/statistics/index_24302.html">MICS</a>, 2006-2014</p2> |
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
var w = 400; |
|
var h = 400; |
|
var padding = [ 20, 10, 50, 55 ]; //Top, right, bottom, left |
|
|
|
var padding2 = [ 20, 10, 50, 55 ]; |
|
|
|
var xScale = d3.scale.linear() |
|
.range([ padding[3], w - padding[1] - padding[3] ]); |
|
|
|
var yScale2 = d3.scale.linear() |
|
.range([ padding2[0], h - padding2[2] ]); |
|
|
|
var xScale2 = d3.scale.linear() |
|
.range([ padding2[3], w - padding2[1] - padding2[3] ]); |
|
|
|
var yScale = d3.scale.linear() |
|
.range([ padding[0], h - padding[2] ]); |
|
|
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(11) |
|
.tickFormat(function(d) { |
|
return d + "%"; |
|
}); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left") |
|
.ticks(10) |
|
.tickFormat(function(d) { |
|
return d + "%"; |
|
}); |
|
|
|
var xAxis2 = d3.svg.axis() |
|
.scale(xScale2) |
|
.orient("bottom") |
|
.ticks(10) |
|
.tickFormat(function(d) { |
|
return d + "%"; |
|
}); |
|
|
|
var yAxis2 = d3.svg.axis() |
|
.scale(yScale2) |
|
.orient("left") |
|
.tickFormat(function(d) { |
|
return d + "%"; |
|
}); |
|
|
|
|
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
|
|
d3.csv("VAWAttitudeUNICEFBoth Sexes2.csv", function(data) { |
|
|
|
xScale.domain([ |
|
d3.min(data, function(d) { |
|
return +d.MenTotal; |
|
}), |
|
100 |
|
]); |
|
|
|
yScale.domain([ |
|
100, |
|
d3.min(data, function(d) { |
|
return +d.WomenTot; |
|
}) |
|
]); |
|
|
|
var circles = svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
circles.attr("cx", function(d) { |
|
if (d.MenTotal === "NA") { |
|
return 50; |
|
} else { |
|
return xScale(d.MenTotal); |
|
} |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(d.WomenTot); |
|
}) |
|
.attr("r", 0,1) |
|
.attr("fill", "#C91826") |
|
.append("title") |
|
.text(function(d) { |
|
if(d.MenTotal === "NA") { |
|
return "In " + d.Country + ", men's opinion is missing and " + d.WomenTot + "% of women accept domestic violence"; |
|
} else { |
|
return "In " + d.Country + ", " + d.MenTotal + "% of men and " + d.WomenTot + "% of women accept domestic violence"; |
|
} |
|
}); |
|
|
|
circles.sort(function(a, b) { |
|
return d3.ascending(+a.WomenTot, +a.WomenTot); |
|
}) |
|
.transition() |
|
.delay(function(d, i) { |
|
return i * 75; |
|
}) |
|
.ease("circle") |
|
.duration(2000) |
|
.attr("r", 5); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")") |
|
.call(xAxis); |
|
|
|
svg.append("text") |
|
.attr("class", "xlabel") |
|
.attr("text-anchor", "end") |
|
.attr("x", w/2+ 115) |
|
.attr("y", h - 6) |
|
.text("Percent of Men who say domestic violence is acceptable"); |
|
|
|
svg.append("text") |
|
.attr("class", "xlabel") |
|
.attr("text-anchor", "end") |
|
.attr("x", -370) |
|
.attr("y", 50) |
|
.attr("transform", function(d) { |
|
return "rotate(-90)" |
|
}) |
|
.text("Missing"); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.attr("transform", "translate(" + (padding[3] - 10) + ",0)") |
|
.call(yAxis); |
|
|
|
svg.append("text") |
|
.attr("class", "ylabel") |
|
.attr("text-anchor", "end") |
|
.attr("y", 3) |
|
.attr("x", -45) |
|
.attr("dy", ".75em") |
|
.attr("transform", "rotate(-90)") |
|
.text("Percent of Women who say domestic violence is acceptable"); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
var svg2 = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
; |
|
|
|
|
|
|
|
d3.csv("VAWAttitudeUNICEFBoth Sexes2.csv", function(data) { |
|
|
|
xScale2.domain([ |
|
d3.min(data, function(d) { |
|
return +d.WomPoorest; |
|
}), |
|
100 |
|
]); |
|
|
|
yScale2.domain([ |
|
100, |
|
d3.min(data, function(d) { |
|
return +d.WomRichest; |
|
}) |
|
]); |
|
|
|
var circles = svg2.selectAll("circle") |
|
|
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
circles.attr("cx", function(d) { |
|
if (d.WomPoorest=== "NA") { |
|
return 50; |
|
} else { |
|
return xScale2(d.WomPoorest); |
|
} |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale2(d.WomRichest); |
|
}) |
|
.attr("r", 0.1) |
|
.attr("fill", "#F2555C") |
|
.append("title") |
|
.text(function(d) { |
|
if(d.WomPoorest === "NA") { |
|
return "In " + d.Country + ", men's opinion is missing and " + d.WomRichest + "% of women accept domestic violence"; |
|
} else { |
|
return "In " + d.Country + ", " + d.WomPoorest + "% of the poorest women and " + d.WomRichest + "% of the wealthiest women accept domestic violence"; |
|
} |
|
}); |
|
|
|
|
|
circles.sort(function(a, b) { |
|
return d3.ascending(+a.WomPoorest, +a.WomPoorest); |
|
}) |
|
.transition() |
|
.delay(function(d, i) { |
|
return 7500+ i * 175; |
|
}) |
|
.ease("circle") |
|
.duration(2000) |
|
.attr("r", 5); |
|
|
|
svg2.append("g") |
|
.attr("class", "x axis") |
|
.transition() |
|
.delay(7000) |
|
.ease("linear") |
|
.attr("transform", "translate(0," + (h - padding2[2] + 10) + ")") |
|
.call(xAxis2) |
|
; |
|
|
|
svg2.append("text") |
|
.transition() |
|
.delay(7000) |
|
.attr("class", "xlabel") |
|
.attr("text-anchor", "end") |
|
.attr("x", w/2 + 155) |
|
.attr("y", h - 6) |
|
.text("Percent of Country's Poorest Women who say domestic violence is acceptable"); |
|
|
|
svg2.append("g") |
|
.attr("class", "y axis") |
|
.transition() |
|
.delay(7000) |
|
.ease("linear") |
|
.attr("transform", "translate(" + (padding2[3] - 10) + ",0)") |
|
.call(yAxis2); |
|
|
|
svg2.append("text") |
|
.transition() |
|
.delay(7000) |
|
.attr("class", "ylabel") |
|
.attr("text-anchor", "end") |
|
.attr("y", 1) |
|
.attr("x", -25) |
|
.attr("dy", ".75em") |
|
.attr("transform", "rotate(-90)") |
|
.text("Percent of Country's Wealthiest Women who say domestic violence is acceptable"); |
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |