d3-geo-scale-bar - npm Package Compare versions

Comparing version 0.5.5 to 0.6.0

build/d3-geo-scale-bar.js

@@ -1,2 +0,2 @@
-// https://github.com/HarryStevens/d3-geo-scale-bar Version 0.5.5. Copyright 2020 Harry Stevens.
+// https://github.com/HarryStevens/d3-geo-scale-bar Version 0.6.0. Copyright 2020 Harry Stevens.
 (function (global, factory) {
@@ -220,2 +220,6 @@ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 
+  function geoScaleBottom () {
+    return 1;
+  }
+
   function geoScaleBar () {
@@ -236,3 +240,4 @@ var extent = null,
         labelAnchor = "start",
-        zoomFactor = 1;
+        zoomFactor = 1,
+        orient = geoScaleBottom();
 
@@ -264,3 +269,3 @@ var unitPresets = {
         barWidth = barDistance / (geoDistance(start, projection.invert([x + 1, y])) * radius);
-      } // Otherwise, make it an exponent of 10 or 10 * 4 with a minimum width of 60px
+      } // Otherwise, make it an exponent of 10 with a minimum width of 40px 
       else {
@@ -305,4 +310,4 @@ var dist = .01,
       tick = tick.merge(tickEnter);
-      line = line.merge(tickEnter.append("line").attr("stroke", "currentColor").attr("y2", tickSize));
-      text = text.merge(tickEnter.append("text").attr("fill", "currentColor").attr("y", tickSize + 2).attr("font-size", 10).attr("text-anchor", "middle").attr("dy", "0.71em"));
+      line = line.merge(tickEnter.append("line").attr("stroke", "currentColor").attr("y2", tickSize * orient));
+      text = text.merge(tickEnter.append("text").attr("fill", "currentColor").attr("y", tickSize * orient + 2).attr("font-size", 10).attr("text-anchor", "middle").attr("dy", "".concat(orient === 1 ? 0.71 : -0.35, "em")));
       rect = rect.merge(tickEnter.append("rect").attr("fill", function (d, i) {
@@ -312,3 +317,3 @@ return i % 2 === 0 ? "currentColor" : "#fff";
         return i === e.length - 1 ? 0 : scale(values[i + 1] - d);
-      }).attr("height", tickSize));
+      }).attr("y", orient === 1 ? 0 : -tickSize).attr("height", tickSize));
 
@@ -328,8 +333,8 @@ if (context !== selection) {
       tickExit.remove();
-      path.attr("d", "M".concat(scale(0), ",").concat(tickSize, " L").concat(scale(0), ",0 L").concat(scale(max), ",0 L").concat(scale(max), ",").concat(tickSize));
+      path.attr("d", "M".concat(scale(0), ",").concat(tickSize * orient, " L").concat(scale(0), ",0 L").concat(scale(max), ",0 L").concat(scale(max), ",").concat(tickSize * orient));
       tick.attr("transform", function (d) {
         return "translate(".concat(scale(d), ")");
       }).attr("opacity", 1);
-      line.attr("y2", tickSize);
-      text.attr("y", tickSize + 2).text(tickFormat);
+      line.attr("y2", tickSize * orient);
+      text.attr("y", tickSize * orient + 2).text(tickFormat);
       rect.attr("fill", function (d, i) {
@@ -339,3 +344,3 @@ return i % 2 === 0 ? "currentColor" : "#fff";
         return i === e.length - 1 ? 0 : scale(values[i + 1] - d);
-      }).attr("height", tickSize); // The label
+      }).attr("y", orient === 1 ? 0 : -tickSize).attr("height", tickSize); // The label
 
@@ -345,3 +350,3 @@ if (label === null) {
       } else {
-        label.enter().append("text").attr("class", "label").attr("fill", "currentColor").attr("font-size", 12).attr("dy", "-0.32em").merge(label).attr("x", labelAnchor === "start" ? 0 : labelAnchor === "middle" ? scale(max / 2) : scale(max)).attr("text-anchor", labelAnchor).text(function (d) {
+        label.enter().append("text").attr("class", "label").attr("fill", "currentColor").attr("font-size", 12).attr("dy", "-0.32em").merge(label).attr("x", labelAnchor === "start" ? 0 : labelAnchor === "middle" ? scale(max / 2) : scale(max)).attr("y", orient === 1 ? 0 : "1.3em").attr("text-anchor", labelAnchor).text(function (d) {
           return d;
@@ -352,2 +357,6 @@ });
 
+    scaleBar.distance = function (_) {
+      return arguments.length ? (distance = +_, scaleBar) : distance;
+    };
+
     scaleBar.extent = function (_) {
@@ -357,24 +366,10 @@ return arguments.length ? (extent = _, scaleBar) : extent;
 
-    scaleBar.size = function (_) {
-      return arguments.length ? (extent = [[0, 0], _], scaleBar) : extent[1];
+    scaleBar.label = function (_) {
+      return arguments.length ? (labelText = _, scaleBar) : labelText;
     };
 
-    scaleBar.projection = function (_) {
-      return arguments.length ? (projection = _, scaleBar) : projection;
+    scaleBar.labelAnchor = function (_) {
+      return arguments.length ? (labelAnchor = _, scaleBar) : labelAnchor;
     };
 
-    scaleBar.units = function (_) {
-      if (arguments.length) {
-        units = _;
-
-        if (Object.keys(unitPresets).includes(_)) {
-          radius = unitPresets[_].radius;
-        }
-
-        return scaleBar;
-      } else {
-        return units;
-      }
-    };
-
     scaleBar.left = function (_) {
@@ -384,8 +379,8 @@ return arguments.length ? (left = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : left;
 
-    scaleBar.top = function (_) {
-      return arguments.length ? (top = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : top;
+    scaleBar.orient = function (_) {
+      return arguments.length ? (orient = _(), scaleBar) : orient === 1 ? "bottom" : "top";
     };
 
-    scaleBar.distance = function (_) {
-      return arguments.length ? (distance = +_, scaleBar) : distance;
+    scaleBar.projection = function (_) {
+      return arguments.length ? (projection = _, scaleBar) : projection;
     };
@@ -397,2 +392,10 @@
 
+    scaleBar.size = function (_) {
+      return arguments.length ? (extent = [[0, 0], _], scaleBar) : extent[1];
+    };
+
+    scaleBar.top = function (_) {
+      return arguments.length ? (top = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : top;
+    };
+
     scaleBar.tickValues = function (_) {
@@ -410,8 +413,14 @@ return arguments.length ? (tickValues = _, scaleBar) : tickValues;
 
-    scaleBar.label = function (_) {
-      return arguments.length ? (labelText = _, scaleBar) : labelText;
-    };
+    scaleBar.units = function (_) {
+      if (arguments.length) {
+        units = _;
 
-    scaleBar.labelAnchor = function (_) {
-      return arguments.length ? (labelAnchor = _, scaleBar) : labelAnchor;
+        if (Object.keys(unitPresets).includes(_)) {
+          radius = unitPresets[_].radius;
+        }
+
+        return scaleBar;
+      } else {
+        return units;
+      }
     };
@@ -426,3 +435,9 @@
 
+  function top () {
+    return -1;
+  }
+
   exports.geoScaleBar = geoScaleBar;
+  exports.geoScaleBottom = geoScaleBottom;
+  exports.geoScaleTop = top;
 
@@ -429,0 +444,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

build/d3-geo-scale-bar.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(){this.reset()}function e(t,n,e){var r=t.s=n+e,o=r-n,i=r-o;t.t=n-i+(e-o)}function r(t,n){t&&M.hasOwnProperty(t.type)&&M[t.type](t,n)}function o(t,n,e){var r,o=-1,i=t.length-e;for(n.lineStart();++o<i;)r=t[o],n.point(r[0],r[1],r[2]);n.lineEnd()}function i(t,n){var e=-1,r=t.length;for(n.polygonStart();++e<r;)o(t[e],n,1);n.polygonEnd()}function a(t,n){t&&v.hasOwnProperty(t.type)?v[t.type](t,n):r(t,n)}function c(){x.point=l,x.lineEnd=u}function u(){x.point=x.lineEnd=function(t){}}function l(t,n){t*=Math.PI/180,n*=Math.PI/180,p=t,g=Math.sin(n),y=Math.cos(n),x.point=s}function s(t,n){t*=Math.PI/180,n*=Math.PI/180;var e=Math.sin(n),r=Math.cos(n),o=Math.abs(t-p),i=Math.cos(o),a=Math.sin(o),c=r*a,u=y*e-g*r*i,l=g*e+y*r*i;k.add(Math.atan2(Math.sqrt(c*c+u*u),l)),p=t,g=e,y=r}function f(t){return k.reset(),a(t,x),+k}function h(t,n){return P[0]=t,P[1]=n,f(C)}function d(){function t(t){o=null===o?null:o||u.charAt(0).toUpperCase()+u.slice(1);var g=i[1][0]-i[0][0],y=i[1][1]-i[0][1],m=i[0][0]+g*a,v=i[0][1]+y*c,M=n.invert([m,v]),k=0,x=0;if(e)k=e,x=k/(h(M,n.invert([m+1,v]))*l);else for(var P=.01,C=0;x<60&&C<100&&(k=P,!((x=k/(h(M,n.invert([m+1,v]))*l))>=60));)k=4*P,x=k/(h(M,n.invert([m+1,v]))*l),P*=10,C++;var S=k/p,b=null===r?[]:r||[0,S/4,S/2,S],w=function(t){return t*x/(k/p)},E=t.selection?t.selection():t,L=E.selectAll(".label").data([o]),z=E.selectAll(".domain").data([null]),A=E.selectAll(".tick").data(b,w).order(),O=A.exit(),j=A.enter().append("g").attr("class","tick"),F=A.select("line"),I=A.select("text"),_=A.select("rect");E.attr("font-family","sans-serif").attr("transform","translate(".concat([m,v],")")),z=z.merge(z.enter().insert("path",".tick").attr("class","domain").attr("fill","none").attr("stroke","currentColor")),A=A.merge(j),F=F.merge(j.append("line").attr("stroke","currentColor").attr("y2",f)),I=I.merge(j.append("text").attr("fill","currentColor").attr("y",f+2).attr("font-size",10).attr("text-anchor","middle").attr("dy","0.71em")),_=_.merge(j.append("rect").attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("stroke","currentColor").attr("stroke-width",.5).attr("width",function(t,n,e){return n===e.length-1?0:w(b[n+1]-t)}).attr("height",f)),t!==E&&(A=A.transition(t),z=z.transition(t),_=_.transition(t),O=O.transition(t).attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(w(t),")")}),j.attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(w(t),")")})),O.remove(),z.attr("d","M".concat(w(0),",").concat(f," L").concat(w(0),",0 L").concat(w(S),",0 L").concat(w(S),",").concat(f)),A.attr("transform",function(t){return"translate(".concat(w(t),")")}).attr("opacity",1),F.attr("y2",f),I.attr("y",f+2).text(s),_.attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("width",function(t,n,e){return n===e.length-1?0:w(b[n+1]-t)}).attr("height",f),null===L?L.remove():L.enter().append("text").attr("class","label").attr("fill","currentColor").attr("font-size",12).attr("dy","-0.32em").merge(L).attr("x","start"===d?0:w("middle"===d?S/2:S)).attr("text-anchor",d).text(function(t){return t})}var n,e,r,o,i=null,a=0,c=0,u="kilometers",l=6371,s=function(t){return Math.round(t)},f=4,d="start",p=1,g={miles:{radius:3959},kilometers:{radius:6371}};return t.extent=function(n){return arguments.length?(i=n,t):i},t.size=function(n){return arguments.length?(i=[[0,0],n],t):i[1]},t.projection=function(e){return arguments.length?(n=e,t):n},t.units=function(n){return arguments.length?(u=n,Object.keys(g).includes(n)&&(l=g[n].radius),t):u},t.left=function(n){return arguments.length?(a=+n>1?1:+n<0?0:+n,t):a},t.top=function(n){return arguments.length?(c=+n>1?1:+n<0?0:+n,t):c},t.distance=function(n){return arguments.length?(e=+n,t):e},t.radius=function(n){return arguments.length?(l=+n,t):l},t.tickValues=function(n){return arguments.length?(r=n,t):r},t.tickFormat=function(n){return arguments.length?(s=n,t):s},t.tickSize=function(n){return arguments.length?(f=+n,t):f},t.label=function(n){return arguments.length?(o=n,t):o},t.labelAnchor=function(n){return arguments.length?(d=n,t):d},t.zoomFactor=function(n){return arguments.length?(p=+n,t):p},t}n.prototype={constructor:n,reset:function(){this.s=this.t=0},add:function(t){e(m,t,this.t),e(this,m.s,this.s),this.s?this.t+=m.t:this.s=m.t},valueOf:function(){return this.s}};var p,g,y,m=new n,v={Feature:function(t,n){r(t.geometry,n)},FeatureCollection:function(t,n){for(var e=t.features,o=-1,i=e.length;++o<i;)r(e[o].geometry,n)}},M={Sphere:function(t,n){n.sphere()},Point:function(t,n){t=t.coordinates,n.point(t[0],t[1],t[2])},MultiPoint:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)t=e[r],n.point(t[0],t[1],t[2])},LineString:function(t,n){o(t.coordinates,n,0)},MultiLineString:function(t,n){for(var e=t.coordinates,r=-1,i=e.length;++r<i;)o(e[r],n,0)},Polygon:function(t,n){i(t.coordinates,n)},MultiPolygon:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)i(e[r],n)},GeometryCollection:function(t,n){for(var e=t.geometries,o=-1,i=e.length;++o<i;)r(e[o],n)}},k=function(){return new n}(),x={sphere:function(t){},point:function(t){},lineStart:c,lineEnd:function(t){},polygonStart:function(t){},polygonEnd:function(t){}},P=[null,null],C={type:"LineString",coordinates:P};t.geoScaleBar=d,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(){this.reset()}function e(t,n,e){var r=t.s=n+e,o=r-n,i=r-o;t.t=n-i+(e-o)}function r(t,n){t&&x.hasOwnProperty(t.type)&&x[t.type](t,n)}function o(t,n,e){var r,o=-1,i=t.length-e;for(n.lineStart();++o<i;)r=t[o],n.point(r[0],r[1],r[2]);n.lineEnd()}function i(t,n){var e=-1,r=t.length;for(n.polygonStart();++e<r;)o(t[e],n,1);n.polygonEnd()}function a(t,n){t&&k.hasOwnProperty(t.type)?k[t.type](t,n):r(t,n)}function c(){P.point=l,P.lineEnd=u}function u(){P.point=P.lineEnd=function(t){}}function l(t,n){t*=Math.PI/180,n*=Math.PI/180,y=t,m=Math.sin(n),v=Math.cos(n),P.point=f}function f(t,n){t*=Math.PI/180,n*=Math.PI/180;var e=Math.sin(n),r=Math.cos(n),o=Math.abs(t-y),i=Math.cos(o),a=Math.sin(o),c=r*a,u=v*e-m*r*i,l=m*e+v*r*i;S.add(Math.atan2(Math.sqrt(c*c+u*u),l)),y=t,m=e,v=r}function s(t){return S.reset(),a(t,P),+S}function h(t,n){return C[0]=t,C[1]=n,s(b)}function d(){return 1}function p(){function t(t){o=null===o?null:o||u.charAt(0).toUpperCase()+u.slice(1);var d=i[1][0]-i[0][0],m=i[1][1]-i[0][1],v=i[0][0]+d*a,M=i[0][1]+m*c,k=n.invert([v,M]),x=0,S=0;if(e)x=e,S=x/(h(k,n.invert([v+1,M]))*l);else for(var P=.01,C=0;S<60&&C<100&&(x=P,!((S=x/(h(k,n.invert([v+1,M]))*l))>=60));)x=4*P,S=x/(h(k,n.invert([v+1,M]))*l),P*=10,C++;var b=x/g,w=null===r?[]:r||[0,b/4,b/2,b],E=function(t){return t*S/(x/g)},L=t.selection?t.selection():t,z=L.selectAll(".label").data([o]),A=L.selectAll(".domain").data([null]),O=L.selectAll(".tick").data(w,E).order(),j=O.exit(),F=O.enter().append("g").attr("class","tick"),I=O.select("line"),B=O.select("text"),_=O.select("rect");L.attr("font-family","sans-serif").attr("transform","translate(".concat([v,M],")")),A=A.merge(A.enter().insert("path",".tick").attr("class","domain").attr("fill","none").attr("stroke","currentColor")),O=O.merge(F),I=I.merge(F.append("line").attr("stroke","currentColor").attr("y2",s*y)),B=B.merge(F.append("text").attr("fill","currentColor").attr("y",s*y+2).attr("font-size",10).attr("text-anchor","middle").attr("dy","".concat(1===y?.71:-.35,"em"))),_=_.merge(F.append("rect").attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("stroke","currentColor").attr("stroke-width",.5).attr("width",function(t,n,e){return n===e.length-1?0:E(w[n+1]-t)}).attr("y",1===y?0:-s).attr("height",s)),t!==L&&(O=O.transition(t),A=A.transition(t),_=_.transition(t),j=j.transition(t).attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(E(t),")")}),F.attr("opacity",1e-6).attr("transform",function(t){return"translate(".concat(E(t),")")})),j.remove(),A.attr("d","M".concat(E(0),",").concat(s*y," L").concat(E(0),",0 L").concat(E(b),",0 L").concat(E(b),",").concat(s*y)),O.attr("transform",function(t){return"translate(".concat(E(t),")")}).attr("opacity",1),I.attr("y2",s*y),B.attr("y",s*y+2).text(f),_.attr("fill",function(t,n){return n%2==0?"currentColor":"#fff"}).attr("width",function(t,n,e){return n===e.length-1?0:E(w[n+1]-t)}).attr("y",1===y?0:-s).attr("height",s),null===z?z.remove():z.enter().append("text").attr("class","label").attr("fill","currentColor").attr("font-size",12).attr("dy","-0.32em").merge(z).attr("x","start"===p?0:E("middle"===p?b/2:b)).attr("y",1===y?0:"1.3em").attr("text-anchor",p).text(function(t){return t})}var n,e,r,o,i=null,a=0,c=0,u="kilometers",l=6371,f=function(t){return Math.round(t)},s=4,p="start",g=1,y=d(),m={miles:{radius:3959},kilometers:{radius:6371}};return t.distance=function(n){return arguments.length?(e=+n,t):e},t.extent=function(n){return arguments.length?(i=n,t):i},t.label=function(n){return arguments.length?(o=n,t):o},t.labelAnchor=function(n){return arguments.length?(p=n,t):p},t.left=function(n){return arguments.length?(a=+n>1?1:+n<0?0:+n,t):a},t.orient=function(n){return arguments.length?(y=n(),t):1===y?"bottom":"top"},t.projection=function(e){return arguments.length?(n=e,t):n},t.radius=function(n){return arguments.length?(l=+n,t):l},t.size=function(n){return arguments.length?(i=[[0,0],n],t):i[1]},t.top=function(n){return arguments.length?(c=+n>1?1:+n<0?0:+n,t):c},t.tickValues=function(n){return arguments.length?(r=n,t):r},t.tickFormat=function(n){return arguments.length?(f=n,t):f},t.tickSize=function(n){return arguments.length?(s=+n,t):s},t.units=function(n){return arguments.length?(u=n,Object.keys(m).includes(n)&&(l=m[n].radius),t):u},t.zoomFactor=function(n){return arguments.length?(g=+n,t):g},t}function g(){return-1}n.prototype={constructor:n,reset:function(){this.s=this.t=0},add:function(t){e(M,t,this.t),e(this,M.s,this.s),this.s?this.t+=M.t:this.s=M.t},valueOf:function(){return this.s}};var y,m,v,M=new n,k={Feature:function(t,n){r(t.geometry,n)},FeatureCollection:function(t,n){for(var e=t.features,o=-1,i=e.length;++o<i;)r(e[o].geometry,n)}},x={Sphere:function(t,n){n.sphere()},Point:function(t,n){t=t.coordinates,n.point(t[0],t[1],t[2])},MultiPoint:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)t=e[r],n.point(t[0],t[1],t[2])},LineString:function(t,n){o(t.coordinates,n,0)},MultiLineString:function(t,n){for(var e=t.coordinates,r=-1,i=e.length;++r<i;)o(e[r],n,0)},Polygon:function(t,n){i(t.coordinates,n)},MultiPolygon:function(t,n){for(var e=t.coordinates,r=-1,o=e.length;++r<o;)i(e[r],n)},GeometryCollection:function(t,n){for(var e=t.geometries,o=-1,i=e.length;++o<i;)r(e[o],n)}},S=function(){return new n}(),P={sphere:function(t){},point:function(t){},lineStart:c,lineEnd:function(t){},polygonStart:function(t){},polygonEnd:function(t){}},C=[null,null],b={type:"LineString",coordinates:C};t.geoScaleBar=p,t.geoScaleBottom=d,t.geoScaleTop=g,Object.defineProperty(t,"__esModule",{value:!0})});

index.js

@@ -1,1 +0,3 @@
-export { default as geoScaleBar } from "./src/geoScaleBar";
+export { default as geoScaleBar } from "./src/geoScaleBar";
+export { default as geoScaleBottom } from "./src/orient/bottom.js";
+export { default as geoScaleTop } from "./src/orient/top.js";

package.json

 {
   "name": "d3-geo-scale-bar",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Displays automatic scale bars for projected geospatial data.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ # d3-geo-scale-bar
 
-Scale bars help viewers understand the geographic extent of maps. Printed maps, even those produced over a century ago, seldom lack them, yet scale bars are commonly missing from modern maps published on the internet. d3-geo-scale-bar makes it easy to add scale bars to maps created with [d3-geo](https://github.com/d3/d3-geo).
+In cartography, scale bars help viewers understand the geographic extent of maps. Professional cartographers seldom omit them from published maps, yet scale bars are commonly missing from interactive maps published on the internet. d3-geo-scale-bar makes it easy to add scale bars to maps created with [d3-geo](https://github.com/d3/d3-geo).
 
@@ -15,3 +15,3 @@ [See it in action](https://bl.ocks.org/HarryStevens/8c8d3a489aa1372e14b8084f94b32464).
 ```html
-<script src="https://unpkg.com/d3-geo-scale-bar@0.5.5/build/d3-geo-scale-bar.min.js"></script>
+<script src="https://unpkg.com/d3-geo-scale-bar@0.6.0/build/d3-geo-scale-bar.min.js"></script>
 <script>
@@ -39,2 +39,11 @@
 
+* [Introduction](#introduction)
+* [Basic configuration](#basic-configuration)
+* [Positioning](#positioning)
+* [Sizing](#sizing)
+* [Styling](#styling)
+* [Zooming](#zooming)
+
+### Introduction
+
 A scale bar's [default design](https://bl.ocks.org/HarryStevens/8c8d3a489aa1372e14b8084f94b32464) references the classic checkered design:
@@ -79,4 +88,14 @@
 
-Render the scale bar to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of SVG containers (either SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition). Configure the scale bar with [*scaleBar*.projection](#scaleBar_projection) and [*scaleBar*.extent](#scaleBar_fitSize) before rendering.
+Render the scale bar to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of SVG containers (either SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition). Configure the scale bar with [*scaleBar*.projection](#scaleBar_projection) and [*scaleBar*.extent](#scaleBar_fitSize) before rendering. Generally, you will use this with <i>selection</i>.[call](https://github.com/d3/d3-selection#selection_call):
 
+```js
+const scaleBar = d3.geoScaleBar()
+    .projection(projection)
+    .size([width, height]);
+
+svg.append("g").call(scaleBar);
+```
+
+### Basic configuration
+
 <a name="scaleBar_projection" href="#scaleBar_projection">#</a> <i>scaleBar</i>.<b>projection</b>([<i>projection</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L95 "Source")
@@ -86,6 +105,2 @@
 
-<a name="scaleBar_distance" href="#scaleBar_distance">#</a> <i>scaleBar</i>.<b>distance</b>([<i>distance</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L114 "Source")
-
-If *distance* is specifed, sets the maxiumum distance of the scale bar in the scale bar's units. Defaults to the largest exponent of 10 that will fit on the map. If *distance* is not specified, returns the current maximum distance of the scale bar.
-
 <a name="scaleBar_extent" href="#scaleBar_extent">#</a> <i>scaleBar</i>.<b>extent</b>([<i>extent</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L91 "Source")
@@ -103,2 +118,4 @@
 
+### Positioning
+
 <a name="scaleBar_left" href="#scaleBar_left">#</a> <i>scaleBar</i>.<b>left</b>([<i>left</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L134 "Source")
@@ -112,6 +129,7 @@
 
-<a name="scaleBar_units" href="#scaleBar_units">#</a> <i>scaleBar</i>.<b>units</b>([<i>units</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L99 "Source")
+### Sizing
 
-If a *units* string is specifed, sets the units of the scale bar. Defaults to "kilometers". If you set *units* to "miles", the [*radius*]("#scaleBar_radius") will also update to 3,959, [the number of miles of Earth's radius](https://www.google.com/search?q=radius+of+earth+in+miles). You can override this if you are mapping planets other than Earth. If *units* is not specified, returns the current units string.
+<a name="scaleBar_distance" href="#scaleBar_distance">#</a> <i>scaleBar</i>.<b>distance</b>([<i>distance</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L114 "Source")
 
+If *distance* is specifed, sets the maxiumum distance of the scale bar in the scale bar's units. Defaults to the largest exponent of 10 that will fit on the map. If *distance* is not specified, returns the current maximum distance of the scale bar.
 
@@ -122,2 +140,8 @@ <a name="scaleBar_radius" href="#scaleBar_radius">#</a> <i>scaleBar</i>.<b>radius</b>([<i>radius</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L118 "Source")
 
+<a name="scaleBar_units" href="#scaleBar_units">#</a> <i>scaleBar</i>.<b>units</b>([<i>units</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L99 "Source")
+
+If a *units* string is specifed, sets the units of the scale bar. Defaults to "kilometers". If you set *units* to "miles", the [*radius*]("#scaleBar_radius") will also update to 3,959, [the number of miles of Earth's radius](https://www.google.com/search?q=radius+of+earth+in+miles). You can override this if you are mapping planets other than Earth. If *units* is not specified, returns the current units string.
+
+### Styling
+
 <a name="scaleBar_label" href="#scaleBar_label">#</a> <i>scaleBar</i>.<b>label</b>([<i>label</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L126 "Source")
@@ -131,2 +155,22 @@
 
+<a name="scaleBar_orient" href="#scaleBar_orient">#</a> <i>scaleBar</i>.<b>orient</b>([<i>orientation</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L126 "Source")
+
+If an [<i>orientation</i>](#geoScaleBottom) is specified, styles the bar according to the specified orientation and returns the scale bar. If an <i>orientation</i> is not specified, returns the current orientation as a string, either "top" or "bottom". Defaults to "bottom".
+
+<a name="geoScaleBottom" href="#geoScaleBottom">#</a> d3.<b>geoScaleBottom</b>() [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/orient/bottom.js "Source")
+
+When passed to <i>scaleBar</i>.[orient](#scaleBar_orient), orients the scale bar so that the label is on the top and the ticks are on bottom. This is the default orientation.
+
+```js
+scaleBar.orient(d3.geoScaleBottom);
+```
+
+<a name="geoScaleTop" href="#geoScaleTop">#</a> d3.<b>geoScaleTop</b>() [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/orient/top.js "Source")
+
+When passed to <i>scaleBar</i>.[orient](#scaleBar_orient), orients the scale bar so that the label is on the bottom and the ticks are on top.
+
+```js
+scaleBar.orient(d3.geoScaleTop);
+```
+
 <a name="scaleBar_tickFormat" href="#scaleBar_tickFormat">#</a> <i>scaleBar</i>.<b>tickFormat</b>([<i>formatter</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L122 "Source")
@@ -144,2 +188,4 @@
 
+### Zooming
+
 <a name="scaleBar_zoomFactor" href="#scaleBar_zoomFactor">#</a> <i>scaleBar</i>.<b>zoomFactor</b>([<i>k</i>]) [<>](https://github.com/HarryStevens/d3-geo-scale-bar/blob/master/src/geoScaleBar.js#L142 "Source")
@@ -146,0 +192,0 @@

src/geoScaleBar.js

 import { default as geoDistance } from "./geo/distance";
+import { default as geoScaleBottom } from "./orient/bottom.js"
 
@@ -16,3 +17,4 @@ export default function(){
       labelAnchor = "start",
-      zoomFactor = 1;
+      zoomFactor = 1,
+      orient = geoScaleBottom();
 
@@ -45,3 +47,3 @@ const unitPresets = {
     }
-    // Otherwise, make it an exponent of 10 or 10 * 4 with a minimum width of 60px
+    // Otherwise, make it an exponent of 10 with a minimum width of 40px 
     else {
@@ -87,10 +89,10 @@ let dist = .01, minWidth = 60, iters = 0, maxiters = 100;
         .attr("stroke", "currentColor")
-        .attr("y2", tickSize));
+        .attr("y2", tickSize * orient));
 
     text = text.merge(tickEnter.append("text")
         .attr("fill", "currentColor")
-        .attr("y", tickSize + 2)
+        .attr("y", tickSize * orient + 2)
         .attr("font-size", 10)
         .attr("text-anchor", "middle")
-        .attr("dy", "0.71em"));
+        .attr("dy", `${orient === 1 ? 0.71 : -0.35}em`));
     
@@ -102,2 +104,3 @@ rect = rect.merge(tickEnter.append("rect")
         .attr("width", (d, i, e) => i === e.length - 1 ? 0 : scale(values[i + 1] - d))
+        .attr("y", orient === 1 ? 0 : -tickSize)
         .attr("height", tickSize));
@@ -122,3 +125,3 @@
     path
-        .attr("d", `M${scale(0)},${tickSize} L${scale(0)},0 L${scale(max)},0 L${scale(max)},${tickSize}`);
+        .attr("d", `M${scale(0)},${tickSize * orient} L${scale(0)},0 L${scale(max)},0 L${scale(max)},${tickSize * orient}`);
     
@@ -130,6 +133,6 @@ tick
     line
-        .attr("y2", tickSize);
+        .attr("y2", tickSize * orient);
 
     text
-        .attr("y", tickSize + 2)
+        .attr("y", tickSize * orient + 2)
         .text(tickFormat);
@@ -140,2 +143,3 @@
         .attr("width", (d, i, e) => i === e.length - 1 ? 0 : scale(values[i + 1] - d))
+        .attr("y", orient === 1 ? 0 : -tickSize)
         .attr("height", tickSize);
@@ -155,2 +159,3 @@
           .attr("x", labelAnchor === "start" ? 0 : labelAnchor === "middle" ? scale(max / 2) : scale(max))
+          .attr("y", orient === 1 ? 0 : "1.3em")
           .attr("text-anchor", labelAnchor)
@@ -162,2 +167,6 @@ .text(d => d);
 
+  scaleBar.distance = function(_) {
+    return arguments.length ? (distance = +_, scaleBar) : distance;
+  }
+  
   scaleBar.extent = function(_) {
@@ -167,41 +176,34 @@ return arguments.length ? (extent = _, scaleBar) : extent;
   
-  scaleBar.size = function(_) {
-    return arguments.length ? (extent = [[0, 0], _], scaleBar) : extent[1];
+  scaleBar.label = function(_) {
+    return arguments.length ? (labelText = _, scaleBar) : labelText;
   }
-
-  scaleBar.projection = function(_) {
-    return arguments.length ? (projection = _, scaleBar) : projection;
+  
+  scaleBar.labelAnchor = function(_) {
+    return arguments.length ? (labelAnchor = _, scaleBar) : labelAnchor;
   }
-
-  scaleBar.units = function(_){
-    if (arguments.length) {
-      units = _;
-      if (Object.keys(unitPresets).includes(_)) {
-        radius = unitPresets[_].radius;
-      }
-
-      return scaleBar; 
-    }
-
-    else {
-      return units;
-    }
-  }
-
+  
   scaleBar.left = function(_) {
     return arguments.length ? (left = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : left;
   }
-
-  scaleBar.top = function(_) {
-    return arguments.length ? (top = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : top;
+  
+  scaleBar.orient = function(_) {
+    return arguments.length ? (orient = _(), scaleBar) : (orient === 1 ? "bottom" : "top");
   }
   
-  scaleBar.distance = function(_) {
-    return arguments.length ? (distance = +_, scaleBar) : distance;
+  scaleBar.projection = function(_) {
+    return arguments.length ? (projection = _, scaleBar) : projection;
   }
-
+  
   scaleBar.radius = function(_) {
     return arguments.length ? (radius = +_, scaleBar) : radius;
   }
+  
+  scaleBar.size = function(_) {
+    return arguments.length ? (extent = [[0, 0], _], scaleBar) : extent[1];
+  }
 
+  scaleBar.top = function(_) {
+    return arguments.length ? (top = +_ > 1 ? 1 : +_ < 0 ? 0 : +_, scaleBar) : top;
+  }
+
   scaleBar.tickValues = function(_) {
@@ -218,10 +220,17 @@ return arguments.length ? (tickValues = _, scaleBar) : tickValues;
   }
+  
+  scaleBar.units = function(_){
+    if (arguments.length) {
+      units = _;
+      if (Object.keys(unitPresets).includes(_)) {
+        radius = unitPresets[_].radius;
+      }
 
-  scaleBar.label = function(_) {
-    return arguments.length ? (labelText = _, scaleBar) : labelText;
+      return scaleBar; 
+    }
+
+    else {
+      return units;
+    }
   }
-  
-  scaleBar.labelAnchor = function(_) {
-    return arguments.length ? (labelAnchor = _, scaleBar) : labelAnchor;
-  }
 
@@ -228,0 +237,0 @@ scaleBar.zoomFactor = function(_) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54566

increased by6.29%

Number of package files

17

increased by13.33%

Lines of code

739

increased by3.07%

Number of lines in readme file

199

increased by30.07%

No dependency changes