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.
| 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> |
/cdn0.vox-cdn.com/uploads/chorus_asset/file/676096/fundrasing4disease.0.jpg){kind=link}