air quality

<!DOCTYPE html>
<met charset="utf-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

.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> -->

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://cdn.leafletjs.com/leaflet-0.7/leaflet.js to a secure url

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://d3js.org/queue.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js

https://cdn.leafletjs.com/leaflet-0.7/leaflet.js

https://code.jquery.com/jquery-1.11.3.min.js

https://code.jquery.com/jquery-migrate-1.2.1.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js