mtorchiano/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Where we donate vs. Diseases that kill us - Slopegraph

This gist reports a redesign of the graph shown in the August 20, 2014 article by Vox.
The original diagram
uses two paired bubble charts with categorical levels encoded in colors.
The re-design presented here makes use of a slopegraph.
This solutions used Plotly.js as the Javascript graphical library.
This gist can be viewed using the bl.oks.org service.
Another redesign using paired barcharts is available as gist.

  
## diseases.csv

          
            Disease
            Money
            Deaths

            
              Heart disease
              54.1
              596577

            
              Suicide
              3.2
              39518

            
              Breast cancer
              257.85
              41374

            
              Diabetes
              4.2
              73831

            
              HIV/AIDS
              14
              7683

            
              Prostate cancer
              147
              21176

            
              Motor Neuron Disease
              22.9
              6849

            
              Obstructive Pulmonary Disease
              7
              142942

## index.html
<!DOCTYPE html>
<html>
<head>	<meta charset="utf-8"> </head>
<body>

<div id="slope"></div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
function plotSlope(id,data,group,names,suffixes){
	var Left = {};
	var Right = {};
	for(var i=0; i<data.length; ++i){
		if(!Left.min||Left.min>+data[i][names[0]]){
			Left.min = +data[i][names[0]];
		}
		if(!Left.max||Left.max<+data[i][names[0]]){
			Left.max = +data[i][names[0]];
		}
		if(!Right.min||Right.min>+data[i][names[1]]){
			Right.min = +data[i][names[1]];
		}
		if(!Right.max||Right.max<+data[i][names[1]]){
			Right.max = +data[i][names[1]];
		}
	}
	var scale = function(x){
		return 1+(x-this.min)/this.range;
	};
	Left.range = Left.max-Left.min;
	Left.scale = scale;
	Right.range = Right.max-Right.min;
	Right.scale = scale;

	var tracce = [];
	var levels = names;
	for(var i=0; i<data.length; ++i){
		var l = Left.scale(data[i][names[0]]);
		var r = Right.scale(data[i].Deaths);
		tracce.push({
			name: data[i][group],
			x : levels,
			y : [l,r],
			text : [data[i][group] + ": " + data[i][names[0]] + suffixes[0],
					data[i][group] + ": " + data[i][names[1]] + suffixes[1]],
			type : "scatter",
 			hoverinfo: 'text',
		});
	}
	var annotations = [{
			xanchor:'right',
			x: levels[0],
			y: 2,
			text: Left.max + suffixes[0] + " ",
			showarrow: false,
			font:{size:15},
	},{
			xanchor:'right',
			x: levels[0],
			y: 1,
			text: Left.min + suffixes[0] + " ",
			showarrow: false,
			font:{size:15},
	},{
			xanchor:'left',
			x: levels[1],
			y: 2,
			text: " " + Right.max + suffixes[1],
			showarrow: false,
			font:{size:15},
	},{
			xanchor:'left',
			x: levels[1],
			y: 1,
			text: " " + Right.min + suffixes[1],
			showarrow: false,
			font:{size:15},
		}
	];

	var layout = {
		hovermode: "name",
		margin:{
			l:80,r:40,t:10,b:40
 		},
 		yaxis : {
 			showgrid:false,
 			showticklabels: false,
 		},
 		xaxis : {
 			tickfont: { size:25,},
 		},
 		hovermode: "closest",
 		annotations: annotations,
	};
	var g = document.getElementById(id);
	g.innerHTML = "";
	Plotly.newPlot(g,tracce,layout,{displayModeBar:false,});
}

window.onload = function(){
	Plotly.d3.csv("diseases.csv",function(error,data){
		if(error){
			console.log("Error while loading data: " + error);
			return;
		}

		plotSlope('slope',data,'Disease',
						["Money","Deaths"],
						["M$",""]);
	});
};
</script>
</body>
</html>
Disease	Money	Deaths
Heart disease	54.1	596577
Suicide	3.2	39518
Breast cancer	257.85	41374
Diabetes	4.2	73831
HIV/AIDS	14	7683
Prostate cancer	147	21176
Motor Neuron Disease	22.9	6849
Obstructive Pulmonary Disease	7	142942
	<!DOCTYPE html>
	<html>
	<head> <meta charset="utf-8"> </head>
	<body>

	<div id="slope"></div>

	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<script>
	function plotSlope(id,data,group,names,suffixes){
	var Left = {};
	var Right = {};
	for(var i=0; i<data.length; ++i){
	if(!Left.min\|\|Left.min>+data[i][names[0]]){
	Left.min = +data[i][names[0]];
	}
	if(!Left.max\|\|Left.max<+data[i][names[0]]){
	Left.max = +data[i][names[0]];
	}
	if(!Right.min\|\|Right.min>+data[i][names[1]]){
	Right.min = +data[i][names[1]];
	}
	if(!Right.max\|\|Right.max<+data[i][names[1]]){
	Right.max = +data[i][names[1]];
	}
	}
	var scale = function(x){
	return 1+(x-this.min)/this.range;
	};
	Left.range = Left.max-Left.min;
	Left.scale = scale;
	Right.range = Right.max-Right.min;
	Right.scale = scale;

	var tracce = [];
	var levels = names;
	for(var i=0; i<data.length; ++i){
	var l = Left.scale(data[i][names[0]]);
	var r = Right.scale(data[i].Deaths);
	tracce.push({
	name: data[i][group],
	x : levels,
	y : [l,r],
	text : [data[i][group] + ": " + data[i][names[0]] + suffixes[0],
	data[i][group] + ": " + data[i][names[1]] + suffixes[1]],
	type : "scatter",
	hoverinfo: 'text',
	});
	}
	var annotations = [{
	xanchor:'right',
	x: levels[0],
	y: 2,
	text: Left.max + suffixes[0] + " ",
	showarrow: false,
	font:{size:15},
	},{
	xanchor:'right',
	x: levels[0],
	y: 1,
	text: Left.min + suffixes[0] + " ",
	showarrow: false,
	font:{size:15},
	},{
	xanchor:'left',
	x: levels[1],
	y: 2,
	text: " " + Right.max + suffixes[1],
	showarrow: false,
	font:{size:15},
	},{
	xanchor:'left',
	x: levels[1],
	y: 1,
	text: " " + Right.min + suffixes[1],
	showarrow: false,
	font:{size:15},
	}
	];

	var layout = {
	hovermode: "name",
	margin:{
	l:80,r:40,t:10,b:40
	},
	yaxis : {
	showgrid:false,
	showticklabels: false,
	},
	xaxis : {
	tickfont: { size:25,},
	},
	hovermode: "closest",
	annotations: annotations,
	};
	var g = document.getElementById(id);
	g.innerHTML = "";
	Plotly.newPlot(g,tracce,layout,{displayModeBar:false,});
	}

	window.onload = function(){
	Plotly.d3.csv("diseases.csv",function(error,data){
	if(error){
	console.log("Error while loading data: " + error);
	return;
	}

	plotSlope('slope',data,'Disease',
	["Money","Deaths"],
	["M$",""]);
	});
	};
	</script>
	</body>
	</html>