Files to support “First Graphics App,” a mini-bootcamp walks you through the process of building a standalone story from a dataset.
Direct links:
[
{
"year":2000,
"homicides_total":1036,
"homicides_harvard_park":3
},
{
"year":2001,
"homicides_total":1125,
"homicides_harvard_park":2
},
{
"year":2002,
"homicides_total":1196,
"homicides_harvard_park":4
},
{
"year":2003,
"homicides_total":1086,
"homicides_harvard_park":4
},
{
"year":2004,
"homicides_total":1087,
"homicides_harvard_park":6
},
{
"year":2005,
"homicides_total":1104,
"homicides_harvard_park":3
},
{
"year":2006,
"homicides_total":1057,
"homicides_harvard_park":2
},
{
"year":2007,
"homicides_total":892,
"homicides_harvard_park":2
},
{
"year":2008,
"homicides_total":843,
"homicides_harvard_park":6
},
{
"year":2009,
"homicides_total":732,
"homicides_harvard_park":4
},
{
"year":2010,
"homicides_total":654,
"homicides_harvard_park":3
},
{
"year":2011,
"homicides_total":594,
"homicides_harvard_park":1
},
{
"year":2012,
"homicides_total":617,
"homicides_harvard_park":5
},
{
"year":2013,
"homicides_total":569,
"homicides_harvard_park":0
},
{
"year":2014,
"homicides_total":542,
"homicides_harvard_park":2
},
{
"year":2015,
"homicides_total":613,
"homicides_harvard_park":3
},
{
"year":2016,
"homicides_total":637,
"homicides_harvard_park":8
},
{
"year":2017,
"homicides_total":587,
"homicides_harvard_park":6
}
]body {
margin: 0 auto;
padding: 0;
font-family: Verdana, sans-serif;
background-color: ##F2EFEC;
max-width: 880px;
}
nav {
background-color: #333132;
width: 100%;
height: 50px;
}
nav img {
height: 100%;
padding: 8px;
}
a {
color: #4591B8;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:link, a:visited, a:hover, a:active {
color: #0085c7;
}
header, h1, h3 {
font-family: Times, Times New Roman, serif;
}
h1, h3 {
font-weight: bold;
}
header, section {
max-width: 880px;
margin: 20px auto 15px auto;
padding: 0px 10px 15px 10px;
}
h1 {
margin: 0;
padding: 0;
font-size: 44px;
line-height: 50px;
font-weight: bold;
font-style: italic;
text-shadow: 0.3px 0.3px 0px gray;
letter-spacing: .01em;
}
.byline {
margin: 6px 0 0 0;
font-size: 13px;
font-weight: bold;
}
.byline a {
text-transform: uppercase;
}
.pubdate {
margin: 8px 0 0 0;
font-size: 10px;
text-transform: uppercase;
font-family: sans;
}
p:first-child:first-letter {
float: left;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
section {
display: inline-block;
}
section p {
font-size: 17px;
line-height: 27px;
margin: 0 0 20px 0;
}
section p:last-child {
margin: 0;
}
#map {
width: 100%;
height: 325px;
}
.leaflet-tooltip {
padding: 1px;
font-size; 11px;
}
@media (max-width: 420px) {
.leaflet-control-minimap { display: none; }
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Graphics App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="https://bl.ocks.org/palewire/raw/1035cd306a2f85b362b1a20ce315b8eb/base.css?rev=8">
{% block stylesheets %}{% endblock %}
</head>
<body>
<nav>
<a href="http://first-graphics-app.readthedocs.org/">
<img src="https://bl.ocks.org/palewire/raw/1035cd306a2f85b362b1a20ce315b8eb/ire-logo.png">
</a>
</nav>
<header>
<h1>{% block headline %}{% endblock %}</h1>
<div class="byline">
{% block byline %}{% endblock %}
</div>
<div class="pubdate">
{% block pubdate %}{% endblock %}
</div>
</header>
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
<script src="scripts/main.js"></script>
</body>
</html>