mtorchiano/README.md

## README.md

      
    Raw
  

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

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 two paired opposed bar charts.
This solutions used Plotly.js as the Javascript graphical library.
This gist can be viewed using the bl.oks.org service at the url.
Another redesign based on a slopechart
is available as a 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>

<span style="margin:10%">
	Funds: <input type="radio" name="sort" value="Money" checked>
</span>
<span style="margin:10%">
	Deaths: <input type="radio" name="sort" value="Deaths">
</span>
<div id="bar"></div>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
function wrap(str,width,sep){
  var regex = '.{1,' +width+ '}(\\s|$)|\\S+?(\\s|$)';
  return str.match( RegExp(regex, 'g') ).join( sep );
}

function verticalAnnotations(levels,pos,width){
	var annotations = [];
	width = width || 15;
	pos = pos || 0.5;
	for(var i=0; i<levels.length; ++i){
		annotations.push({
			xref:'paper',
			xanchor:'center',
			x: pos,
			y: levels[i],
			text: wrap(levels[i],width,"<br>\n"),
			showarrow: false,
		});
	}
	return annotations;
}

function showBars(data,sort){
	// sort ascending by 'sort' element
	data.sort(function(a,b){
		return a[sort] - b[sort];
	});

	// build the trace arrays
	var disease= [];
	var money = [];
	var deaths = [];
	var annotations=[];
	for(var i=0; i<data.length; ++i){
		disease.push(data[i].Disease);
		money.push(data[i].Money);
		deaths.push(data[i].Deaths);
	}

	var tracce = [{
		name : "Money",
		y : disease,
		x : money,
		type : 'bar',
		orientation : 'h',
		hoverinfo: 'x', // just the money
	},{
		name : "Deaths",
		y : disease,
		x : deaths,
		type : 'bar',
		orientation : 'h',
		xaxis: 'x2', // second axis
		hoverinfo: 'x', // just the deaths
	}];
	var layout = {
		xaxis : {
			title: 'Fundings',
			domain: [0,0.44],
			autorange: 'reversed',
			ticksuffix:" M$",
			showticksuffix:"first",
		},
		xaxis2 : {
			title: 'Deaths',
			domain: [0.56,1.0],
		},
		yaxis:{
			showticklabels: false, // hide the labels
			// annotations are used instead!
		},
		annotations: verticalAnnotations(disease),
		showlegend: false,
		hovermode: "y",
		margin:{
			l:40,r:40,t:10,b:40
		},
	};
	var g = document.getElementById('bar');
	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;
		}

		showBars(data,"Money");

		var radios = document.getElementsByName('sort');
		var change = function(){
			var sort = this.value;
			showBars(data,sort);
		};
		for(var i=0; i<radios.length; ++i){
			radios[i].onchange = change;
		}
	});
};
</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>

	<span style="margin:10%">
	Funds: <input type="radio" name="sort" value="Money" checked>
	</span>
	<span style="margin:10%">
	Deaths: <input type="radio" name="sort" value="Deaths">
	</span>
	<div id="bar"></div>

	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
	<script>
	function wrap(str,width,sep){
	var regex = '.{1,' +width+ '}(\\s\|$)\|\\S+?(\\s\|$)';
	return str.match( RegExp(regex, 'g') ).join( sep );
	}

	function verticalAnnotations(levels,pos,width){
	var annotations = [];
	width = width \|\| 15;
	pos = pos \|\| 0.5;
	for(var i=0; i<levels.length; ++i){
	annotations.push({
	xref:'paper',
	xanchor:'center',
	x: pos,
	y: levels[i],
	text: wrap(levels[i],width,"<br>\n"),
	showarrow: false,
	});
	}
	return annotations;
	}

	function showBars(data,sort){
	// sort ascending by 'sort' element
	data.sort(function(a,b){
	return a[sort] - b[sort];
	});

	// build the trace arrays
	var disease= [];
	var money = [];
	var deaths = [];
	var annotations=[];
	for(var i=0; i<data.length; ++i){
	disease.push(data[i].Disease);
	money.push(data[i].Money);
	deaths.push(data[i].Deaths);
	}

	var tracce = [{
	name : "Money",
	y : disease,
	x : money,
	type : 'bar',
	orientation : 'h',
	hoverinfo: 'x', // just the money
	},{
	name : "Deaths",
	y : disease,
	x : deaths,
	type : 'bar',
	orientation : 'h',
	xaxis: 'x2', // second axis
	hoverinfo: 'x', // just the deaths
	}];
	var layout = {
	xaxis : {
	title: 'Fundings',
	domain: [0,0.44],
	autorange: 'reversed',
	ticksuffix:" M$",
	showticksuffix:"first",
	},
	xaxis2 : {
	title: 'Deaths',
	domain: [0.56,1.0],
	},
	yaxis:{
	showticklabels: false, // hide the labels
	// annotations are used instead!
	},
	annotations: verticalAnnotations(disease),
	showlegend: false,
	hovermode: "y",
	margin:{
	l:40,r:40,t:10,b:40
	},
	};
	var g = document.getElementById('bar');
	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;
	}

	showBars(data,"Money");

	var radios = document.getElementsByName('sort');
	var change = function(){
	var sort = this.value;
	showBars(data,sort);
	};
	for(var i=0; i<radios.length; ++i){
	radios[i].onchange = change;
	}
	});
	};
	</script>
	</body>
	</html>