{"id":1221,"date":"2012-05-03T22:45:14","date_gmt":"2012-05-04T03:45:14","guid":{"rendered":"https:\/\/ideasillustrated.com\/blog\/?p=1221"},"modified":"2012-05-03T22:45:14","modified_gmt":"2012-05-04T03:45:14","slug":"much-ado-about-coughin","status":"publish","type":"post","link":"https:\/\/ideasillustrated.com\/blog\/2012\/05\/03\/much-ado-about-coughin\/","title":{"rendered":"Much Ado About Coughin&#8217;"},"content":{"rendered":"<p>Whether you know it as whooping cough or the 100 days&#8217; cough, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Pertussis\" target=\"_blank\" rel=\"nofollow noopener\">pertussis<\/a> &#8212; a bacterial infection that causes severe coughing fits &#8212; is no fun. According to Wikipedia, it affects nearly 50 million people annually and\u00a0causes almost 300,000 deaths worldwide. Although most of these deaths occur in developing nations, pertussis is the only <a href=\"http:\/\/en.wikipedia.org\/wiki\/DPT_vaccine\" target=\"_blank\" rel=\"nofollow noopener\">vaccine-preventable disease<\/a> that is associated with increasing deaths in the U.S.<\/p>\n<p>Pertussis can be particularly dangerous for young children, so health departments keep a pretty close eye on local\u00a0outbreaks and ask parents to keep their kids home from school while undergoing treatment. Unfortunately, the infection is very contagious and early symptoms are pretty mild. Combine this with some\u00a0parental <a href=\"http:\/\/online.wsj.com\/article\/SB124165229009493675.html\" target=\"_blank\" rel=\"nofollow noopener\">fears surrounding the vaccine<\/a> and you&#8217;ve got a pretty good recipe for the occasional quasi-epidemic.<\/p>\n<p>This year&#8217;s &#8220;winner&#8221; in the whooping cough stakes\u00a0is apparently Wisconsin. As\u00a0of April 21, 2012, the CDC <a href=\"http:\/\/wonder.cdc.gov\/mmwr\/mmwr_reps.asp?mmwr_year=2012&amp;mmwr_week=16&amp;mmwr_table=2G\" target=\"_blank\" rel=\"nofollow noopener\">estimates<\/a> that the Badger State has had over 1,000 cases\u00a0of pertussis, which is about as many cases as\u00a0all of the Pacific Coastal states combined. Among these unlucky cheeseheads\u00a0were the two fully-vaccinated kids that currently live under my roof. (My wife speculates that they picked it up at an extremely packed showing of <em>The Hunger Games<\/em>.)<\/p>\n<p>Now that the quarantine period is over and my two little data points are on the mend, I thought it would be interesting to use some of the CDC data to experiment with Google Charts. I was especially interested to note that Google had a <a href=\"http:\/\/en.wikipedia.org\/wiki\/Treemapping\" target=\"_blank\" rel=\"nofollow noopener\">treemap <\/a>feature. In the chart below, the size of the rectangles represents the current number of whooping cough cases, while the colors represent the <span style=\"background-color: #996600; color: #cccccc;\">increase<\/span> or <span style=\"background-color: #003366; color: #cccccc;\">decrease<\/span> over the same period in 2011. (Note: in the revised treemap option, the size of the rectangles represents the current number of whooping cough cases per million in population.)<\/p>\n<p>Pretty simple example, no drill downs or tooltips for now.<br \/>\n<\/p>\n<p style=\"text-align: center;\"><strong>U.S. Cases of Whooping Cough (April 21, 2012)<\/strong><\/p>\n<p style=\"text-align: center;\">Toggle Between Cases and Cases per Million<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/www.google.com\/jsapi \"><\/script><br \/>\n<script type=\"text\/javascript\"> \ngoogle.load(\"visualization\", \"1\", {packages:[\"treemap\"]});\ngoogle.setOnLoadCallback(initialize); \nfunction initialize() { \n    var dt1 = google.visualization.arrayToDataTable([\n    ['Location', 'Parent', '2012 Cases', '2011-2012 Change'],\n    ['UNITED STATES',null,0,0],\n    ['Connecticut','UNITED STATES',24,7],\n    ['Maine','UNITED STATES',32,-10],\n    ['Massachusetts','UNITED STATES',86,27],\n    ['New Hampshire','UNITED STATES',23,8],\n    ['Rhode Island','UNITED STATES',18,9],\n    ['Vermont','UNITED STATES',103,102],\n    ['New Jersey','UNITED STATES',129,79],\n    ['New York (Upstate)','UNITED STATES',652,527],\n    ['New York City','UNITED STATES',137,129],\n    ['Pennsylvania','UNITED STATES',390,135],\n    ['Illinois','UNITED STATES',297,79],\n    ['Indiana','UNITED STATES',43,-43],\n    ['Michigan','UNITED STATES',156,-169],\n    ['Ohio','UNITED STATES',241,-74],\n    ['Wisconsin','UNITED STATES',1006,872],\n    ['Iowa','UNITED STATES',101,44],\n    ['Kansas','UNITED STATES',35,2],\n    ['Missouri','UNITED STATES',172,80],\n    ['Nebraska','UNITED STATES',14,-16],\n    ['North Dakota','UNITED STATES',16,3],\n    ['South Dakota','UNITED STATES',4,2],\n    ['Delaware','UNITED STATES',8,-1],\n    ['D.C.','UNITED STATES',1,0],\n    ['Florida','UNITED STATES',110,19],\n    ['Georgia','UNITED STATES',29,-36],\n    ['Maryland','UNITED STATES',54,11],\n    ['North Carolina','UNITED STATES',119,33],\n    ['South Carolina','UNITED STATES',39,-5],\n    ['Virginia','UNITED STATES',107,-20],\n    ['West Virginia','UNITED STATES',24,-8],\n    ['Alabama','UNITED STATES',47,11],\n    ['Kentucky','UNITED STATES',73,24],\n    ['Mississippi','UNITED STATES',25,19],\n    ['Tennessee','UNITED STATES',35,-9],\n    ['Arkansas','UNITED STATES',17,-4],\n    ['Louisiana','UNITED STATES',3,-7],\n    ['Texas','UNITED STATES',275,20],\n    ['Arizona','UNITED STATES',266,-77],\n    ['Colorado','UNITED STATES',129,-58],\n    ['Idaho','UNITED STATES',27,-6],\n    ['Montana','UNITED STATES',68,17],\n    ['Nevada','UNITED STATES',11,3],\n    ['New Mexico','UNITED STATES',77,30],\n    ['Utah','UNITED STATES',68,-132],\n    ['Alaska','UNITED STATES',20,6],\n    ['California','UNITED STATES',101,-1017],\n    ['Hawaii','UNITED STATES',51,38],\n    ['Oregon','UNITED STATES',119,45],\n    ['Wyoming', 'UNITED STATES',5,3],\n    ['Washington','UNITED STATES',863,774] \n    ]);\n\/\/   ['Minnesota','UNITED STATES',0,0]\n\/\/   ['Oklahoma','UNITED STATES',0,-18],\n    var dt2 = google.visualization.arrayToDataTable([\n    ['Location', 'Parent', '2012 Cases per Million', '2011-2012 Change'],\n    ['UNITED STATES',null,0,0],\n    ['Alabama',  'UNITED STATES', 9.833179071, 11],\n    ['Alaska',  'UNITED STATES', 28.15985222, 6],\n    ['Arizona',  'UNITED STATES', 41.61440747, -77],\n    ['Arkansas',  'UNITED STATES', 5.830067924, -4],\n    ['California',  'UNITED STATES', 2.711121471, -1017],\n    ['Colorado',  'UNITED STATES', 25.65022322, -58],\n    ['Connecticut',  'UNITED STATES', 6.714982833, 7],\n    ['Delaware',  'UNITED STATES', 8.909340776, -1],\n    ['D.C.',  'UNITED STATES', 1.66189426, 0],\n    ['Florida',  'UNITED STATES', 5.850656151, 19],\n    ['Georgia',  'UNITED STATES', 2.993501109, -36],\n    ['Hawaii',  'UNITED STATES', 37.4917022, 38],\n    ['Idaho',  'UNITED STATES', 17.22397935, -6],\n    ['Illinois',  'UNITED STATES', 23.14772959, 79],\n    ['Indiana',  'UNITED STATES', 6.631911338, -43],\n    ['Iowa',  'UNITED STATES', 33.1543763, 44],\n    ['Kansas',  'UNITED STATES', 12.26728092, 2],\n    ['Kentucky',  'UNITED STATES', 16.82273014, 24],\n    ['Louisiana',  'UNITED STATES', 0.661759061, -7],\n    ['Maine',  'UNITED STATES', 24.08983702, -10],\n    ['Maryland',  'UNITED STATES', 9.352994482, 11],\n    ['Massachusetts',  'UNITED STATES', 13.13452549, 27],\n    ['Michigan',  'UNITED STATES', 15.78365865, -169],\n    ['Mississippi',  'UNITED STATES', 8.425176179, 19],\n    ['Missouri',  'UNITED STATES', 28.71966882, 80],\n    ['Montana',  'UNITED STATES', 68.72748038, 17],\n    ['Nebraska',  'UNITED STATES', 7.665600236, -16],\n    ['Nevada',  'UNITED STATES', 4.073242831, 3],\n    ['New Hampshire',  'UNITED STATES', 17.47096402, 8],\n    ['New Jersey',  'UNITED STATES', 14.67260638, 79],\n    ['New Mexico',  'UNITED STATES', 37.39354374, 30],\n    ['New York (Upstate)',  'UNITED STATES', 58.1981669, 527],\n    ['New York City',  'UNITED STATES', 16.75840979, 129],\n    ['North Carolina',  'UNITED STATES', 12.47970344, 33],\n    ['North Dakota',  'UNITED STATES', 23.78860258, 3],\n    ['Ohio',  'UNITED STATES', 20.89021076, -74],\n    ['Oregon',  'UNITED STATES', 31.06178581, 45],\n    ['Pennsylvania',  'UNITED STATES', 30.70291006, 135],\n    ['Rhode Island',  'UNITED STATES', 17.10104915, 9],\n    ['South Carolina',  'UNITED STATES', 8.431768829, -5],\n    ['South Dakota',  'UNITED STATES', 4.912918519, 2],\n    ['Tennessee',  'UNITED STATES', 5.515193965, -9],\n    ['Texas',  'UNITED STATES', 10.93632391, 20],\n    ['Utah',  'UNITED STATES', 24.60304969, -132],\n    ['Vermont',  'UNITED STATES', 164.6048445, 102],\n    ['Virginia',  'UNITED STATES', 13.37328822, -20],\n    ['Washington',  'UNITED STATES', 128.3359159, 774] ,\n    ['West Virginia',  'UNITED STATES', 12.95201172, -8],\n    ['Wisconsin',  'UNITED STATES', 176.8951075, 872],\n    ['Wyoming',  'UNITED STATES', 8.871130856, 3]\n    ]);\n    var chart1 = true; \n    var tree = new google.visualization.TreeMap(document.getElementById  ('chart_div'));\n        tree.draw(dt1, {\n          height: 450, \n          width: 730,\n          minColor: '#036',\n          midColor: '#ddd',\n          maxColor: '#960',\n          headerHeight: 15,\n          fontColor: 'black',\n          showScale: true});\n    document.getElementById('change').onclick = function () { \n        if (chart1) { \n            tree.draw(dt2, { \n                height: 450, \n          width: 730,\n          minColor: '#036',\n          midColor: '#ddd',\n          maxColor: '#960',\n          headerHeight: 15,\n          fontColor: 'black',\n          showScale: true});\n            chart1 = false; \n            this.value = 'Show Cases per State'; \n        } \n        else { \n            tree.draw(dt1, { \n                height: 450, \n          width: 730,\n          minColor: '#036',\n          midColor: '#ddd',\n          maxColor: '#960',\n          headerHeight: 15,\n          fontColor: 'black',\n          showScale: true});\n            chart1 = true; \n            this.value = 'Show Cases per Million per State'; \n        } \n    }; \n} \n<\/script><br \/>\n<input id=\"change\" type='button' onclick='f1()' value='Show Cases per Million per State' \/><\/p>\n<div id=\"chart_div\"><\/div>\n<p style=\"text-align: center;\">\n<p>Oh, and if you&#8217;re looking for Minnesota or Oklahoma, neither state has any current cases.<\/p>\n<p>My favorite online example of a treemap is the <a href=\"http:\/\/www.smartmoney.com\/map-of-the-market\/\" target=\"_blank\" rel=\"nofollow noopener\">Map of the Market<\/a> on SmartMoney.com. The navigation is very robust and you can nest groups of categories on the primary display. Google&#8217;s product allows you to drill down several levels but I couldn&#8217;t figure out a way to combine them in one view. I also like the way SmartMoney&#8217;s chart allows you to display additional information about each element when you hover over it with your mouse. I suspect that this is possible with the Google version but it is not explicitly called out in the documentation.<\/p>\n<p>Does it work? For comparision, here is the same data in a standard Google bar chart:<\/p>\n<p style=\"text-align: center;\"><strong>U.S. Cases of Whooping Cough (April 21, 2012)<\/strong><\/p>\n<p><script type=\"text\/javascript\">\n      google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});\n      google.setOnLoadCallback(drawChart2);\n      function drawChart2() {\n        var data2 = google.visualization.arrayToDataTable([\n          ['State', '2012 Cases', '2011 Cases'],\n    ['Wisconsin',1006,134],\n    ['Washington',863,89],\n    ['New York (Upstate)',652,125],\n    ['Pennsylvania',390,255],\n    ['Illinois',297,218],\n    ['Texas',275,255],\n    ['Arizona',266,343],\n    ['Ohio',241,315],\n    ['Missouri',172,92],\n    ['Michigan',156,325],\n    ['New York City',137,8],\n    ['Colorado',129,187],\n    ['New Jersey',129,50],\n    ['North Carolina',119,86],\n    ['Florida',110,91],\n    ['Oregon',119,74],\n    ['Virginia',107,127],\n    ['Vermont',103,1],\n    ['California',101,1118],\n    ['Iowa',101,57],\n    ['Massachusetts',86,59],\n    ['New Mexico',77,47],\n    ['Kentucky',73,49],\n    ['Montana',68,51],\n    ['Utah',68,200],\n    ['Maryland',54,43],\n    ['Hawaii',51,13],\n    ['Alabama',47,36],\n    ['Indiana',43,86],\n    ['South Carolina',39,44],\n    ['Kansas',35,33],\n    ['Tennessee',35,44],\n    ['Maine',32,42],\n    ['Georgia',29,65],\n    ['Idaho',27,33],\n    ['Mississippi',25,6],\n    ['Connecticut',24,17],\n    ['West Virginia',24,32],\n    ['New Hampshire',23,15],\n    ['Alaska',20,14],\n    ['Rhode Island',18,9],\n    ['Arkansas',17,21],\n    ['North Dakota',16,13],\n    ['Nebraska',14,30],\n    ['Nevada',11,8],\n    ['Delaware',8,9],\n    ['Wyoming',5,2],\n    ['South Dakota',4,2],\n    ['Louisiana',3,10],\n    ['D.C.',1,1],\n    ['Minnesota',0,0],\n    ['Oklahoma',0,18]\n        ]);\n        var options2 = {\n          colors:['#960','#036'],\n          chartArea:{left:80,top:10,width:\"75%\",height:\"100%\"}\n        };\n        var chart2 = new google.visualization.BarChart(document.getElementById('chart_div2'));\n        chart2.draw(data2, options2);\n      }\n    <\/script><\/p>\n<div id=\"chart_div2\" style=\"width: 730px; height: 900px;\"><\/div>\n<\/p>\n<p>The bar chart results in a lot of whitespace and it needs to be much bigger in order for all the bars to fit. I tried a bubble chart as well (below) but there are limitations for this format, too. In particular, clumps of bubbles are difficult to read. I had to <a href=\"http:\/\/en.wikipedia.org\/wiki\/Data_transformation_(statistics)\" target=\"_blank\" rel=\"nofollow noopener\">transform<\/a> the data using a logarithmic scale to spread the shapes out a bit.<br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/www.google.com\/jsapi\"><\/script><br \/>\n<script type=\"text\/javascript\">      \ngoogle.load(\"visualization\", \"1\", {packages:[\"corechart\"]});      google.setOnLoadCallback(drawBubble);      \nfunction drawBubble() {        \nvar dataBub = google.visualization.arrayToDataTable([          \n['Location','2012 Cases','2012 Cases per Million','Region','Population'],\n['AL',47,9.833179071,'East South Central',4802982],\n['AK',20,28.15985222,'Pacific',721523],\n['AZ',266,41.61440747,'Mountain',6412700],\n['AR',17,5.830067924,'West South Central',2926229],\n['CA',101,2.711121471,'Pacific',37341989],\n['CO',129,25.65022322,'Mountain',5044930],\n['CT',24,6.714982833,'New England',3581628],\n['DC',1,8.909340776,'South Atlantic',601723],\n['DE',8,1.66189426,'South Atlantic',900877],\n['FL',110,5.850656151,'South Atlantic',18900773],\n['GA',29,2.993501109,'South Atlantic',9727566],\n['HI',51,37.4917022,'Pacific',1366862],\n['ID',27,17.22397935,'Mountain',1573499],\n['IL',297,23.14772959,'East North Central',12864380],\n['IN',43,6.631911338,'East North Central',6501582],\n['IA',101,33.1543763,'West North Central',3053787],\n['KS',35,12.26728092,'West North Central',2863813],\n['KY',73,16.82273014,'East South Central',4350606],\n['LA',3,0.661759061,'West South Central',4553962],\n['ME',32,24.08983702,'New England',1333074],\n['MD',54,9.352994482,'South Atlantic',5789929],\n['MA',86,13.13452549,'New England',6559644],\n['MI',156,15.78365865,'East North Central',9911626],\n['MN',0,0,'West North Central',5314879],\n['MS',25,8.425176179,'East South Central',2978240],\n['MO',172,28.71966882,'West North Central',6011478],\n['MT',68,68.72748038,'Mountain',994416],\n['NE',14,7.665600236,'West North Central',1831825],\n['NV',11,4.073242831,'Mountain',2709432],\n['NH',23,17.47096402,'New England',1321445],\n['NJ',129,14.67260638,'Middle Atlantic',8807501],\n['NM',77,37.39354374,'Mountain',2067273],\n['NY (Upstate)',652,58.1981669,'Middle Atlantic',11245922],\n['NY (City)',137,16.75840979,'Middle Atlantic',8175133],\n['NC',119,12.47970344,'South Atlantic',9565781],\n['ND',16,23.78860258,'West North Central',675905],\n['OH',241,20.89021076,'East North Central',11568495],\n['OK',0,0,'West South Central',3764882],\n['OR',119,31.06178581,'Pacific',3848606],\n['PA',390,30.70291006,'Middle Atlantic',12734905],\n['RI',18,17.10104915,'New England',1055247],\n['SC',39,8.431768829,'South Atlantic',4645975],\n['SD',4,4.912918519,'West North Central',819761],\n['TN',35,5.515193965,'East South Central',6375431],\n['TX',275,10.93632391,'West South Central',25268418],\n['UT',68,24.60304969,'Mountain',2770765],\n['VT',103,164.6048445,'New England',630337],\n['VA',107,13.37328822,'South Atlantic',8037736],\n['WA',863,128.3359159,'Pacific',6753369],\n['WV',24,12.95201172,'South Atlantic',1859815],\n['WI',1006,176.8951075,'East North Central',5698230],\n['WY',5,8.871130856,'Mountain',568300]\n       ]);        \nvar optionsBub = {             \nhAxis: {title: '2012 Cases', logScale: true},\nvAxis: {title: '2012 Cases per Million', logScale: true},          \nbubble: {textStyle: {fontSize: 10}} , \nchartArea:{left:80,top:10,width:\"75%\",height:\"80%\"},\ncolors: ['#003366', '#00468C', '#0059B3', '#665500', '#8C5E00', '#B37700', '#999999', '#666666', '#000000']  };      \nvar chartBub = new google.visualization.BubbleChart(document.getElementById('chart_divBub'));        \nchartBub.draw(dataBub, optionsBub);      \n}    \n<\/script><\/p>\n<p style=\"text-align: center;\"><strong>U.S. Cases of Whooping Cough (April 21, 2012)<\/strong><\/p>\n<p style=\"text-align: center;\">2012 Cases vs. Cases per Million (Size=Population)<\/p>\n<div id=\"chart_divBub\" style=\"width: 730px; height: 500px;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Whether you know it as whooping cough or the 100 days&#8217; cough, pertussis &#8212; a bacterial infection that causes severe coughing fits &#8212; is no fun. According to Wikipedia, it affects nearly&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[27,58,105],"class_list":["post-1221","post","type-post","status-publish","format-standard","hentry","category-infographics","tag-data-visualization","tag-health","tag-treemap"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts\/1221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/comments?post=1221"}],"version-history":[{"count":0,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/posts\/1221\/revisions"}],"wp:attachment":[{"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/media?parent=1221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/categories?post=1221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ideasillustrated.com\/blog\/wp-json\/wp\/v2\/tags?post=1221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}