xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
body, h1, h2, h3, p, table, td {
margin: 0px;
padding: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
color: #4a4a4a;
}
#content {
margin: 5px;
padding: 0px 0px 150px 0px;
width: 600px;
text-align: left;
}
#container {
padding: 15px;
border: 1px solid #ccc;
height: 721px;
clear: both;
}
#header {
margin: 0px;
padding: 0px;
height: 34px;
background: #747474;
}
#block {
float: left;
margin: 0px;
padding: 0px;
height: 100%;
width: 10px;
background: #ff0000;
}
#source {
margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 11px;
}
#header h1 {
margin: 0px 0px 0px 10px;
padding: 4px 0px 0px 7px;
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: normal;
color: #fff;
}
p {
margin: 0px;
padding: 0px 0px 15px 0px;
color: #4a4a4a;
font-weight: normal;
line-height: 1.5rem;
}
p.body {
padding: 15px 0px 15px 0px;
}
#buttons {
float: left;
margin: 0px;
padding: 0px;
width: 80px;
}
.button {
display: inline-block;
margin: 0px 2px 0px 0px;
padding: 4px 6px;
line-height: 20px;
background:#ff0000;
min-width: 60px;
border-radius: 3px;
text-align: center;
color: #fff;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.button:hover {
background:#e3120b;
color: #fff;
cursor: pointer;
}
.button span {
margin: 0px;
padding: 0px 3px;
}
#map {
margin: 0px;
padding: 0px;
}
.timerCircle {
stroke: #ccc;
stroke-width: 2;
fill: #fff;
}
rect {
fill: #ccc;
}
#slider {
margin: 0px;
padding: 0px;
display: inline-block;
}
.state {
fill: #f5eede;
}
.border {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linejoin: round;
}
#yearmonth {
clear: both;
text-align: center;
}
.bar {
fill: #00485d;
}
g.y.axis path.domain {
stroke-width: 0px;
}
g.x.axis path.domain, g.x.axis g.tick.major line, g.x.axis g.tick line {
stroke: #333;
stroke-width: 1px;
shape-rendering: crispEdges;
}
.axis path, .axis line {
fill: none;
shape-rendering: crispEdges;
border-width: 2px;
}
.axis line {
stroke: #eee;
stroke-width: 1;
shape-rendering: crispEdges;
}
g.group text, g.tick text, .x.axis text {
color: #4a4a4a;
font-size: 12px;
}
.right.label {
font-size: 13px;
fill: #000;
}
</style>
<body>
<div id="content">
<div id="header">
<div id="block"></div>
<h1>American bank failures: 2007-2014</h1>
</div>
<div id="container">
<div id="buttons">
<div class="button" id="play">Play<span class="fa fa-caret-right"></span></div>
</div>
<div id="slider"></div>
<h1 id="yearmonth" value="">2007-2014</h2>
<div id="map"></div>
<div id="chart"></div>
<p id="source">Source: Federal Deposit Insurance Corporation.</p>
</div>
</div>
<script type="text/javascript" src="map.js"></script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/topojson.v1.min.js