<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>00A00</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<link href='sgc.css' rel='stylesheet'>
<style>
/*form { background-image:url(bgl720x404.png); background-color: #333; }*/
#ii { margin-top: 80px }
#chart { height: 70vh; /*background-image:url(bgl720x404.png); background-size: cover; background-repeat:no-repeat; */}
.group.group:after, .chart.chart:after { color: #333; }
</style>
</head>
<body class='sl'>
<header>
<form id="chartOpt" class="sgc" style="width: 100%; color: #ffcc00">
<input type="radio" name="chart" id="chart1" value='1'>
<input type="radio" name="chart" id="chart2" value='2'>
<input type="radio" name="chart" id="chart3" value='3'>
<input type="radio" name="chart" id="chart4" value='4'>
<label for="chart1" class="chart" data-value="Master Chart">Master Chart</label>
<label for="chart2" class="chart" data-value="Line Chart">Line Chart</label>
<label for="chart3" class="chart" data-value="Column Chart">Column Chart</label>
<label for="chart4" class="chart" data-value="Scatter Chart">Scatter Chart</label>
</form>
<form id="groupOpt" class='sgc' style="width:100%; color: #00ffff" >
<input type="radio" name="group" id="group1" value='1'>
<input type="radio" name="group" id="group2" value='2'>
<input type="radio" name="group" id="group3" value='3'>
<input type="radio" name="group" id="group4" value='4'>
<input type="radio" name="group" id="group5" value='5'>
<input type="radio" name="group" id="group6" value='6'>
<label for="group1" class="group" data-value="by Generation">by Generation</label>
<label for="group2" class="group" data-value="by Religion">by Religion</label>
<label for="group3" class="group" data-value="by Party Affiliation">by Party Affiliation</label>
<label for="group4" class="group" data-value="by Political Ideology">by Political Ideology</label>
<label for="group5" class="group" data-value="by Race">by Race</label>
<label for="group6" class="group" data-value="by Gender">by Gender</label>
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var options = {
backgroundColor: {fill:'transparent',stroke:'#000000' ,strokeWidth:0 },
tooltip: {textStyle: {color: '0000FF'}, trigger:'focus'},
animation: {
"startup": true,
duration: 1000,
easing: 'out'
},
title:'Percentage of Americans in Favor of / Opposed to Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontSize: 18
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontSize: 22
},
format: '####'
},
vAxis: {
textStyle: {
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontSize: 16
},
maxValue: 1,format: '#%'
},
legend: {textStyle: {color: 'white'}}
}
var query;
var chart;
var data;
var view;
var formatter;
var main;
var selChart;
var selGroup;
var visual;
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&range=A:T');
query.send(function (response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
visual = new google.visualization.DataView(data);
formatter = new google.visualization.NumberFormat({pattern:'#%'});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
formatter.format(data, 7);
formatter.format(data, 8);
formatter.format(data, 9);
formatter.format(data, 10);
formatter.format(data, 11);
formatter.format(data, 12);
formatter.format(data, 13);
formatter.format(data, 14);
formatter.format(data, 15);
formatter.format(data, 16);
formatter.format(data, 17);
formatter.format(data, 18);
formatter.format(data, 19);
chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(visual, options);
});
}
$('#chartOpt').on('change', selectChart);
function selectChart() {
chartSel = $("input[name='chart']:checked").val();
main = new google.visualization.ChartWrapper({containerId: 'chart'});
switch(chartSel) {
case '1':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '2':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '3':
main.setChartType('ColumnChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '4':
main.setChartType('ScatterChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
}
}
$('#groupOpt').on('change', selectGroup);
function selectGroup() {
groupSel = $("input[name='group']:checked").val();
view = new google.visualization.DataView({containerId: 'chart'});
switch(groupSel) {
case '0':
view.setColumns([0,1,2,3,4]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '1':
view.setColumns([0,5,6,7,8,9]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '2':
view.setColumns([0,10,11,12]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '3':
view.setColumns([0,13,14,15]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '4':
view.setColumns([0,16,17]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '5':
view.setColumns([0,18,19]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>
.sgc,.sgc>label{display:inline-block;transition-property:none}.sgc,.sgc>label,.sgc>label:after{overflow:hidden;box-sizing:border-box}.sgc{position:relative;border:1px solid currentColor;font-style:normal;font-weight:400;text-decoration:none;border-radius:2px;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none;transition-duration:.7s;transition-timing-function:cubic-bezier(.445,.05,.55,.95);-webkit-tap-highlight-color:transparent}.sgc>label,.sgc>label:after{font-style:inherit;text-decoration:inherit;font-weight:inherit}.sgc>input{position:absolute;left:-10000px;opacity:0}.sgc>input[type=checkbox]~label{transition-duration:0s}.sgc>label,.sgc>label:after,.sgc>label:before{transition-duration:inherit;transition-timing-function:inherit}.sgc>input[type=checkbox]~label:before{opacity:0}.sgc>input:disabled:nth-child(1)~label:nth-of-type(1){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(1):checked~label:nth-of-type(1):after,.sgc>input:nth-child(1):checked~label:nth-of-type(1):before{opacity:1}.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1)~label:before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2)~label:before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3)~label:before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4)~label:before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5)~label:before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(0)}.sgc>input:disabled:nth-child(2)~label:nth-of-type(2){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(2):checked~label:nth-of-type(2):after,.sgc>input:nth-child(2):checked~label:nth-of-type(2):before{opacity:1}.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2):after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2):before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2)~label:after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2)~label:before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3):after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3):before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3)~label:after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3)~label:before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4):after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4):before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4)~label:after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4)~label:before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5):after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5):before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5)~label:after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5)~label:before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(100%)}.sgc>input:disabled:nth-child(3)~label:nth-of-type(3){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(3):checked~label:nth-of-type(3):after,.sgc>input:nth-child(3):checked~label:nth-of-type(3):before{opacity:1}.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3):after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3):before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3)~label:after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3)~label:before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4):after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4):before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4)~label:after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4)~label:before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5):after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5):before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5)~label:after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5)~label:before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(200%)}.sgc>input:disabled:nth-child(4)~label:nth-of-type(4){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(4):checked~label:nth-of-type(4):after,.sgc>input:nth-child(4):checked~label:nth-of-type(4):before{opacity:1}.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4):after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4):before,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4)~label:after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4)~label:before,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5):after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5):before,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5)~label:after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5)~label:before,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(300%)}.sgc>input:disabled:nth-child(5)~label:nth-of-type(5){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(5):checked~label:nth-of-type(5):after,.sgc>input:nth-child(5):checked~label:nth-of-type(5):before{opacity:1}.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5):after,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5):before,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5)~label:after,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5)~label:before,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(400%)}.sgc>input:disabled:nth-child(6)~label:nth-of-type(6){opacity:.3;cursor:not-allowed}.sgc>input:nth-child(6):checked~label:nth-of-type(6):after,.sgc>input:nth-child(6):checked~label:nth-of-type(6):before{opacity:1}.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6):after,.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6):before,.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6)~label:after,.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6)~label:before{transform:translateX(500%)}.sgc>label{padding:0 .71em;cursor:pointer;float:left;line-height:3em}.sgc>label:after,.sgc>label:before{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translateX(-100%)}.sgc>label:after{color:#fff;content:attr(data-value);padding:inherit;z-index:10;opacity:0;transition-property:opacity,transform}.sgc>label,.sgc>label:after{text-align:center;text-overflow:ellipsis;white-space:nowrap}.sgc>label:before{content:'';color:inherit;background:currentColor;transition-property:transform}.sgc>label:first-of-type:nth-last-of-type(1),.sgc>label:first-of-type:nth-last-of-type(1):after,.sgc>label:first-of-type:nth-last-of-type(1):before,.sgc>label:first-of-type:nth-last-of-type(1)~label,.sgc>label:first-of-type:nth-last-of-type(1)~label:after,.sgc>label:first-of-type:nth-last-of-type(1)~label:before{width:100%}.sgc>label:first-of-type:nth-last-of-type(2),.sgc>label:first-of-type:nth-last-of-type(2):after,.sgc>label:first-of-type:nth-last-of-type(2):before,.sgc>label:first-of-type:nth-last-of-type(2)~label,.sgc>label:first-of-type:nth-last-of-type(2)~label:after,.sgc>label:first-of-type:nth-last-of-type(2)~label:before{width:50%}.sgc>label:first-of-type:nth-last-of-type(3),.sgc>label:first-of-type:nth-last-of-type(3):after,.sgc>label:first-of-type:nth-last-of-type(3):before,.sgc>label:first-of-type:nth-last-of-type(3)~label,.sgc>label:first-of-type:nth-last-of-type(3)~label:after,.sgc>label:first-of-type:nth-last-of-type(3)~label:before{width:33.33333%}.sgc>label:first-of-type:nth-last-of-type(4),.sgc>label:first-of-type:nth-last-of-type(4):after,.sgc>label:first-of-type:nth-last-of-type(4):before,.sgc>label:first-of-type:nth-last-of-type(4)~label,.sgc>label:first-of-type:nth-last-of-type(4)~label:after,.sgc>label:first-of-type:nth-last-of-type(4)~label:before{width:25%}.sgc>label:first-of-type:nth-last-of-type(5),.sgc>label:first-of-type:nth-last-of-type(5):after,.sgc>label:first-of-type:nth-last-of-type(5):before,.sgc>label:first-of-type:nth-last-of-type(5)~label,.sgc>label:first-of-type:nth-last-of-type(5)~label:after,.sgc>label:first-of-type:nth-last-of-type(5)~label:before{width:20%}.sgc>label:first-of-type:nth-last-of-type(6),.sgc>label:first-of-type:nth-last-of-type(6):after,.sgc>label:first-of-type:nth-last-of-type(6):before,.sgc>label:first-of-type:nth-last-of-type(6)~label,.sgc>label:first-of-type:nth-last-of-type(6)~label:after,.sgc>label:first-of-type:nth-last-of-type(6)~label:before{width:16.66667%}.sgc .italic,.sgc.italic{font-style:italic}.sgc .bold,.sgc.bold{font-weight:700}.sgc .underline,.sgc.underline{text-decoration:underline}.sgc .line-through,.sgc.line-through{text-decoration:line-through}
@keyframes click-wave {
0% {
height: 20px;
width: 20px;
opacity: 0.35;
position: relative;
}
100% {
height: 100px;
width: 100px;
margin-left: -40px;
margin-top: -40px;
opacity: 0;
}
}
.opt {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
top: 7px;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
.opt:hover {
background: #9faab7;
}
.opt:checked {
background: #40e0d0;
}
.opt:checked::before {
height: 20px;
width: 20px;
position: absolute;
content: '\2716';
display: inline-block;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.opt:checked::after {
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
.opt.radio {
border-radius: 50%;
}
.opt.radio::after {
border-radius: 50%;
}