Skip to content

Instantly share code, notes, and snippets.

@LaurentGoderre

LaurentGoderre/lmi.patch

Created March 8, 2017 18:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LaurentGoderre/366ec3c90c27e54933cad1aad8a05cb2 to your computer and use it in GitHub Desktop.
Save LaurentGoderre/366ec3c90c27e54933cad1aad8a05cb2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lmi.patch
diff --git a/71-607-x2017001-eng.htm b/71-607-x2017001-eng.htm
index e7fbe82..6f9799a 100644
--- a/71-607-x2017001-eng.htm
+++ b/71-607-x2017001-eng.htm
@@ -33,7 +33,7 @@
<!--#include virtual="/wet-boew4b/ssi/css.htm"-->
-<link rel="stylesheet" type="text/css" href="css/lmi.min.css">
+<link rel="stylesheet" type="text/css" href="SOURCE/lmi.css">
<!-- CustomScriptsCSSEnd -->
<script src="https://cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>
@@ -103,28 +103,29 @@ http://www.statcan.gc.ca/cgi-bin/change.cgi
<br />
- <div id="canada-map"></div>
+ <div id="lmi-maps">
+ <div id="canada-map"></div>
+ <div id="mini-map" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px; margin-bottom: 0px;"></div>
+ <div class="mapinfo">
- <div id="mini-map" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px; margin-bottom: 0px;"></div>
+ <div class="legend">
+ <p style="padding-bottom:0; margin-bottom: 0; color: rgb(0,27,255); font-weight: bold">Map legend</p>
- <div class="mapinfo">
+ <div class="maplegend">
+ <div class="maplegend-row">
+ <div class="rect_increase"></div><div class="def">Increase</div>
+ </div>
+ <div class="maplegend-row">
+ <div class="rect_decrease"></div><div class="def">Decrease</div>
+ </div>
+ <div class="maplegend-row">
+ <div class="rect_nochange"></div><div class="def">No change</div>
+ </div>
+ </div>
- <div class="legend">
- <p style="padding-bottom:0; margin-bottom: 0; color: rgb(0,27,255); font-weight: bold">Map legend</p>
-
- <div class="maplegend">
- <div class="maplegend-row">
- <div class="rect_increase"></div><div class="def">Increase</div>
- </div>
- <div class="maplegend-row">
- <div class="rect_decrease"></div><div class="def">Decrease</div>
- </div>
- <div class="maplegend-row">
- <div class="rect_nochange"></div><div class="def">No change</div>
- </div>
</div>
-
</div>
+ <div id="tooltip"></div>
</div>
<div id="tableBtnContainer">
@@ -294,7 +295,7 @@ http://www.statcan.gc.ca/cgi-bin/change.cgi
</div>
-<div id="tooltip"></div>
+
</section>
diff --git a/SOURCE/lmi.css b/SOURCE/lmi.css
index 58ade84..3e58ed8 100644
--- a/SOURCE/lmi.css
+++ b/SOURCE/lmi.css
@@ -84,23 +84,23 @@ td.region {
.province { fill: rgb(208, 225, 188); }
- .cma {
- fill: yellow;
+ .cma {
+ fill: yellow;
stroke: black;
stroke-linejoin: round;
}
- .cma_increase {
- fill: rgb(10,113,206);
+ .cma_increase {
+ fill: rgb(10,113,206);
stroke: black;
stroke-linejoin: round;
}
- .cma_decrease {
- fill: rgb(153,204,250);
+ .cma_decrease {
+ fill: rgb(153,204,250);
stroke: black;
stroke-linejoin: round;
}
- .cma_nochange {
- fill: rgb(250,250,64);
+ .cma_nochange {
+ fill: rgb(250,250,64);
stroke: black;
stroke-linejoin: round;
}
@@ -136,8 +136,9 @@ div.mapinfo {
font-family: Arial,sans-serif!important;
font-size: 14px;
font-weight: 300;
- margin-left: 330px;
line-height: 1.2;
+ top: 0;
+ right: 0;
}
@@ -146,16 +147,14 @@ div.mapinfo {
font-size: 10pt;
}
-
-#canada-map {
- position: absolute;
- z-index: 100;
- top: -20px;
+#lmi-maps {
+ margin-top: -20px;
+ position: relative;
}
+
#mini-map {
- left: 420px;
- top: 420px;
+ right: 0;
position: absolute;
z-index: 100;
border: 1px solid black;
@@ -171,6 +170,13 @@ div.mapinfo {
margin: auto;
}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+ #canada-map svg, #lineChart {
+ width: 100%;
+ height: 460px;
+ }
+}
+
#table02 {
border-collapse: collapse;
margin: auto;
@@ -235,7 +241,7 @@ div.mapinfo {
font-size: 14px;
font-weight: 300;
line-height: 1.2;
- height: 520px;
+ height: 520px;
overflow-y: scroll;
}
@@ -300,7 +306,6 @@ tr.highlight {
#tableBtnContainer {
- margin-top: 360px;
padding-left: 15px;
}
@@ -338,17 +343,17 @@ tr.highlight {
-#tooltip {
- position: absolute;
+#tooltip {
+ position: absolute;
text-align: center;
- padding: 20px;
+ padding: 20px;
margin: 10px;
- font: 14px sans-serif;
- background: lightsteelblue;
- border: 1px;
- border-radius: 2px;
- pointer-events: none;
- z-index: 1000;
+ font: 14px sans-serif;
+ background: lightsteelblue;
+ border: 1px;
+ border-radius: 2px;
+ pointer-events: none;
+ z-index: 1000;
}
#tooltip h4 {
@@ -390,7 +395,7 @@ div.panel-body {
.glyphicon-copy::before {
- content: "\e205";
+ content: "\e205";
}
@@ -519,4 +524,3 @@ fieldset {
display: none;
}
}
-
diff --git a/SOURCE/lmi.js b/SOURCE/lmi.js
index 98264c2..c2c02f9 100644
--- a/SOURCE/lmi.js
+++ b/SOURCE/lmi.js
@@ -450,10 +450,11 @@ function mouseMove(d){
var myToolTip = tooltipHtml(d);
if (myToolTip != "") {
+ var mouse = d3.mouse(document.getElementById("lmi-maps"));
d3.select("#tooltip").transition().duration(200).style("opacity", .9);
d3.select("#tooltip").html(myToolTip)
- .style("left", d3.event.layerX + "px")
- .style("top", d3.event.layerY + "px");
+ .style("left", mouse[0] + "px")
+ .style("top", mouse[1] + "px");
}
}
@@ -464,25 +465,18 @@ function mouseOut(d){
function mouseMoveCMA(d){
d3.select("#tooltip").transition().duration(200).style("opacity", .9);
+ var mouse = d3.mouse(document.getElementById("lmi-maps"));
d3.select("#tooltip").html(tooltipHtmlCMA(d))
- .style("left", d3.event.layerX + "px")
- .style("top", d3.event.layerY + "px");
+ .style("left", mouse[0] + "px")
+ .style("top", mouse[1] + "px");
}
function mouseMoveCMA_MINI(d){
-
- var miniX = d3.event.layerX;
- var miniY = d3.event.layerY;
-
- if (!isIE) {
- miniX = miniX + 420;
- miniY = miniY + 420;
- }
-
+ var mouse = d3.mouse(document.getElementById("lmi-maps"));
d3.select("#tooltip").transition().duration(200).style("opacity", .9);
d3.select("#tooltip").html(tooltipHtmlCMA(d))
- .style("left", miniX + "px")
- .style("top", miniY + "px");
+ .style("left", mouse[0] + "px")
+ .style("top", mouse[1] + "px");
}
function provinceClicked(d) {
@@ -895,14 +889,15 @@ function pasteTable() {
s = lmi_data.estimate[estimate].label_en + "\r\n\r\n";
//Column headings (REGION, VALUE, MONTHLY_CHANGE, YEAR-OVER-YEAR)
- s = s + "Region\t" + lmi_data.refpers[lmi_data.refpers.length-1].refper_en + " (" + lmi_data.estimate[estimate].value_uom_en + ")\tMonth-to-month change" + " (" + lmi_data.estimate[estimate].change_uom_en + ")\tYear-over-year change" + " (" + lmi_data.estimate[estimate].change_uom_en + ")\r\n";
-
+ s = s + "Region\t"
+ + lmi_data.refpers[lmi_data.refpers.length-1].refper_en + " (" + lmi_data.estimate[estimate].value_uom_en + ")\tMonth-to-month change" + " (" + lmi_data.estimate[estimate].change_uom_en + ")\tYear-over-year change" + " (" + lmi_data.estimate[estimate].change_uom_en + ")\r\n";
}
else {
s = lmi_data.estimate[estimate].label_fr + "\r\n\r\n";
//Column headings (REGION, VALUE, MONTHLY_CHANGE, YEAR-OVER-YEAR)
- s = s + "Région\t" + lmi_data.refpers[lmi_data.refpers.length-1].refper_fr + " (" + lmi_data.estimate[estimate].value_uom_fr + ")\tVariation mensuelle" + " (" + lmi_data.estimate[estimate].change_uom_fr + ")\tVariation annuelle" + " (" + lmi_data.estimate[estimate].change_uom_fr + ")\r\n";
+ s = s + "Région\t"
+ + lmi_data.refpers[lmi_data.refpers.length-1].refper_fr + " (" + lmi_data.estimate[estimate].value_uom_fr + ")\tVariation mensuelle" + " (" + lmi_data.estimate[estimate].change_uom_fr + ")\tVariation annuelle" + " (" + lmi_data.estimate[estimate].change_uom_fr + ")\r\n";
}
@@ -1144,8 +1139,7 @@ var line = d3.svg.line()
svg = d3.select("#lineChart")
- .attr("width", width + margin.left + margin.right )
- .attr("height", height + margin.top + margin.bottom + 20)
+ .attr("viewBox", [0,0,(width + margin.left + margin.right), (height + margin.top + margin.bottom + 20)].join(" "))
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
@@ -1458,8 +1452,7 @@ var w = 550;
var h = 450;
var svg = d3.select("#canada-map").append("svg")
.attr("id", "lmi-map")
- .attr("width", w)
- .attr("height", h + 10);
+ .attr("viewBox", [0,0,w,(h +10)].join(" ") );
var projection = d3.geo.azimuthalEqualArea()
.rotate([100, -45])
@@ -1506,4 +1499,4 @@ var path4 = d3.geo.path()
queue()
.defer(d3.json, "canada.json")
.defer(d3.json, "cma.json")
-.await(myFunction);
+.await(myFunction);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment