xxxxxxxxxx
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infant Mortality and Health Expenditure</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
body {
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 13px;
padding: 50px;
}
#form {
position: relative;
right: 10px;
top: 10px;
padding-bottom: 20px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
text {
font-size: 11px;
}
.x.axis path {
display: none;
}
.axis text {
font-size: 11px;
fill: rgba(75,75,75,1);
margin-right: 10px;
}
.tooltip2 {
position: absolute;
z-index: 10;
opacity:1;
}
.tooltip2 p {
font-family: "Open Sans", sans-serif;
line-height: 1.4;
color: black;
font-size: 13px;
background-color: rgba(255,255,255,0.8);
border: rgba(230,230,230,1) 1px solid;
padding: 5px 7px 5px 7px;
}
.tooltip { background-color:rgba(255,255,255,0.8);
margin: 5px;
padding: 5px;
font-size: 13px;
}
</style>
</head>
<body>
<div id="text">
<h1>Data exploration</h1>
<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a> and <a href="https://data.worldbank.org/">World Bank</a>.</p>
</div>
</div>
<div id="form">
<label><input type="radio" name="mode" value="bycount" checked>Raw Count</label>
<label><input type="radio" name="mode" value="bypercent">Percent of Illness</label>
</div>
<h3>A useless graphic that shows nothing</h3>
<div id="graph1"></div>
<h3>Infant mortality rate vs population drinking improved water</h3>
<div id="graph2"></div>
<h3>Infant mortality rate in Africa</h3>
<div id="graph3"></div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="tooltip.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="graph1.js"></script>
<script src="graph2.js"></script>
<script src="graph3.js"></script>
</html>
Modified http://d3js.org/queue.v1.min.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://code.jquery.com/jquery-1.9.1.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js