Workplace Violence - "small" multiples attempt

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title>Workplace Violence</title>
</head>

<body>
<div id="wrapper">
	
	<div class="text">
		<h1>Workplace Violence</h1>
	</div>

<div class="text">
		<p>
		The European Survey of Enterprises on New and Emerging Risks (ESENER) asks managers and workers' health and safety representatives about how health and safety risks are managed at their workplace, with a particular focus on the newer "psychosocial risks", such as work-related stress, violence and harassment. Data is drawn from 36,000 interviews carried out in 31 countries. Survey was cunducted in 2009.
		</p>

<p>
		Charts present percentage of answers <b>Yes</b> to question "Several factors can contribute to stress, violence and harassment at work; they concern the way work is organised and are often referred to as ‘psychosocial risks’. Please tell me whether any of the following psychosocial risks are a concern in your establishment:
		<ol>
			<li>Time pressure</li>
			<li>Discrimination</li>
			<li>Poor communication between management and employees</li>
			<li>Poor co-operation amongst colleagues</li>
			<li>Lack of employee control in organising their work</li>
			<li>Job insecurity</li>
			<li>Having to deal with difficult customers, patients, pupils, etc.</li>
			<li>Problems in supervisor-employee relationships</li>
			<li>Long or irregular working hoursU</li>
			<li>Unclear human resources policy</li>
		</ol>
		</p>
		<p>
		Data source: <a href="https://osha.europa.eu/sub/esener/en/" target="_blank">European Agency for Safety and Health at Work</a>
		</p>
	</div>
	
	<script type="text/javascript">

var w = 800;
			var h = 625;
			
//time_pressure
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left1")
				.append("p")
				.attr("class", "chart-title")
				.text("Time pressure");

var svg = d3.select("#col-left1")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.time_pressure, +b.time_pressure);
				})

//discrimination
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right1")
				.append("p")
				.attr("class", "chart-title")
				.text("Discrimination");

var svg2 = d3.select("#col-right1")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.discrimination, +b.discrimination);
				})

//communication_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left2")
				.append("p")
				.attr("class", "chart-title")
				.text("Poor communication between management and employees");

var svg3 = d3.select("#col-left2")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.communication_problem, +b.communication_problem);
				})

});

//cooperation_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right2")
				.append("p")
				.attr("class", "chart-title")
				.text("Poor co-operation amongst colleagues");

var svg4 = d3.select("#col-right2")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.cooperation_problem, +b.cooperation_problem);
				})

});

//lack_control
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left3")
				.append("p")
				.attr("class", "chart-title")
				.text("Lack of employee control in organising their work");

var svg5 = d3.select("#col-left3")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.lack_control, +b.lack_control);
				})

});

//job_insecurity
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right3")
				.append("p")
				.attr("class", "chart-title")
				.text("Job insecurity");

var svg6 = d3.select("#col-right3")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.job_insecurity, +b.job_insecurity);
				})

});

//difficult_customers
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left4")
				.append("p")
				.attr("class", "chart-title")
				.text("Having to deal with difficult customers, patients, pupils");

var svg7 = d3.select("#col-left4")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.difficult_customers, +b.difficult_customers);
				})

});

//supervisor_employee_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right4")
				.append("p")
				.attr("class", "chart-title")
				.text("Problems in supervisor-employee relationships");

var svg8 = d3.select("#col-right4")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.supervisor_employee_problem, +b.supervisor_employee_problem);
				})

});

//irregular_hours
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left5")
				.append("p")
				.attr("class", "chart-title")
				.text("Long or irregular working hours");

var svg9 = d3.select("#col-left5")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.irregular_hours, +b.irregular_hours);
				})

});

//human_resources_policy
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right5")
				.append("p")
				.attr("class", "chart-title")
				.text("Unclear human resources policy");

var svg10 = d3.select("#col-right5")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

d3.csv("psychosocial_risk.csv", function(data) {
				data.sort(function(a, b) {
					return d3.ascending(+a.human_resources_policy, +b.human_resources_policy);
				})

});

</script>
</div>
</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js