Skip to content

Instantly share code, notes, and snippets.

@kaz-a

kaz-a/index.html

Last active September 9, 2016 16:14
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 kaz-a/e4c3469150b4a70411fe3a816c04dd17 to your computer and use it in GitHub Desktop.
Save kaz-a/e4c3469150b4a70411fe3a816c04dd17 to your computer and use it in GitHub Desktop.
Download ZIP
testing for IE...
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Unsupported</title>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=9" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- fontawesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- bootstrap select -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
body {
font-family: 'EB Garamond', serif;
background: black;
}
h1 {
color: white;
margin-top: 40vh;
}
h4 {
color: white;
}
.unsupported {
background: black;
text-align: center;
}
/*.unsupportedText h1, .unsupportedText h4 {
color: white;
}
*/
.unsupported a {
color: #c92b2b !important;
margin-top: 20px;
}
.particles {
fill: white;
stroke: none;
opacity: 0.5;
}
</style>
</head>
<body>
<!-- DOHMH navbar -->
<nav class="navbar navbar-inverse navbar-dohmh">
<!-- Hamberger -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="www.nyc.gov/health" target="_blank"></a>
</div>
<!-- Navbar menu items -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://www1.nyc.gov/" target="_blank">NYC.GOV</a></li>
<li><a href="http://www1.nyc.gov/311/" target="_blank">311</a></li>
<li><a href="http://www1.nyc.gov/office-of-the-mayor/" target="_blank">Office of the Mayor</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container-fluid">
<section class="unsupported">
<h1>This site is not supported by Internet Explorer.</h1><br />
<h4>Please use Google Chrome for best performance.<br />
<a href='http://bl.ocks.org/Kaz-A/raw/9152e844e6e3f91f2cf4002b12ba14c9/'>http://bl.ocks.org/Kaz-A/raw/9152e844e6e3f91f2cf4002b12ba14c9/</a></h4>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!-- <script>
var w = 1400,
h = 1000;
var svg = d3.select(".unsupported").append("svg")
.attr("width", w)
.attr("height", h);
var circle = svg.selectAll("circle")
.data(d3.range(200).map(function() {
return {
x: w * Math.random(),
y: h * Math.random(),
dx: Math.random() - 0.5,
dy: Math.random() - 0.5
};
}))
.enter().append("circle")
.attr("r", function(d) { return Math.floor((Math.random() * 5) + 1); })
.attr("class", "particles");
d3.timer(function() {
circle
.attr("cx", function(d) { d.x += d.dx; if (d.x > w) d.x -= w; else if (d.x < 0) d.x += w; return d.x; })
.attr("cy", function(d) { d.y += d.dy; if (d.y > h) d.y -= h; else if (d.y < 0) d.y += h; return d.y; });
});
var textDiv = d3.select(".unsupported").append("div");
var text = textDiv.append("html")
.attr("class", "unsupportedText")
.style("margin-top", "-900px")
.html("<h1>This page is not supported by Internet Explorer.</h1><br />\
<h4>Please use Google Chrome for best performance.<br />\
<a href='http://bl.ocks.org/Kaz-A/raw/9152e844e6e3f91f2cf4002b12ba14c9/' target='_blank'>http://bl.ocks.org/Kaz-A/raw/9152e844e6e3f91f2cf4002b12ba14c9/</a></h4>")
.style("color", "white");
</script> -->
</body>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600');
@import url("https://fonts.googleapis.com/css?family=Cormorant+Garamond:700");
* {
margin: 0;
padding: 0;
}
body{
font-family: 'EB Garamond', serif;
background: black;
}
.container-fluid {
padding: 0 !important;
}
.row {
padding: 0 20px 0 20px !important;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus {
background: #ABA9A9;
}
.nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
background: black;
transition: color 1s ease-out;
}
.tab {
margin-left: 20px;
margin-right: 20px;
}
.nav-tabs>li>a, .nav-tabs>li>a:focus {
background: #ddd;
}
a.navbar-brand {
background-image: url("https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/dohmh_logo.png");
background-size: cover;
width: 109px;
height: 70px;
margin-top: -28px;
cursor: pointer;
}
.navbar-default {
background-color: transparent;
border-color: transparent;
}
.navbar-dohmh {
background-color: black;
border-radius: 0px;
}
.navbar-default .navbar-nav>li>a {
color: white;
cursor: pointer;
}
.navbar-default .navbar-nav>li>a:hover {
color: red;
transition: color 1s ease-out;
}
.navbar-default .navbar-nav>li>a:focus {
color: white;
}
.navbar {
margin-bottom: 0px;
}
.navbar-epht {
background-color: beige;
border-radius: 0px;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.btn {
border-radius: 0px !important;
transition: linear, ease-in 0.3s !important;
}
.btn:focus {
color: white !important;
}
.btn-default {
color: black !important;
background: transparent !important;
border-color: white !important;
padding: 2% !important;
}
.btn-default:hover {
color: white !important;
background: black !important;
border-color: black !important;
}
.btn-default:focus {
outline: none !important;
text-decoration: none !important;
color: white !important;
}
.btn-default a {
color: black !important;
}
.btn-default a:focus {
color: red !important;
}
a {
color: white !important;
text-decoration: none !important;
}
a:hover {
color: #53c2c4 !important;
text-decoration: none !important;
transition: color 1s ease-out;
}
a:active {
color: white !important;
text-decoration: none !important;
}
a.active {
color: white !important;
text-decoration: none !important;
}
.sectionParent {
height: 100vh;
overflow: hidden;
}
.sectionParent > * {
height: 200%;
position: relative;
/*top: -100%;*/
}
.title {
/* text-align: center;*/
font-size: 2.0em;
padding-top: 50vh;
}
.text {
font-size: 1.0em;
padding-left: 120px;
padding-right: 120px;
}
.section1 {
color: white;
text-align: center;
}
#slide1 {
background: linear-gradient(black, #0a2538);
}
.section2 {
/*background: linear-gradient(#0a2538, #16c1d3);*/
background: #d8c51d;
color: #0a2538;
}
.section3 {
background: #16c1d3;
color: #0a2538;
}
.section4 {
/*background-color: #c92b2b;*/
background-color: #cbdcbc;
color: #0a2538;
}
.section5 {
/*background-color: #1ead5e;*/
background: linear-gradient(#1ead5e, #c6f476);
color: #0a2538;
}
.section5a {
background-color: #1ead5e;
color: #0a2538;
}
.footer{
/*background-color: black;*/
background-image: url("IMG_7458-1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
color: white;
text-align: center;
}
.cover{
background-color: black;
/*background-image: url("coverImage.jpg");*/
background-repeat: no-repeat;
background-size: cover;
height: 92vh;
color: white;
text-align: center;
/*margin-top: 10%;*/
}
.cover h1 {
margin-top: 120px;
}
.intro {
background-color: black;
/*height: 300vh;*/
color: white;
overflow: hidden;
}
.intro_graphic {
float: right;
margin-top: -675px;
}
.introObjDiv {
display: inline-block;
width: 100%;
transition: transform 0.3s ease-out;
}
#arrow {
text-align: center;
margin: 8% 0;
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.zap {
transform: scale(2.5, 0);
}
.show {
opacity: 1;
display: inline;
}
.particles {
fill: white;
stroke: none;
opacity: 0.5;
}
.titlepage h1 {
color: white;
}
.intro_title {
margin-top: -1650px;
}
.intro_text {
text-align: left;
}
#introText1, #introText2, #introText3, #g-anatomy, #g-cluster, #g-cluster2, #g-cluster3, #g-cluster4, #anatomyLabel, #g-sources {
display: none;
transition: transform 1.3s ease-in ease-out;
}
#slide1Title , #slide1Text {
display: none;
transition: transform 1.3s ease-in ease-out;
}
#slide1Title , #slide1Text, #slide2Title, #slide2Text, #slide2Graph, #slide3Text, #slide3Graph, #slide4Text, #slide4Graph, #slide5aText, #slide5aGraph, #footerText, #container {
/*display: none;*/
transition: transform 1.3s ease-in ease-out;
}
/*#slide5Text, #slide5Graph, #slide5MiddleDiv {
display: none;
transition: transform 1.3s ease-in ease-out;
}*/
#bloodstream {
stroke: white;
}
#slide4Graph {
margin-top: 20%;
}
#slide5aText .btn-group {
margin-top: 30px;
}
.text_fadeIn {
opacity: 0;
}
h4 span, h3 span , h5 span {
color: #c92b2b;
}
h4 span {
font-size:1.2em;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #0a2538;
margin: 1em 0;
padding: 0;
}
#stats {
margin-top: 90px;
display: none;
}
div.tooltip {
position: absolute;
text-align: left;
width: auto;
height: auto;
padding: 8px;
font: 12px sans-serif;
background: #0a2538;
border: #0a2538 1px solid;
border-radius: 0px;
pointer-events: none;
color: white;
}
.svg-container-legend {
display: inline-block;
position: relative;
width: 100%;
height: 140px;
/*padding-bottom: 18%;*/ /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
.legendBox, .legendBox3, .legendBox5 {
width: 14px;
height: 14px;
opacity: 1;
cursor: pointer;
}
.legendLabel, .legendLabel3, .legendLabel5 {
font-size: 14px;
color: #0a2538;
}
.dropdown-toggle {
background: #0a2538;
border: 2px solid #0a2538;
}
.dropdown-toggle:hover {
background: #16c1d3;
border: 2px solid #0a2538;
color: #0a2538;
}
div.dropdown-menu.open, ul.dropdown-menu.inner {
background: #0a2538;
padding: 5px;
}
li a span.text {
color: #16c1d3;
padding-left: 0px;
padding-right: 0px;
}
button:focus, li.selected a {
outline:0;
}
.map, .img5a {
width: 100%;
height: 80vh;
}
div > img {
width: auto;
height : auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
float: right;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 250px;
}
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
fill: #0a2538;
font-weight: 500;
}
.axis path,
.axis line {
fill: none;
stroke: #0a2538;
shape-rendering: crispEdges;
stroke-dasharray: 8,8;
opacity: 0.3;
stroke-width: 2px;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.x.axis .tick line {
stroke: #0a2538;
stroke-width: 2px;
stroke-dasharray: 0,0;
}
.group-label {
font-weight: bold;
text-anchor: end;
}
.slide4Form {
position: absolute;
right: 10px;
top: 10px;
}
input.shape {
margin: 10px;
}
.svg2 {
float: right;
margin-top: 10%;
padding-right: 50px;
padding-bottom: 50px;
}
.footerList {
list-style-type:none;
margin-top: 15vh;
}
/*.footerList text li a {
color: #c92b2b !important;
}
.footerList text li a:hover {
color: #53c2c4 !important;
}*/
.footer div h4 li {
list-style-type:none;
}
.footer div h4 a {
color: #c92b2b !important;
}
.footer div h4 a:hover {
color: #53c2c4 !important;
transition: color 1s ease-out;
}
.responsive5aImg {
margin-top: -50px;
}
#slide5MiddleDiv .axis text {
font-size: 10px;
}
span.asthma {
color: #6b486b;
font-size: 12px;
}
span.death {
color: #a05d56;
font-size: 12px;
}
span.cardio {
color: #b29a38;
font-size: 12px;
}
span.resp {
color: #d1c44e;
font-size: 12px;
}
span.large {
font-size: 20px;
}
.legend5 {
font-size: 0.6em;
padding: 0;
}
.povertyLines {
stroke-width: 0.5;
stroke: #0a2538;
fill: none;
}
.povertyRect {
stroke: none;
}
.povertyLineText {
fill: #0a2538;
/*font-family: 'Open Sans', sans-serif;*/
text-anchor: end;
}
.povertyChartTitle {
color: #0a2538;
font-size: 18px;
text-anchor: left;
}
.mapTitle5 {
color: #0a2538;
font-size: 16px;
}
/* GalaxyS5 iphone6 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 700px) {
.svg2 {
margin-top: 0px;
float:none;
width: 100%;
}
.svg4 {
margin-top: -100px;
}
.legend3{
z-index: 1000;
}
.map img {
margin-top: -160px;
}
.responsive5aImg {
margin-top: 10px;
}
#slide5Text {
z-index: 1000;
}
/*#slide5Graph {
margin-top: 0 !important;
}*/
#slide5MiddleDiv2 {
height: 35vh;
}
.legendLabel5, .mapTitle5 {
font-size: 12px;
color: #0a2538;
}
}
/* ipone5 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 700px) {
.svg2 {
margin-top: 0px;
float:none;
width: 100%;
}
.svg4 {
margin-top: -100px;
}
.legend3{
z-index: 1000;
}
.map img {
margin-top: -160px;
}
.responsive5aImg {
margin-top: 10px;
}
#slide5Text {
z-index: 1000;
}
/*#slide5Graph {
margin-top: 0 !important;
}*/
#slide5MiddleDiv2 {
height: 35vh;
}
.legendLabel5, .mapTitle5 {
font-size: 12px;
color: #0a2538;
}
}
/* Nexus5x, iphone6Plus */
@media only screen
and (min-device-width : 411px)
and (max-device-width : 730px) {
.svg2 {
margin-top: 0px;
float:none;
width: 100%;
}
.svg4 {
margin-top: -100px;
}
.legend3{
z-index: 1000;
}
.map img {
margin-top: -160px;
}
.responsive5aImg {
margin-top: 10px;
}
/*#slide5Graph {
margin-top: 40vh !important;
}*/
/*.sectionParent {
height: 100vh;
overflow: hidden;
}*/
#slide5MiddleDiv2 {
height: 35vh;
}
.legendLabel5, .mapTitle5 {
font-size: 12px;
color: #0a2538;
}
}
/* Nexus6P */
@media only screen
and (min-device-width : 435px)
and (max-device-width : 770px) {
.svg2 {
margin-top: 0px;
float:none;
width: 100%;
}
.svg4 {
margin-top: -100px;
}
.legend3{
z-index: 1000;
}
.map img {
margin-top: -160px;
}
.responsive5aImg {
margin-top: 10px;
}
#slide5Graph {
margin-top: 0;
}
.legendLabel5, .mapTitle5 {
font-size: 12px;
color: #0a2538;
}
}
/* ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1020px) {
.svg2 {
margin-top: 50px;
float:none;
}
.svg4 {
margin-top: -100px;
}
.legend3{
z-index: 1000;
}
.map img {
margin-top: -160px;
}
.responsive5aImg {
margin-top: 10px;
}
#slide5Graph {
margin-top: 0;
}
}
/* large screen */
@media only screen
and (min-device-width : 1200px)
and (max-device-width : 1600px) {
.svg-container-legend {
height: 300px;
}
#slide4Graph {
margin-top: 10%;
}
.responsive5aImg {
margin-top: -70px;
}
}
/* this might not be necessary*/
@media only screen
and (min-device-width : 1000px)
and (max-device-width : 1199px) {
.svg2 {
viewBox: -28 0 650 650;
}
#slide4Graph {
margin-top: 20%;
}
.responsive5aImg {
margin-top: -50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment