Skip to content

Instantly share code, notes, and snippets.

@hmader hmader/index.html
Last active Sep 12, 2015

Embed
What would you like to do?
Week2: High Charts
<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>
/*
----------------- 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]]
}]
});
});
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);
}
/*
----------------- 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
You can’t perform that action at this time.