Оно того стоило

* Терроризм * Малярия * Пожары * Акулы * Смертная казнь * Землетрясения * Космические угрозы * Слоны годовой бюджет на предупреждение среднее ежегодное число смертей Источники: ООН, Всемирная организация здравоохранения, Пентагон, Государственный департамент США, Красный Крест, NASA, МЧС РФ, Глобальная программа борьбы с рисками катастроф (GFDRR), Институт международных исследований Уотсона при Университете Брауна, Программа по изучению акул Флоридского музея естествознания, Amnesty International, Национальная противопожарная ассоциация США, Международная ассоциация пожарных и спасательных работ (CTIF), The Lancet, расчеты Правила жизни. #line, circle{ pointer-events:none; } #paper-wrap{ position:relative; height:1600px; } #paper{ position:absolute; left:-900px; top: -267px; width:2500px; } #labels{ position:absolute; top: 115px; left:0px; list-style:none; margin: 0; padding: 0; font-size:13px; z-index:3; font-family:'Helvetica', 'Arial', sans-serif; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #labels li{ margin-bottom:182px; } #labels li span{ cursor:pointer; padding:5px; border:1px solid rgba(0, 0, 0, 0.3); } #labels li span:hover{ background:#888; color:white; border:1px solid #888; } #labels li.active span{ cursor:default; background:black; color:white; } #labels li.active span:hover{ background:black; border:1px solid black; } .info{ position:absolute; display:none; top:105px; left:0px; width:250px; height:50px; margin:0; padding:0; font-size:11px; z-index:2; font-family: 'Helvetica', 'Arial', sans-serif; line-height: 18px; color: #000; } #info_0{ top: 150px; } #info_1{ top: 350px; } #info_2{ top: 550px; } #info_3{ top: 750px; } #info_4{ top: 950px; } #info_5{ top: 1150px; } #info_6{ top: 1350px; } #info_7{ top: 1550px; } .info-desc{ position:absolute; width:140px; font-family: 'Helvetica', 'Arial', sans-serif; line-height: 18px; color: #000; text-align:left; font-size:11px; z-index:2; opacity:0; } #info-deaths{ text-align:right; } /* custom style outside post */ .related-articlepost-list{ position: relative; z-index: 3; } .item-rating{ z-index: 3; } .related-posts{ position:relative; z-index:100; } .post_edit{ z-index:2; } .post-header{ position:relative; z-index:2; } .lead{ position:relative; z-index:2; height:103px; } .post-head-line-bottom{ visibility:hidden; } .post-head-line-top{ opacity:0.5; } .article-detail-header{ position:relative; z-index:100; } $(function(){ var paperWidth = 2500; var paper = Raphael('paper', paperWidth, 3000); function getRandomInt (min, max) { return Math.floor(Math.random() * (max — min + 1)) + min; } var deathsValue = paper.text(910, 400, «1240000»).attr({'font-size':21, 'text-anchor':'end'}) var moneyValue = paper.text(1200, 400, «$350000»).attr({'font-size':21, 'text-anchor':'start'}) var dataSet = paper.set( deathsValue, moneyValue ).attr({'opacity':0}); var circleData = [ [ {'value':16000, 'textValue':'16 000'}, {'value':200000, 'textValue':'$200 000 000 000'}, ], [ {'value':1240000, 'textValue':'1 240 000'}, {'value':5900, 'textValue':'$5 900 000 000'} ], [ {'value':80000, 'textValue':'80 000'}, {'value':350000, 'textValue':'$350 000 000 000'} ], [ {'value':7, 'textValue':'7'}, {'value':30, 'textValue':'$30 000 000'} ], [ {'value':3000, 'textValue':'3 000'}, {'value':20, 'textValue':'$20 000 000'} ], [ {'value':80000, 'textValue':'80 000'}, {'value':15000, 'textValue':'$15 000 000 000'} ], [ {'value':0, 'textValue':'0'}, {'value':80, 'textValue':'$80 000 000'} ], [ {'value':500, 'textValue':'500'}, {'value':0, 'textValue':'$0'} ] ] // default to highlight, and all other circles scale to values of this key var defaultKey = 1; var rectHeight = 200; var easingType = '<>'; var animationTime = 500; var maxValue = 0; var maxRadius = 60; var maxBigRadius = 900; var minRadius = 1; // var moneyColor = '#C7D16B'; var moneyColor = '#A6B800'; var deathsColor = '#F44F50'; $.each(circleData, function(k,v){ if (v[0]['value'] > maxValue) maxValue = v[0]['value'] if (v[1]['value'] > maxValue) maxValue = v[1]['value'] }); function calculateRelativeRadius(data, minScale){ var forceMinScale = minScale || true; if (data['value'] == 0){ return 0; }else{ var radius = ((data['value'] * maxRadius)/maxValue) if (forceMinScale && radius < minRadius) radius = minRadius return radius; } } function showData(key){ var activeElement = circleData[key] deathsValue.attr({ 'y':activeElement[0]['circle'].attr('cy'), 'x':activeElement[0]['circle'].attr('cx') - activeElement[0]['circle'].attr('r') - 7, 'text':activeElement[0]['textValue'] }) var top = 140 + key*200; $('#info-deaths').css({ 'top':top + 'px', 'left': 200 - activeElement[0]['circle'].attr('r')*2 +'px' }).animate({'opacity':1}, 200) $('#info-money').css({ 'top':top + 'px', 'left': 360 + activeElement[1]['circle'].attr('r')*2 + 'px' }).animate({'opacity':1}, 200) moneyValue.attr({ 'y':activeElement[1]['circle'].attr('cy'), 'x':activeElement[1]['circle'].attr('cx') + activeElement[1]['circle'].attr('r') + 7, 'text': activeElement[1]['textValue'] }) dataSet.toFront().animate({'opacity':1}, 200); } function showDataAlternative(key, circlesPosition){ var y; var activeElement = circleData[key]; if (key == 0){ y = 350; }else{ y = 350 + 200 * key; } var deathsDataX = circlesPosition['deaths']['cx'] - circlesPosition['deaths']['r'] - 7; var moneyDataX = circlesPosition['money']['cx'] + circlesPosition['money']['r'] + 7; deathsValue.attr({ 'y':y, 'x':deathsDataX, 'text':activeElement[0]['textValue'] }) deathsLabel.attr({ 'y':y + 15, 'x':deathsDataX, }) moneyValue.attr({ 'y':y, 'x':moneyDataX, 'text': activeElement[1]['textValue'] }) moneyLabel.attr({ 'y':y + 15, 'x':moneyDataX }) dataSet.toFront().animate({'opacity':1}, animationTime+500); } function highlightPrecalculated(key){ deathsValue.attr({'opacity':0}); moneyValue.attr({'opacity':0}); for (var k = 0; k < circleData.length; k++) { var v = circleData[k]; var deathsAnimation = highlightValues[k]['highlighted'][key]['deaths']['animation'] var moneyAnimation = highlightValues[k]['highlighted'][key]['money']['animation'] if (k == key){ moneyAnimation = highlightValues[k]['highlighted'][key]['money']['keyAnimation'] deathsAnimation = highlightValues[k]['highlighted'][key]['deaths']['keyAnimation'] v[0]['circle'].stop().animate(deathsAnimation, animationTime, easingType); v[1]['circle'].stop().animate(moneyAnimation, animationTime, easingType, function(){ showData(key) }); }else{ v[0]['circle'].stop().animate(deathsAnimation, animationTime, easingType); v[1]['circle'].stop().animate(moneyAnimation, animationTime, easingType); } } } var highlightValues = {} function calculateHightlightValues(){ $.each(circleData, function(k,v){ highlightValues[k] = { 'initial':{ 'deaths':{}, 'money':{} }, 'highlighted':[ ] } // initials highlightValues[k]['initial']['deaths']['cx'] = paperWidth/2 - calculateRelativeRadius(v[0]) - 2; highlightValues[k]['initial']['deaths']['r'] = calculateRelativeRadius(v[0]); highlightValues[k]['initial']['money']['cx'] = paperWidth/2 + calculateRelativeRadius(v[1]) + 2; highlightValues[k]['initial']['money']['r'] = calculateRelativeRadius(v[1]); // highlighted $.each(circleData, function(key,value){ highlightValues[k]['highlighted'][key] = { 'deaths':{}, 'money':{} } var self = highlightValues[k]['highlighted'][key]; if (k == key){ if (v[0]['value'] > v[1]['value']){ self['deaths']['r'] = maxRadius; self['deaths']['cx'] = paperWidth/2 — self['deaths']['r'] — 2; var moneyRadius = (v[1]['value'] * maxRadius)/v[0]['value'] if (moneyRadius !== 0 && moneyRadius < minRadius) moneyRadius = minRadius self['money']['r'] = moneyRadius; self['money']['cx'] = paperWidth/2 + moneyRadius + 3 }else{ self['money']['r'] = maxRadius; self['money']['cx'] = paperWidth/2 + self['money']['r'] + 3; var deathsRadius = (v[0]['value'] * maxRadius)/v[1]['value'] if (deathsRadius !== 0 && deathsRadius < minRadius) deathsRadius = minRadius self['deaths']['r'] = deathsRadius; self['deaths']['cx'] = paperWidth/2 - deathsRadius - 2; } } }); $.each(circleData, function(key, value){ var self = highlightValues[k]['highlighted'][key]; if (k !== key){ var moneyRadius, deathsRadius; if (v[0]['value'] !== 0 && value[0]['value'] !== 0){ deathsRadius = (value[0]['value'] * highlightValues[k]['highlighted'][k]['deaths']['r'])/v[0]['value'] }else{ deathsRadius = calculateRelativeRadius(value[0]) } if (deathsRadius !== 0 && deathsRadius > maxBigRadius) deathsRadius = getRandomInt(maxBigRadius-50, maxBigRadius+50); if (deathsRadius !== 0 && deathsRadius < minRadius) deathsRadius = minRadius; if (v[0]['value'] == 0) deathsRadius = getRandomInt(maxBigRadius-50, maxBigRadius+50); self['deaths']['r'] = deathsRadius; self['deaths']['cx'] = paperWidth/2 - deathsRadius - 2; if (v[1]['value'] !== 0 && value[1]['value'] !== 0){ moneyRadius = (value[1]['value'] * highlightValues[k]['highlighted'][k]['money']['r'])/v[1]['value'] }else{ moneyRadius = calculateRelativeRadius(value[1]) } if (moneyRadius !== 0 && moneyRadius maxBigRadius) moneyRadius = getRandomInt(maxBigRadius-50, maxBigRadius+50); if (v[1]['value'] == 0) moneyRadius = getRandomInt(maxBigRadius-50, maxBigRadius+50); self['money']['r'] = moneyRadius; self['money']['cx'] = paperWidth/2 + moneyRadius + 3; } }); }); // animations attrs $.each(circleData, function(k,v){ $.each(circleData, function(key,value){ var deathsAnimation = { r: highlightValues[key]['highlighted'][k]['deaths']['r'], cx: highlightValues[key]['highlighted'][k]['deaths']['cx'], opacity:0.15 }; var moneyAnimation = { r: highlightValues[key]['highlighted'][k]['money']['r'], cx: highlightValues[key]['highlighted'][k]['money']['cx'], opacity:0.15 }; if (highlightValues[key]['highlighted'][k]['money']['r'] < 10){ moneyAnimation.opacity = 1; } if (highlightValues[key]['highlighted'][k]['deaths']['r'] < 10){ deathsAnimation.opacity = 1; } if (key == defaultKey){ moneyAnimation = $.extend(moneyAnimation, { r: highlightValues[k]['initial']['money']['r'], cx: highlightValues[k]['initial']['money']['cx'], opacity:1 }) deathsAnimation = $.extend(deathsAnimation, { r: highlightValues[k]['initial']['deaths']['r'], cx: highlightValues[k]['initial']['deaths']['cx'], opacity:1 }) } highlightValues[k]['highlighted'][key]['deaths']['animation'] = deathsAnimation; highlightValues[k]['highlighted'][key]['money']['animation'] = moneyAnimation; highlightValues[k]['highlighted'][key]['deaths']['keyAnimation'] = $.extend({}, deathsAnimation, {'opacity':1}); highlightValues[k]['highlighted'][key]['money']['keyAnimation'] = $.extend({}, moneyAnimation, {'opacity':1}); }); }); } var circleY = 390; calculateHightlightValues(); $.each(circleData, function(k,v){ v[0]['circle'] = paper.circle( highlightValues[k]['initial']['deaths']['cx'], circleY, highlightValues[k]['initial']['deaths']['r']).attr({'fill':deathsColor, 'stroke-width':1, 'stroke':deathsColor}) v[1]['circle'] = paper.circle( highlightValues[k]['initial']['money']['cx'], circleY, highlightValues[k]['initial']['money']['r']).attr({'fill':moneyColor, 'stroke-width':1, 'stroke':moneyColor}) circleY = circleY + 200; }); $('#labels li span').click(function(){ if ($(this).parent().hasClass('active')) return; $('.info').hide(); $('.info-desc').css({'opacity':0}) $('#labels li').removeClass('active') $(this).parent().addClass('active') highlightPrecalculated($(this).parent().index()); }); $('#labels li').hover(function(){ if ($(this).hasClass('active')) return; $('#info_' + $(this).index()).html(circleData[$(this).index()][0]["textValue"] + ' смертей в год ' + circleData[$(this).index()][1]['textValue'] + ' бюджет').show(); }, function(){ var index = $(this).index(); $('#info_' + $(this).index()).hide(); }) highlightPrecalculated(0); var verticalLine = paper.rect(paperWidth/2, 280, 1, 1550).attr({'stroke-width':0, 'fill':'#DFDFDF'}) $(verticalLine.node).attr('id', 'line') });