Drawing a background map is the first step of any geospatial analysis. Once this background is available, you can color each region to get a choropleth map, add points or bubble to get a bubble map, reshape the region to get a cartogram, or show connection with a connection map.
<!-- Include the CanvasXpress library in your HTML file --> <link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/> <script src="https://www.canvasxpress.org/canvasXpress.min.js"></script> <!-- Create a canvas element for the chart with the desired dimensions --> <div> <canvas id="canvasId" width="600" height="600"</canvas> </div> <!-- Create a script to initialize the chart --> <script> <!-- Create the data for the graph --> var data = { "y" : { "data" : [ [2,56], [3,124], [5,35], [3,46], [35,234], [37,76], [2,23], [50,45], [42,78], [3,90], [78,43], [6,57], [7,123], [13,23], [24,59], [38,87], [65,25], [87,95], [34,73], [1,23], [23,56], [67,56], [46,29], [25,50], [98,53], [24,28], [33,16], [55,23], [65,4], [12,28], [73,65], [24,19] ], "smps" : ["Prop1","Prop2"], "vars" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32] } } <-- Create the configuration for the graph --> var config = { "colorBy":"Prop1", "decorations":{ "marker":[ { "color":"red", "coords":[ 10.3932, -75.4832 ], "label":"Cartagena", "shape":"teardrop", "size":4 }, { "color":"blue", "coords":[ 12.5769, -81.7051 ], "label":"San Andres", "shape":"teardrop", "size":6 } ] }, "graphType":"Map", "legendPosition":"bottomRight", "mapId":"colombia", "mapPropertyId":"ID_1", "topoJSON":"https://www.canvasxpress.org/data/colombia.geo.json" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); </script>
library(canvasXpress) y=read.table("https://www.canvasxpress.org/data/cX-colombia-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, colorBy="Prop1", decorations=list(marker=list(list(color="red", coords=list(10.3932, -75.4832), label="Cartagena", shape="teardrop", size=4), list(color="blue", coords=list(12.5769, -81.7051), label="San Andres", shape="teardrop", size=6))), graphType="Map", legendPosition="bottomRight", mapId="colombia", mapPropertyId="ID_1", topoJSON="https://www.canvasxpress.org/data/colombia.geo.json" )