index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="migrants.css">
<link href='//fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<div class="title">
<div class="titleText">Dying to be in Europe: Reports of migrants who died or went missing from 2000 to 2015</div>
</div>
<div class="source">
Data Source: <a href="https://docs.google.com/spreadsheets/d/1YNqIzyQfEn4i_be2GGWESnG2Q80E_fLASffsXdCOftI/edit#gid=1085726718">The Migrant Files</a> - Thank you to the team who painstakingly collected this data including United for Intercultural Action, Gabriele Del Grande's Fortress Europe, Puls, and the Migrant's Files Consortium.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="migrants.js"></script>
</body>
migrants.css
body {
background: #000;
font-family: 'Raleway', sans-serif;
color: #fff;
}
p {
margin: 0px;
}
p.desc {
margin-top: 8px;
}
.title {
margin-left: 16px;
font-size: 20px;
line-height: 1.2;
margin-top: 10px;
}
.source {
font-size: 12px;
margin-left: 16px;
margin-top: 8px;
color: #c8c8c8;
}
.source a {
color: #c8c8c8;
}
.source a:hover {
color: #add8e6;
}
.descriptions {
margin-top: 85px;
margin-left: 5px;
margin-right: 80px;
font-size: 9px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.focusDate {
margin-top: 0;
}
.focusDesc {
margin: 8px 0 8px 0;
}
.events {
color: #c8c8c8;
display: inline-block;
height: 120px;
width: 110px;
overflow: hidden;
padding: 5px;
margin: 15px 3px 3px 0;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.events.date {
display: inline;
}
.events.desc {
display: inline;
}
.hidden {
display: none;
}
#inFocus {
word-wrap: break-word;
background-color: rgba(120,116,116,0.96);
position: absolute;
padding: 5px;
border-radius: 5px;
cursor: pointer;
min-height: 120px;
}
#inFocus.focusDesc {
font-size: 20px;
padding-right: 100px;
}
#inFocusData {
color: #fff;
}
#mapContainer {
padding-left: 10px;
color: #000;
}
.header {
position: fixed;
top: 0;
left: 0px;
background: #828282;
width: 100%;
height: 65px;
z-index: 30;
}
@media (max-width: 850px) {
.header {
height: 98px;
}
.descriptions {
margin-top: 100px;
}
}