xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Scatterplot</title> <script type="text/javascript" src="https://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="https://www.dhsprogram.com/">DHS</a>, 2000-2014 <a href="https://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> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js