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