An animated infographic with d3 and scrollmagic. Published here
Last active
October 5, 2016 15:40
-
-
Save kaz-a/9152e844e6e3f91f2cf4002b12ba14c9 to your computer and use it in GitHub Desktop.
PM2.5 Infographic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // footer headline | |
| var footerDiv = d3.select(".footer"), | |
| footerText = footerDiv.append("div") | |
| .attr("class", "col-xs-12 col-sm-12 col-md-12") | |
| .attr("id", "footerText") | |
| .style("margin-top", "100px") | |
| .style("color", "white") | |
| .style("font-weight", 300); | |
| var text_large = "Read Full Report", | |
| text_small = "Learn more on PM2.5 in NYC<br />\ | |
| <a href='http://ehjournal.biomedcentral.com/articles/10.1186/s12940-016-0172-6' target='_blank'>go to report</a>", | |
| text_large2 = "Get In Touch", | |
| text_small2 = "We'd love to hear from you!<br />\ | |
| <a href='mailto:[email protected]?Subject=Type%20your%20subject'>email us</a>"; | |
| var footertitle = footerText.append("h1").text(text_large), | |
| footertext = footerText.append("h4").html(text_small), | |
| footertitle2 = footerText.append("h1").html(text_large2).style("margin-top", "100px"), | |
| footertext2 = footerText.append("h4").html(text_small2); | |
| // footer div container | |
| var container = footerDiv.append("div") | |
| .attr("id", "container") | |
| .attr("class", "container") | |
| var resources = container | |
| .append("div") | |
| .attr("class", "col-xs-12 col-md-12") | |
| .append("ul") | |
| .append("li") | |
| .attr("class", "footerList") | |
| // .html("<h4>Resources</h4>") | |
| .append("text").html("<li><a href='https://www1.nyc.gov/site/doh/data/data-publications/air-quality-nyc-community-air-survey.page' target='_blank'>NYC Community Air Survey</a></li>") | |
| .append("text").html("<li><a href='http://a816-dohbesp.nyc.gov/IndicatorPublic/' target='_blank'>NYC Environment And Health Data Portal</a></li>") | |
| .append("text").html("<li><a href='http://www1.nyc.gov/html/onenyc/index.html' target='_blank'> OneNYC</a></li>") | |
| .append("text").html("<li><a href='https://www3.epa.gov/airquality/particlepollution/designations/basicinfo.htm' target='_blank'>US EPA</a></li>") | |
| .append("text").html("<li><a href='http://www.dec.ny.gov/airmon/' target='_blank'>DEC Air Monitoring</a></li>"); | |
| var social = container | |
| .append("div") | |
| .attr("class", "col-xs-12 col-md-12") | |
| .append("text").html("<a class='btn btn-social-icon btn-google-plus' href='http://google.com/+'><i class='fa fa-google-plus'></i></a>") | |
| .append("text").html("<a class='btn btn-social-icon btn-facebook' href='http://www.facebook.com/profile.php?id='><i class='fa fa-facebook'></i></a>") | |
| .append("text").html("<a class='btn btn-social-icon btn-linkedin' href='http://www.linkedin.com/in/'><i class='fa fa-linkedin'></i></a>") | |
| .append("text").html("<a class='btn btn-social-icon btn-twitter' href='http://twitter.com/'><i class='fa fa-twitter'></i></a>") | |
| .append("text").html("<a class='btn btn-social-icon' href='mailto:'><i class='fa fa-envelope-o'></i></a>"); | |
| var acknowledgment = container | |
| .append("div") | |
| .attr("class", "col-xs-12 col-md-12") | |
| .append("text").html("<h5>By Iyad Kheirbek | Kazue Anan | <i class='fa fa-copyright'></i>September 2016</h4>"); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>NYCCAS infographic</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"> | |
| <script type="text/javascript"> | |
| var sUsrAg = navigator.userAgent; | |
| if (sUsrAg.indexOf("MSIE") > -1) { | |
| window.location = 'http://bl.ocks.org/Kaz-A/raw/e4c3469150b4a70411fe3a816c04dd17/'; | |
| } | |
| </script> | |
| </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="http://www.nyc.gov/html/doh/html/home/home.shtml" 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 id="slide0" class="sectionParent"> | |
| <div class="cover row"> | |
| <h1>The Public Health Impacts of PM2.5 from Traffic Air Pollution</h1> | |
| </div> | |
| </section> | |
| <div class="intro col-xs-12 col-md-12 col-sm-12"> | |
| </div> | |
| <section id="slide1" class="sectionParent"> | |
| <div class="section1 row"></div> | |
| </section> | |
| <section id="slide2" class="sectionParent"> | |
| <div class="section2 row"></div> | |
| </section> | |
| <section id="slide3" class="sectionParent"> | |
| <div class="section3 row"></div> | |
| </section> | |
| <section id="slide4" class="sectionParent"> | |
| <div class="section4 row"></div> | |
| </section> | |
| <section id="slide5a" class="sectionParent"> | |
| <div class="section5a row"></div> | |
| </section> | |
| <section id="slide5" class="sectionParent"> | |
| <div class="section5 row"></div> | |
| </section> | |
| <!-- <section id="slide6" class="sectionParent"> | |
| <div class="section6 row"></div> | |
| </section> --> | |
| <footer class="footer"></footer> | |
| </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/gsap/1.19.0/TweenMax.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> | |
| <!--<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>--> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <!-- <script src="http://d3js.org/queue.v1.min.js"></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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> | |
| <script src="scroll.js"></script> | |
| <script src="intro.js"></script> | |
| <script src="slide1.js"></script> | |
| <script src="slide2.js"></script> | |
| <script src="slide3.js"></script> | |
| <script src="slide4.js"></script> | |
| <script src="slide5a.js"></script> | |
| <script src="slide5.js"></script> | |
| <script src="fin.js"></script> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // init controller | |
| var controller = new ScrollMagic.Controller({ | |
| globalSceneOptions: { | |
| triggerHook: "onEnter", | |
| duration: "200%" | |
| } | |
| }); | |
| // Controller | |
| var controller = new ScrollMagic.Controller(); | |
| // // build intro scenes | |
| $(function () { // wait for document ready | |
| // Intro scenes | |
| var scene00 = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 150, duration: 1450}) | |
| .setClassToggle(".introObjDiv", "zap") // hide phere | |
| .addIndicators({name: "hide sphere"}) | |
| .addTo(controller); | |
| var scroll = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 150, duration: 1450}) | |
| .setClassToggle("#arrow", "zap") // scroll caret | |
| .addIndicators({name: "hide caret"}) | |
| .addTo(controller); | |
| var scene01a = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 150, duration: 1450}) | |
| .setClassToggle(".introTitle", "hide") // hide title | |
| .addIndicators({name: "hide title"}) | |
| .addTo(controller); | |
| var scene01b = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 150, duration: 1450}) | |
| .setClassToggle("#introText0", "hide") // hide text0 | |
| .addIndicators({name: "hide text0"}) | |
| .addTo(controller); | |
| var scene02a = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 400, duration: 400}) | |
| .setClassToggle("#introText1", "show") // show text1 | |
| .addIndicators({name: "show text1"}) | |
| .addTo(controller); | |
| var scene02b = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 450, duration: 350}) | |
| .setClassToggle("#g-sources", "show") // show sources svg | |
| .addIndicators({name: "show sources drawing"}) | |
| .addTo(controller); | |
| var scene03 = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 850, duration: 410}) | |
| .setClassToggle("#introText2", "show") // show text2 | |
| .addIndicators({name: "show text2"}) | |
| .addTo(controller); | |
| var scene04a = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 900, duration: 700}) | |
| .setClassToggle("#g-anatomy", "show") // show anatomy | |
| .addIndicators({name: "show anatomy"}) | |
| .addTo(controller); | |
| var scene04b = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 1000, duration: 210}) | |
| .setClassToggle("#g-cluster", "show") // show cluster | |
| .addIndicators({name: "show cluster"}) | |
| .addTo(controller); | |
| // Specify bezier for the cluster path | |
| var bezier = [ | |
| { x: 650, y: 1110 }, | |
| { x: 750, y: 1110 }, | |
| { x: 750, y: 1200 } | |
| ]; | |
| var tween = new TimelineMax() | |
| .add(TweenMax.to($("#g-cluster"), 1, { css:{ | |
| bezier:{ | |
| curviness: 1.25, | |
| values: bezier, | |
| autoRotate: true, | |
| type: 'thru' | |
| }, | |
| ease:Power1.easeInOut | |
| }})); | |
| // .add(TweenMax.to($("#g-cluster"), 2, {css:{bezier:flightpath.looping}, ease:Power1.easeInOut})) | |
| // .add(TweenMax.to($("#g-cluster"), 1, {css:{bezier:flightpath.leave, ease:Power1.easeInOut}})); | |
| var scene05 = new ScrollMagic.Scene({triggerElement: ".intro", offset: 1550, duration: 300}) | |
| .setPin(".intro") | |
| .setTween(tween) | |
| .addIndicators({name: "move cluster"}) // move cluster | |
| .addTo(controller); | |
| var scene05a = new ScrollMagic.Scene({triggerElement: ".intro", offset: 1600, duration: 250}) | |
| .setClassToggle("#g-cluster2", "show") // show cluster 2 | |
| .addIndicators({name: "show cluster2"}) | |
| .addTo(controller); | |
| var scene05b = new ScrollMagic.Scene({triggerElement: ".intro", offset: 1650, duration: 200}) | |
| .setClassToggle("#g-cluster3", "show") // show cluster 3 | |
| .addIndicators({name: "show cluster3"}) | |
| .addTo(controller); | |
| var scene05c = new ScrollMagic.Scene({triggerElement: ".intro", offset: 1700, duration: 150}) | |
| .setClassToggle("#g-cluster4", "show") // show cluster 4 | |
| .addIndicators({name: "show cluster4"}) | |
| .addTo(controller); | |
| var scene06 = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 1300, duration: 300}) | |
| .setClassToggle("#introText3", "show") // show text3 | |
| .addIndicators({name: "show text3"}) | |
| .addTo(controller); | |
| var scene07 = new ScrollMagic.Scene({triggerElement: ".intro_title", offset: 1300, duration: 300}) | |
| .setClassToggle("#anatomyLabel", "show") // show anatomy label | |
| .addIndicators({name: "show anatomy label"}) | |
| .addTo(controller); | |
| // remove indicators - uncomment when done | |
| // scene00.removeIndicators(); | |
| // scene01a.removeIndicators(); | |
| // scene01b.removeIndicators(); | |
| // scene02a.removeIndicators(); | |
| // scene02b.removeIndicators(); | |
| // scene03.removeIndicators(); | |
| // scene04a.removeIndicators(); | |
| // scene04b.removeIndicators(); | |
| // scene05.removeIndicators(); | |
| // scene05a.removeIndicators(); | |
| // scene05b.removeIndicators(); | |
| // scene05c.removeIndicators(); | |
| // scene06.removeIndicators(); | |
| // scene07.removeIndicators(); | |
| }); | |
| ///////////////////////////////////////////////////////////////////////// | |
| // INTRO SCENE ////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////// | |
| var introText0 = "Fine particulate matter (PM2.5) are tiny airborne solid and liquid particles \ | |
| less than 2.5 microns in diameter."; | |
| var introText1 = "<h1>Sources of PM2.5</h1>PM2.5 in NYC comes from inside and outside the city from all kinds of \ | |
| combustion activity, including the burning of fuel in <span>vehicles</span>, <span>buildings</span>, \ | |
| <span>power plants</span>, and <span>construction equipment</span>, as well as \ | |
| <span>commercial cooking</span> and <span>industrial activities</span>. \ | |
| PM2.5 can either come directly from these sources or be formed in the atmosphere from other pollutants."; | |
| var introText2 = "<h1>Health effects of PM2.5</h1>PM2.5 is the most harmful urban air pollutant, \ | |
| small enough to penetrate deep into the lungs \ | |
| and enter the bloodstream,"; | |
| var introText3 = "resulting in adverse <span>respiratory</span> and <span>cardiovascular</span> health outcomes \ | |
| and contributing to an increased risk of <span>death</span> and \ | |
| <span>lower life expectancy</span>."; | |
| // Moving particles animation background | |
| var w = 1400, | |
| h = 2000; | |
| var svg = d3.select(".intro").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; }); | |
| }); | |
| // Intro title + text area div | |
| var introDiv = d3.select(".intro").append("div") | |
| .attr("class", "intro_title col-xs-12 col-md-4 col-sm-4"); | |
| var introGraphicDiv = d3.select(".intro").append("div") | |
| .attr("class", "intro_graphic col-xs-12 col-md-8 col-sm-8"); | |
| // Intro title | |
| var introTitle = introDiv.append("h1") | |
| .attr("class", "introTitle") | |
| .html("What is PM2.5?"); | |
| var delay = 2000; | |
| // Intro text ZERO | |
| var introText0 = introDiv.append("h4") | |
| .style("opacity", 0) | |
| .attr("id", "introText0") | |
| .text(introText0) | |
| .transition().delay(200).duration(delay) | |
| .style("opacity", 1) | |
| // Create div + svg area for spherical models | |
| var introObj1 = introDiv.append("div") | |
| .attr("class", "introObjDiv") | |
| .attr("width", "100%") | |
| .append("svg") | |
| .attr("width", 300) | |
| .attr("height", 100); | |
| var particle = "particle-01.svg"; | |
| // PM2.5 sphere | |
| var pm25sphere = introObj1 | |
| .append("svg:image") | |
| .style("opacity", 0) | |
| .attr("xlink:href", particle) | |
| .attr("width", 30) | |
| .attr("height", 30) | |
| .attr("x", 85) | |
| .attr("y", 35) | |
| .transition().delay(300).duration(delay) | |
| .style("opacity", 1); | |
| // Red blood cell circle | |
| var rbcCircle = introObj1.append("circle") | |
| .style("opacity", 0) | |
| .attr({ | |
| cx: "100px", | |
| cy: "50px", | |
| r: "40px", | |
| fill: "none", | |
| stroke: "white" | |
| }) | |
| .style("stroke-dasharray", ("3, 3")) | |
| .transition().delay(delay/4).duration(delay) | |
| .style("opacity", 1); | |
| // line + text for the pm2.5 sphere | |
| var pmLine = introObj1.append("line") | |
| .style("opacity", 0) | |
| .attr({ | |
| x1: 100, | |
| y1: 50, | |
| x2: 180, | |
| y2: 20, | |
| stroke: "white", | |
| fill: "none" | |
| }) | |
| .style("stroke-width", "1") | |
| .transition().delay(delay/4).duration(delay) | |
| .style("opacity", 1); | |
| var pmText = introObj1.append("text") | |
| .style("opacity", 0) | |
| .attr({ | |
| x: 181, | |
| y: 25, | |
| fill: "white" | |
| }) | |
| .style("text-anchor", "start") | |
| .text("Size of PM2.5") | |
| .transition().delay(delay/4).duration(delay) | |
| .style("opacity", 1); | |
| // line + text for the red blood cell circle | |
| var rbcLine = introObj1.append("line") | |
| .style("opacity", 0) | |
| .attr({ | |
| x1: 140, | |
| y1: 50, | |
| x2: 180, | |
| y2: 50, | |
| stroke: "white", | |
| fill: "none" | |
| }) | |
| .style("stroke-width", "1") | |
| .transition().delay(delay/4).duration(delay) | |
| .style("opacity", 1); | |
| var rbcText = introObj1.append("text") | |
| .style("opacity", 0) | |
| .attr({ | |
| x: 181, | |
| y: 55, | |
| fill: "white" | |
| }) | |
| .style("text-anchor", "start") | |
| .text("Size of red blood cell") | |
| .transition().delay(delay/4).duration(delay) | |
| .style("opacity", 1); | |
| // scroll down arrow | |
| var caret = d3.select(".cover").append("div") | |
| // .style("opacity", 0) | |
| .attr("id", "arrow") | |
| .attr("class", "bounce") | |
| .append("a") | |
| .attr("class", "glyphicon glyphicon-arrow-down") | |
| .style("font-size", "2em"); | |
| // .transition().delay(delay/2).duration(delay) | |
| // .style("opacity", 1); | |
| // Intro text ONE | |
| var introText1 = introDiv.append("h4") | |
| .attr("id", "introText1") | |
| .html(introText1) | |
| .style("padding-top", "400px"); | |
| // Show sources drawing | |
| var sources = svg | |
| .append("svg") | |
| .attr("id", "g-sources") | |
| .append("svg:image") | |
| .attr("xlink:href", "sources.svg") | |
| .attr("width", 109 * 4) | |
| .attr("height", 150 * 4) | |
| .attr("x", 620) | |
| .attr("y", 800); | |
| // Intro text TWO | |
| var introText2 = introDiv.append("h4") | |
| .attr("id", "introText2") | |
| .html(introText2) | |
| .style("padding-top", "900px"); | |
| // Show anatomy image | |
| var introObj2 = svg | |
| .append("svg") | |
| .attr("id", "g-anatomy") | |
| .append("svg:image") | |
| .attr("xlink:href", "anatomy.svg") | |
| .attr("width", 109 * 4) | |
| .attr("height", 150 * 4) | |
| .attr("x", 620) | |
| .attr("y", 1300); | |
| // Show cluster image | |
| var cluster = svg | |
| .append("svg") | |
| .attr("id", "g-cluster") | |
| .append("svg:image") | |
| .attr("xlink:href", "cluster.svg") | |
| .attr("width", 30) | |
| .attr("height", 30) | |
| .attr("x", 690) | |
| .attr("y", 1500); | |
| var cluster2 = svg | |
| .append("svg") | |
| .attr("id", "g-cluster2") | |
| .append("svg:image") | |
| .attr("xlink:href", "cluster.svg") | |
| .attr("width", 30) | |
| .attr("height", 30) | |
| .attr("x", 810) | |
| .attr("y", 1540); | |
| var cluster3 = svg | |
| .append("svg") | |
| .attr("id", "g-cluster3") | |
| .append("svg:image") | |
| .attr("xlink:href", "cluster.svg") | |
| .attr("width", 30) | |
| .attr("height", 30) | |
| .attr("x", 815) | |
| .attr("y", 1650); | |
| var cluster4 = svg | |
| .append("svg") | |
| .attr("id", "g-cluster4") | |
| .append("svg:image") | |
| .attr("xlink:href", "cluster.svg") | |
| .attr("width", 30) | |
| .attr("height", 30) | |
| .attr("x", 760) | |
| .attr("y", 1730); | |
| // Intro text THREE | |
| var introText3 = introDiv.append("h4") | |
| .attr("id", "introText3") | |
| .html(introText3) | |
| .style("padding-top", "1300px"); | |
| // Show anatomy labels | |
| var anatomyLabel = svg | |
| .append("svg") | |
| .attr("id", "anatomyLabel") | |
| .append("svg:image") | |
| .attr("xlink:href", "anatomy-label.svg") | |
| .attr("width", 109 * 4) | |
| .attr("height", 150 * 4) | |
| .attr("x", 620) | |
| .attr("y", 1300); | |
| // // Intro text SCROLLDOWN | |
| // var scroll1 = introDiv.append("a") | |
| // .style("opacity", 0) | |
| // .attr("id", "scroll") | |
| // .html("SCROLL DOWN TO CONTINUE") | |
| // .transition().delay(delay/2).duration(delay) | |
| // .style("opacity", 1) | |
| // .style("color", "grey"); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).on('click', '#arrow', function(event){ | |
| event.preventDefault(); | |
| var viewportHeight = $(window).height(); | |
| $('html, body').animate({ | |
| scrollTop: viewportHeight, | |
| complete: function () { | |
| } | |
| }, 1400); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // build section1 scenes | |
| $(function () { // wait for document ready | |
| var scene1 = new ScrollMagic.Scene({triggerElement: ".section1", offset: 30, duration: 530}) | |
| .setClassToggle("#slide1Title", "show") // show slide1 title | |
| .addIndicators({name: "show slide1 title"}) | |
| .addTo(controller); | |
| var scene2 = new ScrollMagic.Scene({triggerElement: ".section1", offset: 100, duration: 460}) | |
| .setClassToggle("#slide1Text", "show") // show slide1 subtitle | |
| .addIndicators({name: "show slide1 subtitle"}) | |
| .addTo(controller); | |
| var scene3 = new ScrollMagic.Scene({triggerElement: ".section1", offset: 300, duration: 260}) | |
| .setClassToggle("#stats", "show") // show stats | |
| .addIndicators({name: "show stats"}) | |
| .addTo(controller); | |
| // remove previously added indicators - uncomment when done | |
| // scene1.removeIndicators(); | |
| // scene2.removeIndicators(); | |
| // scene3.removeIndicators(); | |
| }); | |
| ///////////////////////////////////////////////////////////////////////// | |
| // SCENE ONE //////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////// | |
| // slide1 headline | |
| var slide1Div = d3.select(".section1"); | |
| var text_large = "In New York City,", | |
| text_small = "current PM2.5 levels contribute to <br/> \ | |
| <span>2300</span> deaths and <span>6300</span> emergency department visits and hospitalizations <br/> \ | |
| for respiratory and cardiovascular disease each year."; | |
| var slide1title = slide1Div.append("h1").attr("id", "slide1Title").text(text_large), | |
| slide1text = slide1Div.append("h4").attr("id", "slide1Text").html(text_small); | |
| // div container for stats contents | |
| var stats = slide1Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-12 colmd-12") | |
| .attr("id", "stats") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| // div for stats title + graphic | |
| var statsDiv = stats.append("div") | |
| .attr("class", "death col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3"); | |
| var statsText = "PM2.5 in NYC causes"; | |
| statsDiv.append("h3").html(statsText) | |
| .style("font-family", "'EB Garamond', serif") | |
| .style("opacity", 0.8); | |
| // Death + ED Visits stats charts | |
| // var svg = statsDiv.append("svg") | |
| // .attr("class", "stats") | |
| // .attr("width", "450px") | |
| // .attr("height", "400px"); | |
| var width = 500, height = 500; | |
| // responsive svg | |
| var svg1 = d3.select(".death").append("svg") | |
| .style("margin-top", "-70px") | |
| .attr("width", '80%') | |
| .attr("height", '80%') | |
| .attr('viewBox','200 150 '+Math.min(width,height)+' '+Math.min(width,height)) | |
| .attr('preserveAspectRatio','xMinYMin') | |
| .append("g") | |
| .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")"); | |
| var data = [ | |
| { "r": 6, "x":180, "label": "Asthma" }, | |
| { "r": 5, "x": 60, "label": "Deaths" }, | |
| { "r": 2.1, "x": 280, "label": "Respiratory" }, | |
| { "r": 1.1, "x": 370, "label": "Cardiovascular" }]; | |
| var g = svg1.selectAll("g") | |
| .data(data); | |
| var g_enter = g.enter() | |
| .append("g") | |
| .attr("transform", function(d) { return "translate(" + d.x +", 80)"}) | |
| var circles = g_enter | |
| .append("circle") | |
| .attr("r", function(d) { return d.r*10; }) | |
| .style("stroke", "#16c1d3") | |
| .style("fill", "none") | |
| .style("stroke-width", "2px"); | |
| // circle labels - label | |
| var circleLabel = g_enter.append("text") | |
| .attr("dx", function(d) { return -20; }) | |
| .attr("dy", function(d) { | |
| return d.label == "Respiratory" || d.label == "Cardiovascular" ? 40 : 3; | |
| }) | |
| .text(function(d){ return d.label; }) | |
| .style("fill", "#16c1d3"); | |
| // circle labels - % | |
| var circleLabel2 = g_enter.append("text") | |
| .attr("dx", function(d) { return -20; }) | |
| .attr("dy", function(d) { | |
| return d.label == "Respiratory" || d.label == "Cardiovascular" ? 58 : 20; | |
| }) | |
| .text(function(d) { return d.r + "%"; }) | |
| .style("fill", "#c92b2b"); | |
| // dashed leader lines | |
| var line = g_enter.append("line") | |
| .attr({ | |
| x1: 0, | |
| // y1: 50, | |
| x2: 0, | |
| y2: 150, | |
| stroke: "white", | |
| fill: "none" | |
| }) | |
| .attr("y1", function(d) { return d.r == 5 ? 50 : d.r == 6 ? 60 : 65; }) | |
| .attr("y2", function(d) { return d.r == 2.1 || d.r == 1.1 ? 100 : 150; }) | |
| .style("stroke-width", "1") | |
| .style("stroke-dasharray", ("3, 3")); | |
| var desc1 = "1 in 20 deaths"; | |
| var desc2a = "About 1 in 17 asthma"; | |
| var desc2b = "emergency room visits"; | |
| var desc3 = "About 1 in 31 hospitalizations"; | |
| // 1st line of description | |
| var description = g_enter.append("text") | |
| .attr("dx", function(d) { return -30; }) | |
| .attr("dy", function(d) { return d.r == 5 || d.r == 6 ? 162 : 112; }) | |
| .text(function(d) { return d.r == 5 ? desc1 : d.r == 6 ? desc2a : d.r == 2.1 ? desc3 : ""; }) | |
| .style("fill", "white") | |
| .style("opacity", 0.8); | |
| // 2nd line of description (only for asthma) | |
| var descriptionWrap = g_enter.append("text") | |
| .attr("dx", function(d) { return -30; }) | |
| .attr("dy", function(d) { return d.r == 6 ? 178 : 0; }) | |
| .text(function(d) { return d.r == 6 ? desc2b : ""; }) | |
| .style("fill", "white") | |
| .style("opacity", 0.8); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // slide2 headline | |
| var slide2Div = d3.select(".section2"), | |
| slide2Text = slide2Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-4 col-md-4") | |
| .attr("id", "slide2Text") | |
| .style("margin-top", "50px") | |
| .style("font-weight", 300); | |
| var text_large = "About 1/5th of PM2.5 emissions in NYC are from on-road traffic", | |
| text_small = "<span>12.9%</span> of all emissions come from trucks and buses.<br/> \ | |
| Click in the chart to see the breakdown."; | |
| var slide2title = slide2Text.append("h1").text(text_large), | |
| slide2text = slide2Text.append("h4").html(text_small); | |
| // slide 2 div container | |
| var slide2Graph = slide2Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-8 col-md-8") | |
| .attr("id", "slide2Graph") | |
| //.style("margin-top", "50px") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| // donut chart adapted from http://bl.ocks.org/metmajer/5480307 | |
| var margin = {top: 20, right: 20, bottom: 20, left: 20}; | |
| var width = 500-margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom, | |
| radius = (Math.min(width, height) / 2) - 10; | |
| var formatNumber = d3.format(",d"); | |
| var percentBase = 100; | |
| var x = d3.scale.linear() | |
| .range([0, 2 * Math.PI]); | |
| var y = d3.scale.linear() | |
| .range([0, radius]); | |
| var partition = d3.layout.partition() | |
| .value(function(d) { return d.size; }); | |
| // responsive svg | |
| var svg2 = d3.select("#slide2Graph").append("svg") | |
| .attr("class", "svg2") | |
| .attr("width", '60%') | |
| .attr("height", '60%') | |
| .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height)) | |
| .attr('preserveAspectRatio','xMinYMin') | |
| .append("g") | |
| .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")"); | |
| var arc = d3.svg.arc() | |
| .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) | |
| .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) | |
| .innerRadius(function(d) { return Math.max(0, y(d.y)); }) | |
| .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); | |
| // tooltip | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| d3.json("sources.json", function(error, root) { | |
| if (error) throw error; | |
| //console.log(root); | |
| var g = svg2.selectAll("path") | |
| .data(partition.nodes(root)) | |
| .enter().append("g"); | |
| var path = g.append("path") | |
| .attr("d", arc) | |
| .style("fill", function(d) { return d.color; }) | |
| .style("stroke", "white") | |
| .style("stroke-width", "1px") | |
| .on("click", click) | |
| .on("mouseover", function(d,i) { | |
| d3.select(this).style("cursor", "pointer") | |
| var totalSize = path.node().__data__.value; | |
| var percentage = Math.round(((100 * d.value / totalSize) * 100) /percentBase); | |
| var percentageString = percentage + "%"; | |
| if (d.name == "Sources") return null; | |
| tooltip.text(d.name +" "+percentageString) | |
| .style("opacity", 0.8) | |
| .style("left", (d3.event.pageX)+0 + "px") | |
| .style("top", (d3.event.pageY)-0 + "px"); | |
| if (d.name == "Sources"){ | |
| return null; | |
| } | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this).style("cursor", "default") | |
| tooltip.style("opacity", 0); | |
| }); | |
| var text = g.append("text") | |
| .attr("transform", function(d) { | |
| return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; | |
| }) | |
| .attr("text-anchor", "middle") | |
| .attr("dx", "0") // margin | |
| .attr("dy", ".35em") // vertical-align | |
| .text(function(d) { | |
| return d.name == "Commercial Cooking" ? "Cooking" : d.name == "Natural Gas" ? "Gas" : | |
| d.name == "Construction Dust" ? "Const Dust" : d.name == "Residual Oil" ? "Res Oil" : | |
| d.name == "Distillate Oil" ? "Dist Oil" : d.name == "Non-Road" ? "Non Rd" : | |
| d.name == "Non Road Equipment" ? "Equip" : d.name == "Marine Vessels" ? "Vessels" : | |
| d.name == "Electric Generation" ? "Elec Gen" : d.name == "Road Dust" ? "Rd Dust" : | |
| d.name == "Sources" ? null : d.name; | |
| }) | |
| .style("font-size", "13px") | |
| .style("fill", "#0a2538"); | |
| function click(d) { | |
| percentBase = parseFloat(d.percent.split("%")[0]); | |
| if(d.name == "Sources") percentBase = 100; | |
| console.log(percentBase) | |
| // fade out all text elements | |
| text.transition().attr("opacity", 0); | |
| path.transition() | |
| .duration(750) | |
| .attrTween("d", arcTween(d)) | |
| .each("end", function(e, i) { | |
| // check if the animated element's data e lies within the visible angle span given in d | |
| if (e.x >= d.x && e.x < (d.x + d.dx)) { | |
| // get a selection of the associated text element | |
| var arcText = d3.select(this.parentNode).select("text"); | |
| // fade in the text element and recalculate positions | |
| arcText.transition().duration(300) | |
| .attr("opacity", 1) | |
| .attr("transform", function(d) { | |
| return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; | |
| }) | |
| .attr("text-anchor", "middle"); | |
| } | |
| }); | |
| } | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| // Interpolate the scales! | |
| function arcTween(d) { | |
| var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), | |
| yd = d3.interpolate(y.domain(), [d.y, 1]), | |
| yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); | |
| return function(d, i) { | |
| return i | |
| ? function(t) { return arc(d); } | |
| : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; | |
| }; | |
| } | |
| function computeTextRotation(d) { | |
| var ang = (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180; | |
| return (ang > 90) ? 180 + ang : ang; | |
| } | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // slide3 headline | |
| var slide3Div = d3.select(".section3"), | |
| slide3Text = slide3Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-4 col-md-4") | |
| .attr("id", "slide3Text") | |
| .style("margin-top", "50px") | |
| .style("font-weight", 300); | |
| var text_large = "PM2.5 pollution from traffic is not evenly distributed throughout the city", | |
| text_small = "Select from the following list:"; | |
| var slide3title = slide3Text.append("h1").text(text_large), | |
| slide3text = slide3Text.append("h4").html(text_small); | |
| // slide 3 div container | |
| var slide3Graph = slide3Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-8 col-md-8") | |
| .attr("id", "slide3Graph") | |
| //.style("margin-top", "50px") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| // add dropdown element | |
| var array = ["All On-Road Traffic in Region", "All On-Road Traffic Within NYC", | |
| "Trucks and Buses Within NYC", "Cars Within NYC", "All On-Road Traffic, Outside NYC", "PM2.5 from all sources"]; | |
| var array2 = ["https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-02.png", "https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-03.png", "https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-04.png", "https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-05.png", "https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-06.png", "https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/map-01.png"]; | |
| var dropDown = d3.select("#slide3Text").append("select") | |
| .attr("class", "selectpicker") | |
| .attr("data-style", "btn-primary") | |
| .attr("name", "Select an item"); | |
| var options = dropDown.selectAll("option") | |
| .data(array) | |
| .enter() | |
| .append("option"); | |
| var optionText = options.text(function (d) { return d; }) | |
| .attr("value", function (d) { return d; }); | |
| function initMap() { | |
| var mapArea = d3.select("#slide3Graph").append("div").attr("class", "map"); | |
| var initImg = mapArea.html("<img src='" + array2[0] + "'>"); | |
| legendB(); | |
| } | |
| dropDown.on("change", menuUpdate); | |
| function menuUpdate() { | |
| //get the data value and index from the event | |
| var selectedValue = d3.event.target.value; | |
| var selectedIndex = d3.event.target.selectedIndex; | |
| if (selectedValue == array[0]) { | |
| d3.select(".map").html("<img src='" + array2[0] + "'>"); | |
| //removeLegend(); | |
| legendB(); | |
| } else if (selectedValue == array[1]) { | |
| d3.select(".map").html("<img src='" + array2[1] + "'>"); | |
| //removeLegend(); | |
| legendB(); | |
| } else if (selectedValue == array[2]) { | |
| d3.select(".map").html("<img src='" + array2[2] + "'>"); | |
| //removeLegend(); | |
| legendB(); | |
| } else if (selectedValue == array[3]) { | |
| d3.select(".map").html("<img src='" + array2[3] + "'>"); | |
| //removeLegend(); | |
| legendB(); | |
| } else if (selectedValue == array[4]) { | |
| d3.select(".map").html("<img src='" + array2[4] + "'>"); | |
| //removeLegend(); | |
| legendB(); | |
| } else if (selectedValue == array[5]) { | |
| d3.select(".map").html("<img src='" + array2[5] + "'>"); | |
| //removeLegend(); | |
| legendA(); | |
| } | |
| } | |
| // responsive legend container | |
| var legend3 = d3.select("#slide3Text").append("div") | |
| //.classed("svg-container-legend", true) | |
| .append("svg") | |
| // .attr("preserveAspectRatio", "xMinYMin meet") | |
| // .attr("viewBox", "0 0 480 200.2") | |
| // .classed("svg-content-responsive", true) | |
| .attr("class", "legend3"); | |
| // legend for brown color scheme | |
| function legendA() { | |
| var legendData3a = [ | |
| { "name": "7.17-8.09", "color": "#ffff99" }, | |
| { "name": "8.10-8.67", "color": "#fce681" }, | |
| { "name": "8.68-9.33", "color": "#fad06e" }, | |
| { "name": "9.34-10.11", "color": "#f5b958" }, | |
| { "name": "10.12-11.26", "color": "#d18b49" }, | |
| { "name": "11.27-12.98", "color": "#ab623e" }, | |
| { "name": "12.99-19.41", "color": "#8a3934" } | |
| ]; | |
| removeLegend(); | |
| // draw legend boxes | |
| var legendBox3a = legend3.selectAll("rect") | |
| .data(legendData3a) | |
| .enter() | |
| .append("g") | |
| .append("rect") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 0) | |
| .attr("class", "legendBox3") | |
| .style("fill", function(d) { return d.color; }); | |
| //label legend boxes | |
| var legendLabel3a = legend3.selectAll("text") | |
| .data(legendData3a) | |
| .enter() | |
| .append("text") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 20) | |
| .attr("dy", ".70em") | |
| .attr("class", "legendLabel3") | |
| .html(function(d) { return d.name + " µg/m³"; }); | |
| } | |
| // legend for red color scheme | |
| function legendB() { | |
| var legendData3b = [ | |
| { "name": "0.09-0.32", "color": "#ffefde" }, | |
| { "name": "0.33-0.56", "color": "#f7d5be" }, | |
| { "name": "0.57-0.83", "color": "#f0bba1" }, | |
| { "name": "0.84-1.09", "color": "#e69b83" }, | |
| { "name": "1.10-1.37", "color": "#de7e6a" }, | |
| { "name": "1.38-1.74", "color": "#d65c51" }, | |
| { "name": "1.75-2.60", "color": "#d13b3b" } | |
| ]; | |
| removeLegend(); | |
| // draw legend boxes | |
| var legendBox3b = legend3.selectAll("rect") | |
| .data(legendData3b) | |
| .enter() | |
| .append("g") | |
| .append("rect") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 0) | |
| .attr("class", "legendBox3") | |
| .style("fill", function(d) { return d.color; }); | |
| //label legend boxes | |
| var legendLabel3b = legend3.selectAll("text") | |
| .data(legendData3b) | |
| .enter() | |
| .append("text") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 20) | |
| .attr("dy", ".70em") | |
| .attr("class", "legendLabel3") | |
| .html(function(d) { return d.name + " µg/m³"; }); | |
| } | |
| function removeLegend() { | |
| d3.selectAll(".legendBox3").remove(); | |
| d3.selectAll(".legendLabel3").remove(); | |
| } | |
| window.onload = initMap(); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // slide4 headline | |
| var slide4Div = d3.select(".section4"), | |
| slide4Text = slide4Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-4 col-md-4") | |
| .attr("id", "slide4Text") | |
| .style("margin-top", "50px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300); | |
| var text_large = "PM2.5 pollution from traffic contributes to adverse health effects", | |
| text_small = "PM2.5 pollution from traffic sources in the region contributes to \ | |
| <span>320 premature deaths</span> and <span>870 emergency department (ED) visits and hospitalizations each year</span>.<br />\ | |
| The largest impacts are from <span>trucks and buses</span>."; | |
| var slide4title = slide4Text.append("h1").text(text_large), | |
| slide4text = slide4Text.append("h4").html(text_small); | |
| // slide4 div container | |
| var slide4Graph = slide4Div.append("div") | |
| .attr("class", "col-xs-12 col-sm-8 col-md-8") | |
| .attr("id", "slide4Graph") | |
| // .style("margin-top", "20%") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| // stacked bar chart adapted from http://bl.ocks.org/juan-cb/43f10523858abf6053ae | |
| var width = 700, | |
| height = 700; | |
| // var margin = {top: 10, right: 50, bottom: 50, left: 50}, | |
| // width = 700 - margin.left - margin.right, | |
| // height = 700 - margin.top - margin.bottom; | |
| // var svg4 = d3.select("#slide4Graph").append("svg") | |
| // .attr("width", width + margin.left + margin.right) | |
| // .attr("height", height + margin.top + margin.bottom) | |
| // .append("g") | |
| // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| // responsive svg | |
| var svg = d3.select("#slide4Graph").append("svg") | |
| .attr("class", "svg4") | |
| .attr("width", '50%') | |
| .attr("height", '50%') | |
| .attr('viewBox','180 195 '+Math.min(width+150,height+150)+' '+Math.min(width+150,height+150)) | |
| .attr('preserveAspectRatio','xMinYMin') | |
| .append("g") | |
| .attr("transform", "translate(" + Math.min(width,height) / 3 + "," + Math.min(width,height) / 3 + ")"); | |
| var x = d3.scale.ordinal() | |
| .rangeRoundBands([0, width]); | |
| var y = d3.scale.linear() | |
| .rangeRound([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .tickSize(24, 0) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| //.tickSize(0) | |
| .ticks(7) | |
| .tickSize(-width); | |
| // tooltip | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var dataset = [ | |
| {label:"ED Visits - Asthma", "Trucks and Buses":360, "Cars":190, "All": 110}, | |
| {label:"Hospital Admissions", "Trucks and Buses":100, "Cars":60, "All": 40}, | |
| ]; | |
| var dataset2 = [{label:"Premature Deaths", "Trucks and Buses":170, "Cars":100, "All": 60}]; | |
| var colorRange = ["#c92b2b", "#16c1d3", "#1ead5e"]; | |
| var color = d3.scale.ordinal().range(colorRange); | |
| // hospital chart | |
| color.domain(d3.keys(dataset[0]).filter(function(key) { return key !== "label"; })); | |
| dataset.forEach(function(d) { | |
| var y0 = 0; | |
| d.values = color.domain().map(function(col) { return {col: col, y0: y0, y1: y0 += +d[col]}; }); | |
| d.total = d.values[d.values.length - 1].y1; | |
| }); | |
| x.domain(dataset.map(function(d) { return d.label; })); | |
| y.domain([0, d3.max(dataset, function(d) { return d.total; })]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| //.attr("transform", "rotate(-90)") | |
| .attr("y", 9) | |
| .attr("dy", ".71em") | |
| .attr("dx", "1.0em") | |
| .style("text-anchor", "end") | |
| .text("Cases"); | |
| var bar = svg.selectAll(".label") | |
| .data(dataset) | |
| .enter().append("g") | |
| .attr("class", "g") | |
| .attr("transform", function(d) { return "translate(" + x(d.label) + ",0)"; }); | |
| svg.selectAll(".x.axis .tick text") | |
| .call(wrap, x.rangeBand()); | |
| var bar_enter = bar.selectAll("rect") | |
| .data(function(d) { return d.values; }) | |
| .enter(); | |
| bar_enter.append("rect") | |
| .attr("width", x.rangeBand()/2) | |
| .attr("x", function(d) { return x.rangeBand()/4; }) | |
| .attr("y", function(d) { return y(d.y1); }) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y1); }) | |
| .style("fill", function(d) { return color(d.col); }); | |
| bar_enter.append("text") | |
| .text(function(d) { return d3.format(".2s")(d.y1-d.y0)+" cases"; }) | |
| .attr("y", function(d) { return y(d.y1)+(y(d.y0) - y(d.y1))/2; }) | |
| .attr("x", x.rangeBand()/2) | |
| .style("text-anchor", "middle") | |
| .style("fill", "fff") | |
| .style("font-size", "24px"); | |
| bar.on("mouseover", function(d){ | |
| tooltip.style("opacity", 0.8) | |
| .style("left", (d3.event.pageX)+0 + "px") | |
| .style("top", (d3.event.pageY)-0 + "px") | |
| .style("display", "inline-block"); | |
| var elements = document.querySelectorAll(':hover'); | |
| var l = elements.length; | |
| var l = l-1; | |
| var element = elements[l].__data__; | |
| var percent = Math.round(((element.y1 - element.y0)/d.total)*100); | |
| var text1 = d.label + "<br>from " + element.col + " Traffic Outside NYC<br><span class='large'>" + percent + "%</span>"; | |
| var text2 = d.label + "<br>from " + element.col + "<br><span class='large'>" + percent + "%</span>"; | |
| tooltip.html(function(d){ | |
| return element.col == "All" ? text1 : text2; | |
| }) | |
| }) | |
| bar.on("mouseout", function(d){ | |
| tooltip.style("display", "none"); | |
| }) | |
| // chart title | |
| svg.append("text") | |
| .attr("x", width/2) | |
| .attr("y", height+100) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "30px") | |
| .style("text-decoration", "none") | |
| .text("Hospital and ED Visits") | |
| .style("fill", "#0a2538") | |
| .style("font-weight", 500); | |
| // death chart | |
| var svg4 = d3.select("#slide4Graph").append("svg") | |
| .attr("class", "svg4") | |
| .attr("width", '50%') | |
| .attr("height", '50%') | |
| .attr('viewBox','180 195 '+Math.min(width+150,height+150)+' '+Math.min(width+150,height+150)) | |
| .attr('preserveAspectRatio','xMinYMin') | |
| .append("g") | |
| .attr("transform", "translate(" + Math.min(width,height) / 3 + "," + Math.min(width,height) / 3 + ")"); | |
| color.domain(d3.keys(dataset2[0]).filter(function(key) { return key !== "label"; })); | |
| dataset2.forEach(function(d) { | |
| var y0 = 0; | |
| d.values = color.domain().map(function(col) { return {col: col, y0: y0, y1: y0 += +d[col]}; }); | |
| d.total = d.values[d.values.length - 1].y1; | |
| }); | |
| x.domain(dataset2.map(function(d) { return d.label; })); | |
| y.domain([0, d3.max(dataset2, function(d) { return d.total; })]); | |
| svg4.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg4.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| //.attr("transform", "rotate(-90)") | |
| .attr("y", 9) | |
| .attr("dy", ".71em") | |
| .attr("dx", "1.0em") | |
| .style("text-anchor", "end") | |
| .text("Cases"); | |
| var bar4 = svg4.selectAll(".label") | |
| .data(dataset2) | |
| .enter().append("g") | |
| .attr("class", "g") | |
| .attr("transform", function(d) { return "translate(" + x(d.label) + ",0)"; }); | |
| svg4.selectAll(".x.axis .tick text") | |
| .call(wrap, x.rangeBand()); | |
| var bar_enter4 = bar4.selectAll("rect") | |
| .data(function(d) { return d.values; }) | |
| .enter(); | |
| bar_enter4.append("rect") | |
| .attr("width", x.rangeBand()/4) | |
| .attr("x", function(d) { return x.rangeBand()/3+25; }) | |
| .attr("y", function(d) { return y(d.y1); }) | |
| .attr("height", function(d) { return y(d.y0) - y(d.y1); }) | |
| .style("fill", function(d) { return color(d.col); }); | |
| bar_enter4.append("text") | |
| .text(function(d) { return d3.format(".2s")(d.y1-d.y0)+" cases"; }) | |
| .attr("y", function(d) { return y(d.y1)+(y(d.y0) - y(d.y1))/2; }) | |
| .attr("x", x.rangeBand()/2) | |
| .style("text-anchor", "middle") | |
| .style("fill", "#fff") | |
| .style("font-size", "24px"); | |
| bar4.on("mouseover", function(d){ | |
| tooltip.style("opacity", 0.8) | |
| .style("left", (d3.event.pageX)+0 + "px") | |
| .style("top", (d3.event.pageY)-0 + "px") | |
| .style("display", "inline-block"); | |
| var elements = document.querySelectorAll(':hover'); | |
| var l = elements.length; | |
| var l = l-1; | |
| var element = elements[l].__data__; | |
| var percent = Math.round(((element.y1 - element.y0)/d.total)*100); | |
| var text1 = d.label + "<br>from " + element.col + " Traffic Outside NYC<br><span class='large'>" + percent + "%</span>"; | |
| var text2 = d.label + "<br>from " + element.col + "<br><span class='large'>" + percent + "%</span>"; | |
| tooltip.html(function(d){ | |
| return element.col == "All" ? text1 : text2; | |
| }) | |
| }) | |
| bar4.on("mouseout", function(d){ | |
| tooltip.style("display", "none"); | |
| }) | |
| // chart title | |
| svg4.append("text") | |
| .attr("x", width/2) | |
| .attr("y", height+100) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "30px") | |
| .style("text-decoration", "none") | |
| .text("Deaths") | |
| .style("fill", "#0a2538") | |
| .style("font-weight", 500); | |
| function wrap(text, width) { | |
| text.each(function() { | |
| var text = d3.select(this), | |
| words = text.text().split(/\s+/).reverse(), | |
| word, | |
| line = [], | |
| lineNumber = 0, | |
| lineHeight = 1.1, // ems | |
| y = text.attr("y"), | |
| dy = parseFloat(text.attr("dy")), | |
| tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); | |
| while (word = words.pop()) { | |
| line.push(word); | |
| tspan.text(line.join(" ")); | |
| if (tspan.node().getComputedTextLength() > width) { | |
| line.pop(); | |
| tspan.text(line.join(" ")); | |
| line = [word]; | |
| tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
| } | |
| } | |
| }); | |
| } | |
| var legendData4 = [ | |
| { "name": "Trucks and buses in NYC", "color": "#c92b2b" }, | |
| { "name": "Cars in NYC", "color": "#16c1d3" }, | |
| { "name": "All motor vehicles outside NYC", "color": "#1ead5e" } | |
| ]; | |
| // responsive legend container | |
| var legend4 = d3.select("#slide4Text").append("div") | |
| //.classed("svg-container-legend", true) | |
| .append("svg"); | |
| // .attr("preserveAspectRatio", "xMinYMin meet") | |
| // .attr("viewBox", "0 0 463.9 200.2") | |
| // .classed("svg-content-responsive", true); | |
| // draw legend boxes | |
| var legendBox = legend4.selectAll("rect") | |
| .data(legendData4) | |
| .enter() | |
| .append("g") | |
| .append("rect") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 0) | |
| .attr("class", "legendBox") | |
| .style("fill", function(d) { return d.color; }); | |
| //label legend boxes | |
| var legendLabel4 = legend4.selectAll("text") | |
| .data(legendData4) | |
| .enter() | |
| .append("text") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 20) | |
| .attr("dy", ".70em") | |
| .attr("class", "legendLabel") | |
| .text(function(d) { return d.name; }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // slide5 headline | |
| var slide5Div = d3.select(".section5"); | |
| var slide5Text = slide5Div.append("div") | |
| .attr("class", "row") | |
| .append("div") | |
| .attr("class", "col-xs-12 col-sm-12 col-md-12") | |
| .attr("id", "slide5Text") | |
| .style("margin-top", "0px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300); | |
| var slide5LeftDiv = slide5Div.append("div") | |
| .attr("class", "leftDiv col-xs-12 col-md-6 col-sm-6"); | |
| var slide5RightDiv = slide5Div.append("div") | |
| .attr("class", "rightDiv col-xs-12 col-md-6 col-sm-6"); | |
| var slide5MiddleDiv = slide5LeftDiv.append("div") | |
| .attr("class", "col-xs-6 col-sm-6 col-md-6") | |
| .attr("id", "slide5MiddleDiv") | |
| .style("margin-top", "0px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300); | |
| var slide5MiddleDiv2 = slide5LeftDiv.append("div") | |
| .attr("class", "col-xs-6 col-sm-6 col-md-6") | |
| .attr("id", "slide5MiddleDiv2") | |
| .style("margin-top", "0px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300); | |
| // slide5 div container | |
| var slide5Graph = slide5RightDiv.append("div") | |
| .attr("class", "col-xs-12 col-sm-12 col-md-12") | |
| .attr("id", "slide5Graph") | |
| .style("margin-top", "50px") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| var text_large = "How is your neighborhood affected?", | |
| text_small = "Hover on map to see your area."; | |
| var slide5title = slide5Text.append("h2").text(text_large), | |
| slide5text = slide5Text.append("h4").html(text_small); | |
| // map title | |
| var mapTitle = slide5Graph.append("div") | |
| .append("text") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("text-anchor", "middle") | |
| .attr("class", "mapTitle5") | |
| .text("Poverty in NYC"); | |
| // responsive map legend container | |
| var legend5_map = d3.select("#slide5Graph").append("div") | |
| .append("svg") | |
| .attr("class", "legend5"); | |
| // legend for brown color scheme | |
| var legendData5_map = [ | |
| { "name": "4 (Very High Poverty)", "color": "#d0743c" }, | |
| { "name": "3 (High Poverty)", "color": "#db8f65" }, | |
| { "name": "2 (Mid Poverty)", "color": "#ddac92" }, | |
| { "name": "1 (Low Poverty)", "color": "#dbd7c3" } | |
| ]; | |
| // draw map legend boxes | |
| var legendBox5_map = legend5_map.selectAll("rect") | |
| .data(legendData5_map) | |
| .enter() | |
| .append("g") | |
| .append("rect") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 0) | |
| .attr("class", "legendBox5") | |
| .style("fill", function(d) { return d.color; }); | |
| //label legend boxes | |
| var legendLabel5_map = legend5_map.selectAll("text") | |
| .data(legendData5_map) | |
| .enter() | |
| .append("text") | |
| .attr("y", function (d, i) { return (i+1) * 18; }) | |
| .attr("x", 20) | |
| .attr("dy", ".70em") | |
| .attr("class", "legendLabel5") | |
| .html(function(d) { return d.name; }); | |
| // poverty map | |
| var width = 960, | |
| height = 500; | |
| // var svg5 = d3.select("#slide5Graph").append("svg") | |
| // .attr("width", width) | |
| // .attr("height", height); | |
| var svg5 = d3.select("#slide5Graph").append("div") | |
| .classed("svg-container", true) //container class to make it responsive | |
| .append("svg") | |
| .attr("preserveAspectRatio", "xMinYMin meet") | |
| // .attr("width", '100%') | |
| // .attr("height", '100%') | |
| .attr('viewBox','100 0 660 600') | |
| .classed("svg-content-responsive", true); | |
| var color = d3.scale.threshold() | |
| .domain([1, 10, 50, 100, 1000]) | |
| .range(["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"]); | |
| var projection = d3.geo.mercator() | |
| .center([-73.94, 40.70]) | |
| .scale(50000) | |
| .translate([(width) / 2, (height)/2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // tooltip | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // responsive hovered element container | |
| // var hoverDiv = d3.select("#slide5MiddleDiv2").append("div") | |
| // .attr("class", "hoverDiv") | |
| // .classed("svg-container-legend", true) | |
| // .append("svg") | |
| // .attr("class", "slide5mapLegend") | |
| // .attr("preserveAspectRatio", "xMinYMin meet") | |
| // .attr("viewBox", "0 0 200 200") | |
| // .classed("svg-content-responsive", true); | |
| // set up for stacked bar | |
| // var middleSvg = slide5MiddleDiv.append("text").text("this is middle div"); | |
| var margin = {top: 0, right: 0, bottom: 0, left: 20}; | |
| var causes = ["asthma", "cardio", "death", "resp"]; | |
| var y = d3.scale.ordinal() | |
| .rangeRoundBands([height, 0], 0.1); | |
| var x = d3.scale.linear() | |
| .rangeRound([0, width/4]); | |
| //var barColor = d3.scale.category10(); | |
| // var barColorRange = ["#16c1d3", "#d8c51d", "#5e5ea5", "#c92b2b"]; | |
| // var barColor = d3.scale.ordinal().range(barColorRange); | |
| var barColor = d3.scale.ordinal() | |
| .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b"]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var w = 300, h = 800; | |
| // var svgStacked = d3.select("#slide5MiddleDiv").append("svg") | |
| // .attr("width", w + margin.left + margin.right) | |
| // .attr("height", h + margin.top + margin.bottom) | |
| // .append("g") | |
| // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var svgStacked = d3.select("#slide5MiddleDiv").append("div") | |
| .classed("svg-container", true) //container class to make it responsive | |
| .append("svg") | |
| .attr("preserveAspectRatio", "xMinYMin meet") | |
| .attr("viewBox", "-10 0 300 800") | |
| .classed("svg-content-responsive", true); | |
| // read data | |
| d3.json("poverty2.json", function(error, data) { | |
| if (error) throw error; | |
| //console.log(data); | |
| //unpack the topojson and return it as geojson so that the browser knows what to do | |
| var povertyFeatures = topojson.feature(data, data.objects.poverty).features; | |
| console.log(povertyFeatures); | |
| povertyFeatures.forEach(function(d) { | |
| d.poverty = +d.properties.Poverty_Ep; | |
| d.uhfCode = +d.properties.UHFCODE; | |
| d.uhf = d.properties.UHF_NEIGHB; | |
| d.asthma = Math.round(d.properties.EDAsthmaRa * 10) / 10; | |
| d.death = Math.round(d.properties.MortalityR * 10) / 10; | |
| d.cardio = Math.round(d.properties.HACardRate * 10) / 10; | |
| d.resp = Math.round(d.properties.HARespRate * 10) / 10; | |
| }); | |
| // color palette | |
| var veryHigh = "#d0743c", high = "#db8f65", mid = "#ddac92", low = "#dbd7c3"; | |
| var asthma = "#6b486b", cardio = "#b29a38", resp = "#d1c44e", death = "#a05d56"; | |
| // poverty choropleth map | |
| svg5.append("g") | |
| .attr("class", "poverty-container") | |
| .selectAll("path") | |
| .data(povertyFeatures) | |
| .enter() | |
| .append("path") | |
| .attr("class", "g-poverty") | |
| .attr("d", path) | |
| .style("stroke", "#1ead5e") | |
| .style("fill", function(d){ | |
| return d.poverty == 4 ? veryHigh : | |
| d.poverty == 3 ? high : | |
| d.poverty == 2 ? mid : | |
| d.poverty == 1 ? low : | |
| "#ccc"; | |
| }) | |
| .on("mouseover", function(d, i){ | |
| d3.select("#slide5MiddleDiv2") | |
| .html("<h3><span>" + d.uhf + "</span></h3><h4>Poverty Level: <span>" + d.poverty + "</span><hr/></h4><h5>" | |
| + "<span class='asthma'>█</span> Asthma ED Visits: <span>" + d.asthma + "</span><br />" | |
| + "<span class='death'>█</span> Deaths: <span>" + d.death + "</span><br />" | |
| + "<span class='cardio'>█</span> Cardiovascular Hospitalizations: <span>" + d.cardio + "</span><br />" | |
| + "<span class='resp'>█</span> Respiratory Hospitalizations: <span>" + d.resp + "</span><br/>(in rate per 100k)</h5>"); | |
| d3.select(this).transition() | |
| .ease("quad") | |
| .duration("200") | |
| .style("opacity", "0.6"); | |
| // get the active id to highligth the right bar | |
| //var id = povertyFeatures[i].uhf; | |
| var elements = document.querySelectorAll(':hover'); | |
| var l = elements.length; | |
| var l = l-1; | |
| var id = elements[l].__data__.uhf; | |
| //console.log(id, d.uhf); | |
| // select every bars to update opacities | |
| d3.selectAll(".slide5bars") | |
| .style("opacity", function(d) { | |
| return d.uhf == id ? 1 : 0.3; | |
| }) | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select("#slide5MiddleDiv2").html(""); | |
| d3.select(this).transition() | |
| .ease("quad") | |
| .duration("200") | |
| .style("opacity", "1"); | |
| d3.selectAll(".slide5bars").style("opacity", 1); | |
| }); | |
| // stacked bar chart adopted from https://bl.ocks.org/mbostock/3886208 | |
| // and http://plnkr.co/edit/Y33oYNB9de9xiq1pnl0Q?p=preview | |
| barColor.domain(d3.keys(povertyFeatures[0]).filter(function(key) { | |
| return key == "asthma" || key =="cardio" || key == "resp" || key == "death"; | |
| })); | |
| povertyFeatures.forEach(function(d) { | |
| var y0 = 0; | |
| d.impacts = barColor.domain().map(function(name) { | |
| return {name: name, y0: y0, y1: y0 += +d[name], uhf: d.uhf, poverty: d.poverty}; | |
| }); | |
| d.total = d.impacts[d.impacts.length - 1].y1; | |
| }); | |
| povertyFeatures.sort(function(a, b) { return b.poverty - a.poverty; }); | |
| y.domain(povertyFeatures.map(function(d) { return d.uhf; })); | |
| x.domain([0, d3.max(povertyFeatures, function(d) { return d.total; })]); | |
| svgStacked.append("g") | |
| .attr("class", "x axis") | |
| // .style("display", "none") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text"); | |
| svgStacked.append("g") | |
| //.attr("class", "y axis") | |
| .style("display", "none") | |
| .call(yAxis) | |
| .append("text"); | |
| // // poverty level background | |
| // var rect1 = svgStacked.append("rect") | |
| // .attr({ x: 0, y: 25, width: 240, height: 65 }) | |
| // .attr("class", "povertyRect") | |
| // .style("fill", low); | |
| // var rect2 = svgStacked.append("rect") | |
| // .attr({ x: 0, y: 90, width: 240, height: 210 }) | |
| // .attr("class", "povertyRect") | |
| // .style("fill", mid); | |
| // var rect3 = svgStacked.append("rect") | |
| // .attr({ x: 0, y: 300, width: 240, height: 110 }) | |
| // .attr("class", "povertyRect") | |
| // .style("fill", high); | |
| // var rect4 = svgStacked.append("rect") | |
| // .attr({ x: 0, y: 410, width: 240, height: 76 }) | |
| // .attr("class", "povertyRect") | |
| // .style("fill", veryHigh); | |
| // stacked bars | |
| var bars = svgStacked.selectAll(".uhf") | |
| .data(povertyFeatures) | |
| .enter().append("g") | |
| .attr("class", "g") | |
| .attr("transform", function(d) { return "translate(0," + y(d.uhf) + ")"; }); | |
| bars.selectAll("rect") | |
| .data(function(d) { return d.impacts; }) | |
| .enter().append("rect") | |
| .attr("class", "slide5bars") | |
| .attr("height", y.rangeBand()) | |
| .attr("x", function(d) { return x(d.y0); }) | |
| .attr("width", function(d) { return x(d.y1) - x(d.y0); }) | |
| //.style("fill", function(d) { return color(d.name); }); | |
| .style("fill", function(d) { | |
| return d.name == "asthma" ? asthma : | |
| d.name == "cardio" ? cardio : | |
| d.name == "resp" ? resp : death; | |
| }) | |
| .on("mouseover", function(d,i){ | |
| tooltip.style("opacity", 0.8) | |
| .style("left", (d3.event.pageX)+0 + "px") | |
| .style("top", (d3.event.pageY)-0 + "px") | |
| .style("display", "inline-block"); | |
| var val = d.y1-d.y0; | |
| tooltip.html(d.uhf + "<br/>Poverty Level: " + d.poverty); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.style("display", "none"); | |
| }); | |
| // poverty lines | |
| var line1 = svgStacked.append("line") | |
| .attr({ x1: 0, y1: 90, x2: 260, y2: 90 }) | |
| .attr("class", "povertyLines"); | |
| var line2 = svgStacked.append("line") | |
| .attr({ x1: 0, y1: 300, x2: 260, y2: 300 }) | |
| .attr("class", "povertyLines"); | |
| var line3 = svgStacked.append("line") | |
| .attr({ x1: 0, y1: 410, x2: 260, y2: 410 }) | |
| .attr("class", "povertyLines"); | |
| var line4 = svgStacked.append("line") | |
| .attr({ x1: 0, y1: 485, x2: 260, y2: 485 }) | |
| .attr("class", "povertyLines"); | |
| // poverty line texts | |
| var text1 = svgStacked.append("text") | |
| .attr({"dx": 260, "dy": 86 }) | |
| .text("Low Poverty") | |
| .attr("class", "povertyLineText"); | |
| //.style("text-anchor", "end"); | |
| var text2 = svgStacked.append("text") | |
| .attr({"dx": 260, "dy": 296 }) | |
| .text("Mid Poverty") | |
| .attr("class", "povertyLineText"); | |
| var text3 = svgStacked.append("text") | |
| .attr({"dx": 260, "dy": 406 }) | |
| .text("High Poverty") | |
| .attr("class", "povertyLineText"); | |
| var text4 = svgStacked.append("text") | |
| .attr({"dx": 260, "dy": 479 }) | |
| .text("Very High Poverty") | |
| .attr("class", "povertyLineText"); | |
| var chartTitleLine1 = svgStacked.append("text") | |
| .attr({"dx": 0, "dy": 540 }) | |
| .text("PM2.5-attributed health events from") | |
| .attr("class", "povertyChartTitle"); | |
| var chartTitleLine2 = svgStacked.append("text") | |
| .attr({"dx": 0, "dy": 560 }) | |
| .text("traffic (per 100k residents)") | |
| .attr("class", "povertyChartTitle"); | |
| }); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| // slide5 headline | |
| var slide5aDiv = d3.select(".section5a"), | |
| slide5aText = slide5aDiv.append("div") | |
| .attr("class", "col-xs-12 col-sm-9 col-sm-offset-2 col-md-9 col-md-offset-2") | |
| .attr("id", "slide5aText") | |
| .style("margin-top", "50px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300) | |
| .style("text-align", "center"); | |
| var text_large = "PM2.5 exposures and related health problems<br />from traffic are highest in<br />the poorest neighborhoods", | |
| text_small = "this is some text. <br/> \ | |
| <span>this is a span</span>"; | |
| var slide5atitle = slide5aText.append("h1").html(text_large); | |
| // add dropdown element | |
| var array = ["All Traffic sources", "Buses + Trucks"]; | |
| var dropDown = d3.select("#slide5aText").append("select") | |
| .attr("class", "selectpicker") | |
| .attr("data-style", "btn-primary") | |
| .attr("name", "Select an item"); | |
| var options = dropDown.selectAll("option") | |
| .data(array) | |
| .enter() | |
| .append("option"); | |
| var optionText = options.text(function (d) { return d; }) | |
| .attr("value", function (d) { return d; }); | |
| var slide5atext = slide5aText.append("h4") | |
| //.html(text_small); | |
| // slide5 div container | |
| var slide5aGraph = slide5aDiv.append("div") | |
| .attr("class", "col-xs-12 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3") | |
| .attr("id", "slide5aGraph") | |
| .style("margin-top", "50px") | |
| .style("font-family", "'Open Sans', sans-serif") | |
| .style("font-weight", 300); | |
| var width = 960, | |
| height = 500; | |
| var svgArea = slide5aText.append("div") | |
| .attr("class", "svgArea col-xs-12 col-sm-12 col-md-12") | |
| .style("margin-top", "0px") | |
| .style("color", "#0a2538") | |
| .style("font-weight", 300) | |
| .style("text-align", "center"); | |
| // responsive svg | |
| var svg5a = d3.select(".svgArea").append("svg") | |
| .attr("class", "responsive5aImg") | |
| //.style("margin-top", "-50px") | |
| .attr("width", '100%') | |
| .attr("height", '100%') | |
| .attr('viewBox','0 0 '+width+' '+height) | |
| .attr('preserveAspectRatio','xMinYMin') | |
| .append("g") | |
| // Show all traffic drawing | |
| function img01() { | |
| svg5a.append("svg:image") | |
| .attr("xlink:href", "5a-02.svg") | |
| .attr("class", "img1") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("x", 0) | |
| .attr("y", 0); | |
| slide5atext.html("PM2.5 levels from all traffic sources are <br />\ | |
| <span>1.5 times higher</span> in high poverty neighborhood<br />\ | |
| relative to low poverty neighborhoods"); | |
| } | |
| // show buses + trucks | |
| function img02() { | |
| svg5a.append("svg:image") | |
| .attr("xlink:href", "5a-03.svg") | |
| .attr("class", "img2") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("x", 0) | |
| .attr("y", 0); | |
| slide5atext.html("PM2.5 levels from buses and trucks are <br />\ | |
| <span>1.7 times higher</span> in high poverty neighborhood<br />\ | |
| relative to low poverty neighborhoods"); | |
| } | |
| dropDown.on("change", menuUpdate); | |
| function menuUpdate() { | |
| //get the data value and index from the event | |
| var selectedValue = d3.event.target.value; | |
| var selectedIndex = d3.event.target.selectedIndex; | |
| if (selectedValue == array[0]) { | |
| d3.selectAll(".img2").remove(); | |
| img01(); | |
| } else if (selectedValue == array[1]) { | |
| d3.selectAll(".img1").remove(); | |
| img02(); | |
| } | |
| } | |
| window.onload = img01(); | |
| })(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "Sources", | |
| "color": "#d8c51d", | |
| "percent": "", | |
| "children": [ | |
| { | |
| "name": "Traffic", | |
| "color": "#16c1d3", | |
| "percent": "17.5%", | |
| "children": [ | |
| { | |
| "name": "Trucks", | |
| "size": 1287.8589, | |
| "color": "#81c9cc", | |
| "percent": "70.9%" | |
| }, | |
| { | |
| "name": "Cars", | |
| "size": 480.1538, | |
| "color": "#79b5b5", | |
| "percent": "26.4%" | |
| }, | |
| { | |
| "name": "Buses", | |
| "size": 48.87407, | |
| "color": "#6bd6d6", | |
| "percent": "2.7%" | |
| } | |
| ] | |
| }, | |
| { | |
| "name": "Buildings", | |
| "color": "#1ead5e", | |
| "percent": "49.5%", | |
| "children": [ | |
| {"name": "Commercial Cooking", "size": 2105.119, "percent": "40.9%", "color": "#80c49b"}, | |
| {"name": "Construction Dust", "size": 480.4541, "percent": "9.3%", "color": "#aadb9e"}, | |
| {"name": "Distillate Oil", "size": 17.16, "percent": "0.3%", "color": "#80c49b"}, | |
| {"name": "Natural Gas", "size": 1176.93, "percent": "22.9%", "color": "#9ff4c1"}, | |
| {"name": "Residual Oil", "size": 297.5, "percent": "5.8%", "color": "#98ef86"}, | |
| {"name": "Wood", "size": 1069.649, "percent": "20.8%", "color": "#aeef84"} | |
| ] | |
| }, | |
| { | |
| "name": "Electric Generation", | |
| "color": "#c95b55", | |
| "percent": "7.4%", | |
| "children": [ | |
| {"name": "Electric Generation", "size": 773.8826, "percent": "100%", "color": "#d87d7d"} | |
| ] | |
| }, | |
| { | |
| "name": "Other", | |
| "color": "#5e5ea5", | |
| "percent": "0.4%", | |
| "children": [ | |
| {"name": "Other", "size": 41.85972, "percent": "100%", "color": "#8080c1"} | |
| ] | |
| }, | |
| { | |
| "name": "Road Dust", | |
| "color": "#dd7812", | |
| "percent": "6.3%", | |
| "children": [ | |
| {"name": "Road Dust", "size": 651.3404, "percent": "100%", "color": "#d6975f"} | |
| ] | |
| }, | |
| { | |
| "name": "Non-Road", | |
| "color": "#7f7975", | |
| "percent": "19.0%", | |
| "children": [ | |
| {"name": "Aviation", "size": 124.9522, "percent": "6.3%", "color": "#bab1ab"}, | |
| {"name": "Marine Vessels", "size": 298.7242, "percent": "15.2%", "color": "#a3948d"}, | |
| {"name": "Non Road Equipment", "size": 1547.863, "percent": "78.5%", "color": "#ada18e"} | |
| ] | |
| } | |
| ] | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=EB+Garamond'); | |
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600'); | |
| * { | |
| 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("https://raw.githubusercontent.com/Kaz-A/pm25_infographic/master/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 3s infinite; | |
| -webkit-animation: bounce 3s infinite; | |
| animation: bounce 3s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| transform: translateY(-25px); | |
| } | |
| 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; | |
| }*/ | |
| #slide2Graph, #slide3Graph { | |
| margin-top: 50px; | |
| } | |
| #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; | |
| } | |
| .footer div h5 { | |
| opacity: 0.5; | |
| } | |
| .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; | |
| } | |
| #slide2Graph, #slide3Graph { | |
| margin-top: 0; | |
| } | |
| .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; | |
| } | |
| #slide2Graph, #slide3Graph { | |
| margin-top: 0; | |
| } | |
| .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; | |
| } | |
| #slide2Graph, #slide3Graph { | |
| margin-top: 0; | |
| } | |
| .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; | |
| } | |
| #slide2Graph, #slide3Graph { | |
| margin-top: 0; | |
| } | |
| .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