All examples By author By category About

mbaba

Full window Github gist

Workplace violence - module 4 exercise

<!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 = 600;
			var padding = [20, 30, 20, 100];

var widthScale = d3.scale.linear()
				.range([ 0, w - padding[1] - padding[3] ])
				.domain([0, 100]);

var heightScale = d3.scale.ordinal()
				.rangeRoundBands([ padding[0], h - padding[2] ], 0.15);

var average = d3.scale.ordinal()
  				.rangeBands([ padding[0], h ], 0);

var xAxis = d3.svg.axis()
				.scale(widthScale)
				.tickFormat(function(d) { return d + "%"; })
				.orient("bottom");

var yAxis = d3.svg.axis()
				.scale(heightScale)
				.orient("left");

//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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum = d3.sum(data, function(d) { return +d.time_pressure; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5
			 var avgerageLabelY = widthScale(dataSum/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX) 
				    .attr("x", avgerageLabelY) 
				    .text("Average = " + parseFloat(dataSum/data.length).toFixed(1) + "%");

});

//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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg2.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg2.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum2 = d3.sum(data, function(d) { return +d.discrimination; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum2/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum2/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg2.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg2.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum2/data.length).toFixed(1) + "%");

});

//communication_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left2")
				.append("p")
				.attr("class", "chart-title")
				.text("Communication Problem");

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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg3.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg3.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum3 = d3.sum(data, function(d) { return +d.communication_problem; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum3/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum3/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg3.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg3.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum3/data.length).toFixed(1) + "%");

});

//cooperation_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right2")
				.append("p")
				.attr("class", "chart-title")
				.text("Cooperation Problem");

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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg4.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg4.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum4 = d3.sum(data, function(d) { return +d.cooperation_problem; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum4/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum4/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg4.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg4.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum4/data.length).toFixed(1) + "%");

});

// //lack_control
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left3")
				.append("p")
				.attr("class", "chart-title")
				.text("Lack of Control");

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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg5.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg5.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum5 = d3.sum(data, function(d) { return +d.lack_control; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum5/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum5/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg5.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg5.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum5/data.length).toFixed(1) + "%");

});

//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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg6.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg6.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum6 = d3.sum(data, function(d) { return +d.job_insecurity; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum6/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum6/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg6.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg6.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum6/data.length).toFixed(1) + "%");

});

//difficult_customers
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left4")
				.append("p")
				.attr("class", "chart-title")
				.text("Difficult Customers");

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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg7.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg7.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum7 = d3.sum(data, function(d) { return +d.difficult_customers; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum7/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum7/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg7.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg7.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum7/data.length).toFixed(1) + "%");

});

//supervisor_employee_problem
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right4")
				.append("p")
				.attr("class", "chart-title")
				.text("Supervisor-Employee Problem");

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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg8.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg8.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum8 = d3.sum(data, function(d) { return +d.supervisor_employee_problem; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum8/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum8/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg8.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg8.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum8/data.length).toFixed(1) + "%");

});

//irregular_hours
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-left5")
				.append("p")
				.attr("class", "chart-title")
				.text("Irregular 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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg9.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg9.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum9 = d3.sum(data, function(d) { return +d.irregular_hours; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum9/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum9/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg9.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg9.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum9/data.length).toFixed(1) + "%");

});

//human_resources_policy
			d3.select("div", "#wrapper")
				.append("div")
				.attr("id", "col-right5")
				.append("p")
				.attr("class", "chart-title")
				.text("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);
				})

heightScale.domain(data.map(function(d) { return d.country; } ));
			average.domain(data.map(function(d) { return d.country; } ));

svg10.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate("+ padding[3] + "," + (h - padding[2]) + ")")
				.call(xAxis)
				.selectAll("text")
					.attr("x", 1)
					.attr("y", 6)
					.style("text-anchor", "start");

svg10.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);

var dataSum10 = d3.sum(data, function(d) { return +d.human_resources_policy; });

var avgerageLabelX = heightScale.rangeBand() + padding[0] - 5;
			 var avgerageLabelY = widthScale(dataSum10/data.length) + padding[3] + 5;

var line = d3.svg.line()
    			.x(function(d, i) {return widthScale(dataSum10/data.length) + padding[3]; })
      					
    			.y(function(d, i) { return average(d.country); }); 
   
  			svg10.append("path")
      			.datum(data)
      			.attr("class", "average")
      			.attr("d", line);

svg10.append("g")
				   	.append("text")
				   	.attr("class", "average-text")
				    .attr("y", avgerageLabelX)
				    .attr("x", avgerageLabelY)
				    .text("Average = " + parseFloat(dataSum10/data.length).toFixed(1) + "%");

});

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

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

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