Skip to content

Instantly share code, notes, and snippets.

@hmader

hmader/index.html

Last active September 12, 2015 18:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hmader/7473839d1bbbedb7b291 to your computer and use it in GitHub Desktop.
Save hmader/7473839d1bbbedb7b291 to your computer and use it in GitHub Desktop.
Download ZIP
Week2: High Charts
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Highcharts Attempt</title>
<link rel="stylesheet" type="text/css" href="css/my-hc1-main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript" src="js/my-hc3-main.js"></script>
<script type="text/javascript" src="js/my-hc-main.js"></script>
</head>
<body>
<div class="left">
<div class="gray-area">
<div id="edu-contraception" class="container show"></div>
<div id="contraception-mortality" class="container hide"></div>
<button id="switch-button">Swap Graphs</button>
<p id="control-help">Click to toggle between the two charts providing insight into contraception (birth control) usage in low-income countries.</p>
<p id="sources">Sources: <a href="http://www.who.int/">World Health Organization</a>; <a href="http://www.worldbank.org/">World Bank</a></p>
</div>
</div>
<div id="explanation">
<h1>Contraception Use in Low-Income Countries</h1>
<p>This data aims to provide insight into the use of contraception (birth control) in low-income countries as well as the role it may play in child mortality. The visualization allows you to toggle between two separate graphs:
<p> The first shows the percentage that birth control is used among different education levels. An interesting, although not entirely suprising, trend in the data set is that the higher educated population tends to have a greater percentage using contraception.</p> <p>In the second graph specific education levels are not relevant, as it aims to show the correlation between a country's birth control usage overall and its child mortality rate. It presents the averaged birth control usage across all education levels vs. the under-5 child mortality rates. There appears to be an inverse correlation between the two: As the percentage of birth control use decreases, the mortality rate increases.</p></p>
</div>
</body>
<script>
$('#switch-button').click(function () {
console.log("click");
var chartOne = $('#edu-contraception');
// var chartOne = document.getElementById('edu-contraception');
var chartTwo = $('#contraception-mortality');
//var chartTwo = document.getElementById('contraception-mortality');
if (chartOne.hasClass("show")) {
chartOne.removeClass("show");
chartOne.addClass("hide");
chartTwo.addClass("show");
chartTwo.removeClass("hide");
} else {
chartOne.addClass("show");
chartOne.removeClass("hide");
chartTwo.removeClass("show");
chartTwo.addClass("hide");
}
});
</script>
</html>
Raw
my-hc-main.js
/*
----------------- Contraceptive Use vs. Child Mortality graph -----------------
*/
$(function () {
$('#contraception-mortality').highcharts({
chart: {
type: 'scatter',
//zoomType: 'xy'
},
title: {
text: 'Contraceptive Use vs. Child Mortality Rate'
},
xAxis: {
title: {
enabled: true,
text: 'Under-5 Mortality Rate'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Avg. Contraceptive Use (%)'
}
},
tooltip: {
formatter: function () {
return 'Avg. Contraception Use' + ': ' + this.y + "%" + '<br>' +
'Under 5 Mortality Rate' + ': ' + this.x;
}
},
legend: {
enabled: 'false'
/*
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
*/
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
/*
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}*/
}
},
series: [{
showInLegend: false,
name: '',
color: 'rgba(223, 83, 83, .5)',
data: [[97.3, 28.267], [34.2, 42.6], [41.1, 61.367], [85.3, 15.67], [36.2, 63.8],
[39.1, 55.67], [13.7, 72.6], [97.6, 29.767], [82.9, 27.767], [37.9, 50], [94.5, 21.967], [139.2, 18.43], [147.5, 10.4], [16.9, 76.93], [77.9, 19.6], [118.5, 19], [49.1, 41.1], [9.6, 70.467], [100, 23.03], [69.6, 22.13], [28.1, 72.067], [21.8, 60.3], [64.4, 40.03], [56.1, 24.03], [78.4, 33.33], [31, 41.93], [100.7, 7.6], [123.9, 18], [36.6, 35.367], [72.8, 33.8], [22.2, 70.63], [52.7, 57.467], [29.3, 56.1], [34, 51.53], [18.7, 53.73], [70.7, 39.367], [71.4, 48.13], [98, 42.67], [71.1, 21.2], [56, 38.4], [67.9, 46.5], [9.9, 36.13], [122.7, 16.33], [90.1, 12.6], [31.8, 53.267], [30.4, 64.3], [87.2, 16.267], [49.8, 47.967], [39.7, 48.867], [23.5, 65.6], [104.2, 21.6], [117.4, 17.83], [85.5, 38], [16.7, 72.3], [29.9, 46.13], [52, 52.067], [51, 32.33], [55.3, 24.167], [160.6, 19.867], [145.6, 17.3], [43.9, 48.33], [22.8, 37.867], [80, 61.03], [14.6, 55.73], [47.7, 23.73], [13.1, 72.3], [54.6, 22.67], [84.7, 16.2], [19.2, 68.23], [66.1, 30.03], [16.9, 33.9], [23.8, 77.53], [51.3, 33.13], [87.4, 41.13], [88.5, 52.867]]
}]
});
});
Raw
my-hc1-main.css
body {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
font-family: 'Roboto', sans-serif;
}
.container {
height: 60%;
align-self: center;
padding: .5em;
background-color: #E8E8E8;
}
p {
font-weight: 400;
font-size: 15px;
color: rgb(255, 255, 255);
line-height: 1.5em;
}
h1 {
font-size: 2em;
margin-top: 2em;
font-weight: 700;
color: rgb(255, 255, 255);
text-transform: uppercase;
}
.left {
display: flex;
width: 59%;
flex-direction: column;
margin-top: 2em;
padding-left: 1em;
padding-right: 1em;
}
.hide {
display: none;
}
.show {
display: block;
}
#explanation {
width: 35%;
padding: 0 2em 2em;
background-color: rgb(0, 163, 218);
margin: 0;
}
#switch-button {
width: 200px;
margin: 2em 2em 1em;
background-color: rgb(0, 163, 218);
border: none;
color: rgb(255,255,255);
text-transform: uppercase;
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
padding: 1em;
}
#switch-button:hover {
opacity: .7;
}
#control-help {
margin-left: 1em;
margin-right: 1em;
color: rgb(0, 0,0);
font-style: italic;
}
#sources {
font-size: 12px;
font-style: italic;
margin-left: 1em;
margin-right: 1em;
color: rgb(0, 0,0);
font-style: italic;
}
a {
color: rgb(0, 163, 218);
text-decoration: none;
}
a:hover {
color: rgb(255, 0, 153);
}
Raw
my-hc3-main.js
/*
----------------- Contraceptive Use Across Edu. Level graph -----------------
*/
$(function () {
$('#edu-contraception').highcharts({
chart: {
type: 'scatter',
//zoomType: 'xy',
inverted: true
},
title: {
text: 'Contraceptive Use Across Education Levels'
},
xAxis: {
categories: [
'No Education',
'Primary Education',
'Secondary or More'
]
},
yAxis: {
title: {
text: 'Contraceptive Use (%)'
},
labels: {
formatter: function () {
return this.value;
}
},
min: 0
},
tooltip: {
formatter: function () {
return this.series.name + ': ' + this.y + "%";
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillOpacity: 0
},
series: {
lineWidth: 0
}
},
series: [
{
showInLegend: false,
name: 'Afghanistan',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [19.9, 27.2, 37.7]
},
{
showInLegend: false,
name: 'Azerbaijan',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [51.4, 25.0, 51.4]
},
{
showInLegend: false,
name: 'Bangladesh',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [61.4, 62.4, 60.3]
},
{
showInLegend: false,
name: 'Benin',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [11.2, 14.9, 20.9]
},
{
showInLegend: false,
name: 'Bhutan',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [11.2, 14.9, 20.9]
},
{
showInLegend: false,
name: 'Bolivia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [42.0, 56.1, 68.9]
},
{
showInLegend: false,
name: 'Brazil',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [64.1, 71.9, 81.8]
},
{
showInLegend: false,
name: 'Burkina-Faso',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [11.8, 27.0, 50.5]
},
{
showInLegend: false,
name: 'Burundi',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [17.5, 24.7, 41.1]
},
{
showInLegend: false,
name: 'Cambodia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [42.5, 50.2, 57.3]
},
{
showInLegend: false,
name: 'Cameroon',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [4.1, 21.6, 40.2]
},
{
showInLegend: false,
name: 'Central-African-Republic',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [7.1, 15.4, 32.8]
},
{
showInLegend: false,
name: 'Chad',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [1.1, 5.0, 25.1]
},
{
showInLegend: false,
name: 'Colombia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [71.8, 80.3, 78.7]
},
{
showInLegend: false,
name: 'Comoros',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [12.9, 19.1, 26.8]
},
{
showInLegend: false,
name: 'Congo-Democratic-Republic',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [11.1, 15.7, 30.2]
},
{
showInLegend: false,
name: 'Congo',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [33.6, 43.1, 46.6]
},
{
showInLegend: false,
name: 'Costa-Rica',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [58.5, 76.2, 76.7]
},
{
showInLegend: false,
name: 'Côte-d’Ivoire',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [13.0, 25.8, 30.3]
},
{
showInLegend: false,
name: 'Djibouti',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [12.6, 20.8, 33.0]
},
{
showInLegend: false,
name: 'Dominican-Republic',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [69.8, 75.2, 71.2]
},
{
showInLegend: false,
name: 'Egypt',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [57.7, 61.8, 61.4]
},
{
showInLegend: false,
name: 'Ethiopia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [22.2, 35.7, 62.2]
},
{
showInLegend: false,
name: 'Gabon',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [14.0, 21.8, 36.3]
},
{
showInLegend: false,
name: 'Ghana',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [26.1, 34.3, 39.6]
},
{
showInLegend: false,
name: 'Guatemala',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [19.4, 38.4, 68.0]
},
{
showInLegend: false,
name: 'Guinea',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [4.7, 7.6, 10.5]
},
{
showInLegend: false,
name: 'Guinea-Bassau',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [6.2, 17.2, 30.6]
},
{
showInLegend: false,
name: 'Guyana',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [21.9, 40.4, 43.8]
},
{
showInLegend: false,
name: 'Haiti',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [29.7, 34.5, 37.2]
},
{
showInLegend: false,
name: 'Honduras',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [64.2, 73.2, 74.5]
},
{
showInLegend: false,
name: 'India',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [52.1, 60.1, 60.2]
},
{
showInLegend: false,
name: 'Indonesia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [43.4, 61.8, 63.1]
},
{
showInLegend: false,
name: 'Iraq',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [46.1, 51.3, 57.2]
},
{
showInLegend: false,
name: 'Jordan',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [45.6, 53.4, 62.2]
},
{
showInLegend: false,
name: 'Kenya',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [14.1, 44.2, 59.8]
},
{
showInLegend: false,
name: 'Lao-PDR',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [38.0, 54.3, 52.1]
},
{
showInLegend: false,
name: 'Lesotho',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [32.1, 40.2, 55.7]
},
{
showInLegend: false,
name: 'Liberia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [15.3, 19.7, 28.6]
},
{
showInLegend: false,
name: 'Madagascar',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [20.5, 38.9, 55.8]
},
{
showInLegend: false,
name: 'Malawi',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [40.3, 46.0, 53.2]
},
{
showInLegend: false,
name: 'Madives',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [43.6, 36.9, 27.9]
},
{
showInLegend: false,
name: 'Mali',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [8.1, 13.4, 27.5]
},
{
showInLegend: false,
name: 'Mauritania',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [4.4, 11.5, 21.9]
},
{
showInLegend: false,
name: 'Mongolia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [47.0, 57.8, 55.0]
},
{
showInLegend: false,
name: 'Morocco',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [61.2, 62.9, 68.8]
},
{
showInLegend: false,
name: 'Mozambique',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [5.5, 11.6, 31.7]
},
{
showInLegend: false,
name: 'Namibia',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [33.7, 46.1, 64.1]
},
{
showInLegend: false,
name: 'Nepal',
color: 'rgba(0, 163, 218, .5)',
marker: {
symbol: 'circle'
},
data: [52.8, 47.0, 46.8]
}, ]
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment