This project visualizes the risks of state-led mass killings around the world, and is part of The Early Warning Project. The Early Warning Project produces risk assessments of the potential for mass atrocities around the world by combining state-of-the-art quantitative and qualitative analysis. The project ier and more reliable warning, and thus more opportunity to take action, before such killings occur. This visualization supplements the project, and details follow below.
xxxxxxxxxx
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,400i,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="autocomplete.css">
<meta charset="utf-8">
<title>Risk Bar Chart</title>
<script src="d3.v4.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
</head>
<body>
<div class="loader"></div>
<div class="container" id="container">
<div class="titleWrapper" id="titleWrapper">
<div class="titleLeft" id="titleLeft">
<h1 class="title main" id="titlemain">Risks of State-Led Mass Killings</h1>
<h2 class="title sub">
Created by <strong>Drew Leonard & Billy McGrath</strong>
<span class="subTitleFloat">Use Chrome for best results</span><br>
Data last updated Jul. 26, 2017
<a href="https://goo.gl/uD2QRK"><span class="subTitleFloat">About this project</span></a>
</h2>
</div>
<div class="titleRight" id="titleRight">
<input type=search class="searchBar" id="searchBar" autocomplete="off" placeholder="Find a country...">
<div class="searchButton" id="searchButton">SEARCH</div>
</div>
</div>
<div id='buttonContainer' class='buttonContainer'>
<div id="sliderTtipContainer" class="sliderTtipContainer">
<div id="sliderTtip" class="sliderTtip"></div>
</div>
<div id="buttonTextContainer" class="buttonTextContainer">
<div id="buttonText" class="buttonText">Select forecast models:</div>
<div id="buttonButtonContainer" class="buttonButtonContainer">
<div class="button current" data-val="all">All</div>
<div class="button" data-val="badRegime">Bad Regime</div>
<div class="button" data-val="eliteThreat">Elite Threat</div>
<div class="button" data-val="randomForest" style="margin-right:0">Random Forest</div>
</div>
</div>
</div>
<div class="sliderContainer" id="sliderContainer">
<h1 id="sliderText" class="sliderText">Choose range of countries:</h1>
<div id="sliderWrapper" class="sliderWrapper"></div>
<h2 id="resizeSliderText" class="sliderText">Adjust chart sizes:</h2>
<div id="resizeSliderWrapper" class="sliderWrapper"></div>
</div>
<div class="headerWrapper" id="headerWrapper">
<div class="headerOneWrapper" id="headerOneWrapper">
Risks of State-Led Mass Killings (% Risk by Country)
</div>
<div class="headerTwoWrapper" id="headerTwoWrapper">
Variables Used in Risk Forecast (Percentile Rankings)
</div>
</div>
<div class="chartWrapper" id="chartWrapper">
<div class="chartOne" id="chartOne"></div>
<div class="chartTwo" id="chartTwo"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js