D3 Examples - air quality

xxxxxxxxxx
 
<!DOCTYPE html>
<met charset="utf-8">
​
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
​
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->
​
​
​
​
<link rel="stylesheet" href="main.css">
<style>
  /*  body {
        margin-left: 112px;
        margin-right: 112px;
    }*/
    #ocean {
        fill: steelblue;
        cursor: pointer;
    }
​
    .background {
        fill: none;
        pointer-events: all;
    }
    
    #map {
        width: 760px;
        height: 500px;
        background: #fff;
        margin-top: 100px;
    }
    
    #provinces {
        fill: #e3e3e3;
        cursor: pointer;
    }
    
​
    #prov-borders {
        stroke: #fff;
        stroke-linejoin: round;
    }
    
    
    .aboriginal {
        fill: #006837;
    }
    
    .bubble {
        fill: steelblue;
        fill-opacity: .5;
        stroke: #fff;
        stroke-width: .01px;
    }
    
    .bubble :hover {
    stroke: #000;
    }
    
    .legend_Pop circle {
        fill: none;
        stroke: #ccc;
    }
    
    .legend_Pop text {
        fill: #777;
        font: 10px sans-serif;
        text-anchor: middle;
    }
    
    #byline {
        padding-left: 20px;
        margin-top: -20px;
        font-size: 0.8em;
    }
    
    #intro {
        padding-left: 20px;
        font-size: 20px;
    }
​
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
​
​
    .line {
        fill: none;
        stroke: #FF9900;
        stroke-width: 3px;
    }
​
    .line1 {
        fill: none;
        stroke: #ddd;
        stroke-width: 1.5px;
    }
​
    #chart_container {
        position: absolute;
        left:500px;
        top:180px;
        /*background-color: rgba(255,255,255,.7);*/
        /*padding-bottom: 100px;*/
    }
​
    #chart{
        /*padding-bottom: 100px;*/
    }
​
​
​
    #distid {
    padding-left:600px;
    margin-bottom: -75px;
    }
.btn {
    border-radius: 0px !important;
    transition: linear, ease-in 0.3s !important;
    outline-color: blue;
}
​
.btn:focus {
    /*color: white !important;*/
    color: black !important;
}
​
.btn-default {
    color: black !important;
    /*background: transparent !important;*/
    border: black 0px solid !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: black !important;*/
    /*color: white !important;*/
}
​
.btn-default:active {
    background: orange !important;
}
​
.btn-default a {
    color: black !important;
}
​
.btn-default a:focus {
    color: red !important;
}
.controller-button{
    padding: 10px;
    margin: 10px;
}
.big{
    font-size: 24px;
}
</style>
​
<body>
​
<script src="//d3js.org/d3.v4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7/leaflet.min.js"></script>
​
<script type="text/javascript"></script>
<!-- Content -->
<div class="container-fluid info">          
    <div class = "date col-xs-8 col-md-8">
        <h1 class = "current-date"></h1>
        <h1 class = "pollutant-name"></h1>
        <div class = "container-fluid button"></div>
        <div class = "legendSize"></div>
    </div>
    <div class = "weather col-xs-4 col-md-4">
        <h2 class = "current-cond"></h2>
        <p class = "last-date"></p>
        <span class = "current-temp"></span>
        <p class = "wind-info"></p>
    </div>
    
</div>
<!-- <h1>BC Schools Class Size</h1> -->
<div class="container">
    <div class="row meta">
      <!-- <div class="col-md-4"> -->
        <!-- <h3>BC Current Air Quality Data Map</h3> -->
    <!-- </div> -->
    <div class="row">
      <div class="col-md-12">
        <div class="btn-group char-select" role="group" aria-label="..."></div>
      </div>
    </div>
</div>
<p></p>
<!-- <h2 id="distid"> </h2> -->
<p class="map" id="map">
​
<div id="chart_container">
    <div id="chart"></div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
​
​
​
<script src="graph.js"></script>
<!-- <script>
​
</script> -->
​
​
    