In addition of mapping static marks, the plot function lets you quickly create statistical maps (including legends) with very few parameters (and many others as options). Let's see some examples.
By using type = "prop", you can design a map with proportionnal symbols. Find below a minimal example.
geoviz.plot({type = "prop", data = *a geoJSON*, var = *a field*})
+In addition of mapping static marks, the plot function lets you quickly create statistical maps (including legends) with very few parameters (and many others as options). Let's see some examples.
By using type = "prop", you can design a map with proportionnal symbols ("circle", "square", "halfcircle","spike"). Find below a minimal example.
geoviz.plot({type = "prop", data = *a geoJSON*, var = *a field*})
🌏 live demo prop
By using type = "choro", you can design a choropleth map. Find below a minimal example.
geoviz.plot({type = "choro", data = *a geoJSON*, var = *a field*})
🌏 live demo choropleth
By using type = "typo", you can design a qualitative typo map. Find below a minimal example.
geoviz.plot({type = "typo", data = *a geoJSON*, var = *a field*})
🌏 live demo typology
By using type = "propchoro", you can design a map with proportionnal symbols with graduated colors. Find below a minimal example.
geoviz.plot({type = "propchoro", data = *a geoJSON*, var1 = *a field*, var2 = *a field*})
diff --git a/docs/mark_square.js.html b/docs/mark_square.js.html
index aa75b7b..f76a853 100644
--- a/docs/mark_square.js.html
+++ b/docs/mark_square.js.html
@@ -253,16 +253,14 @@
)
.attr(
"x",
- (d) =>
- path.centroid(d.geometry)[0] + opts.dx - radius(d, opts.side) / 2
+ (d) => path.centroid(d.geometry)[0] + opts.dx - radius(d, opts.side)
)
.attr(
"y",
- (d) =>
- path.centroid(d.geometry)[1] + opts.dy - radius(d, opts.side) / 2
+ (d) => path.centroid(d.geometry)[1] + opts.dy - radius(d, opts.side)
)
- .attr("width", (d) => radius(d, opts.side))
- .attr("height", (d) => radius(d, opts.side))
+ .attr("width", (d) => radius(d, opts.side) * 2)
+ .attr("height", (d) => radius(d, opts.side) * 2)
.attr("visibility", (d) =>
isNaN(path.centroid(d.geometry)[0]) ? "hidden" : "visible"
);
diff --git a/docs/plot_plot_prop.js.html b/docs/plot_plot_prop.js.html
index ed9b701..4284b86 100644
--- a/docs/plot_plot_prop.js.html
+++ b/docs/plot_plot_prop.js.html
@@ -45,12 +45,13 @@
id: unique(),
missing: "white",
k: 50,
-
fixmax: null,
leg_type: "nested",
leg_pos: [10, 10],
};
+ opts.k = opts.symbol == "square" ? 100 : 50;
+
opts = { ...opts, ...options };
let ids = `#${opts.id}`;
@@ -65,8 +66,18 @@
// LAYER OPTS
- opts.r = opts.var;
- opts.height = opts.var;
+ if (opts.symbol == "square") {
+ opts.side = opts.var;
+ }
+ if (opts.symbol == "spike") {
+ opts.height = opts.var;
+ }
+ if (opts.symbol == "circle") {
+ opts.r = opts.var;
+ }
+ if (opts.symbol == "halfcircle") {
+ opts.r = opts.var;
+ }
let layeropts = {};
Object.keys(opts)
@@ -120,6 +131,11 @@
? svg.legend.circles_nested(legopts)
: svg.legend.circles(legopts);
break;
+ case "square":
+ opts.leg_type == "nested"
+ ? svg.legend.squares_nested(legopts)
+ : svg.legend.squares(legopts);
+ break;
case "spike":
svg.legend.spikes(legopts);
break;
diff --git a/docs/plot_plot_propchoro.js.html b/docs/plot_plot_propchoro.js.html
index 11610ed..af26be6 100644
--- a/docs/plot_plot_propchoro.js.html
+++ b/docs/plot_plot_propchoro.js.html
@@ -90,8 +90,18 @@
svg.path({ datum: opts.data, fill: "#CCC", fillOpacity: 0.2 });
}
- opts.r = opts.var1;
- opts.height = opts.var1;
+ if (opts.symbol == "square") {
+ opts.side = opts.var1;
+ }
+ if (opts.symbol == "spike") {
+ opts.height = opts.var1;
+ }
+ if (opts.symbol == "circle") {
+ opts.r = opts.var1;
+ }
+ if (opts.symbol == "halfcircle") {
+ opts.r = opts.var1;
+ }
// CLASSIFY
opts.missing_fill = opts.missing;
@@ -116,7 +126,6 @@
opts.fill = (d) => classif.colorize(d.properties[opts.var2]);
- // LAYER OPTS
let layeropts = {};
Object.keys(opts)
.filter((str) => str.slice(0, 3) != "leg")
@@ -128,6 +137,9 @@
case "circle":
svg.circle(layeropts);
break;
+ case "square":
+ svg.square(layeropts);
+ break;
case "spike":
svg.spike(layeropts);
break;
@@ -169,6 +181,11 @@
? svg.legend.circles_nested(legopts)
: svg.legend.circles(legopts);
break;
+ case "square":
+ opts.leg1_type == "nested"
+ ? svg.legend.squares_nested(legopts)
+ : svg.legend.squares(legopts);
+ break;
case "spike":
svg.legend.spikes(legopts);
break;
diff --git a/docs/plot_plot_proptypo.js.html b/docs/plot_plot_proptypo.js.html
index 50c5ac2..09a7e17 100644
--- a/docs/plot_plot_proptypo.js.html
+++ b/docs/plot_plot_proptypo.js.html
@@ -88,8 +88,18 @@
svg.path({ datum: opts.data, fill: "#CCC", fillOpacity: 0.2 });
}
- opts.r = opts.var1;
- opts.height = opts.var1;
+ if (opts.symbol == "square") {
+ opts.side = opts.var1;
+ }
+ if (opts.symbol == "spike") {
+ opts.height = opts.var1;
+ }
+ if (opts.symbol == "circle") {
+ opts.r = opts.var1;
+ }
+ if (opts.symbol == "halfcircle") {
+ opts.r = opts.var1;
+ }
// CLASSIFY
opts.missing_fill = opts.missing;
@@ -108,7 +118,6 @@
opts.missing = false;
}
- // LAYER OPTS
let layeropts = {};
Object.keys(opts)
.filter((str) => str.slice(0, 3) != "leg")
@@ -120,6 +129,9 @@
case "circle":
svg.circle(layeropts);
break;
+ case "square":
+ svg.square(layeropts);
+ break;
case "spike":
svg.spike(layeropts);
break;
@@ -159,6 +171,11 @@
? svg.legend.circles_nested(legopts)
: svg.legend.circles(legopts);
break;
+ case "square":
+ opts.leg1_type == "nested"
+ ? svg.legend.squares_nested(legopts)
+ : svg.legend.squares(legopts);
+ break;
case "spike":
svg.legend.spikes(legopts);
break;