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 = false <-- Create the configuration for the graph --> var config = { "colorBy":"name", "decorations":{ "connections":[ { "color":"red", "source":[ 40.7, "-74" ], "target":[ 37.7, "-122" ], "type":"spline" }, { "color":"red", "source":[ 40.7, "-74" ], "target":[ 25.7, -80.1 ], "type":"spline" }, { "color":"red", "source":[ 37.7, "-122" ], "target":[ 25.7, -80.1 ], "type":"splineDashed" } ], "marker":[ { "color":"blue", "coords":[ 40.7, "-74" ], "label":"New York", "shape":"teardrop", "size":5 }, { "color":"blue", "coords":[ 37.7, "-122" ], "label":"San Francisco", "shape":"teardrop", "size":5 }, { "color":"blue", "coords":[ 25.7, -80.1 ], "label":"Miami", "shape":"teardrop", "size":5 }, { "color":"green", "coords":[ 41.8, -87.6 ], "label":"Chicago", "shape":"circle", "size":4 }, { "color":"green", "coords":[ 36.1, -115.1 ], "label":"Las Vegas", "shape":"circle", "size":3 }, { "color":"black", "coords":[ 42.3, "-71" ], "label":"Boston", "shape":"star", "size":6 } ] }, "graphType":"Map", "mapConfig":{ "center":[ "-90", "30" ] }, "mapGraticuleShow":"true", "mapGraticuleType":"solid", "mapId":"worldCountries", "mapProjection":"orthographic", "showLegend":"false", "title":"Ortographic Projection", "topoJSON":"https://www.canvasxpress.org/data/worldLow.json" } <!-- Call the CanvasXpress function to create the graph --> var cX = new CanvasXpress("canvasId", data, config); </script>
library(canvasXpress) canvasXpress( data=FALSE, colorBy="name", decorations=list(connections=list(list(color="red", source=list(40.7, -74), target=list(37.7, -122), type="spline"), list(color="red", source=list(40.7, -74), target=list(25.7, -80.1), type="spline"), list(color="red", source=list(37.7, -122), target=list(25.7, -80.1), type="splineDashed")), marker=list(list(color="blue", coords=list(40.7, -74), label="New York", shape="teardrop", size=5), list(color="blue", coords=list(37.7, -122), label="San Francisco", shape="teardrop", size=5), list(color="blue", coords=list(25.7, -80.1), label="Miami", shape="teardrop", size=5), list(color="green", coords=list(41.8, -87.6), label="Chicago", shape="circle", size=4), list(color="green", coords=list(36.1, -115.1), label="Las Vegas", shape="circle", size=3), list(color="black", coords=list(42.3, -71), label="Boston", shape="star", size=6))), graphType="Map", mapConfig=list(center=list(-90, 30)), mapGraticuleShow=TRUE, mapGraticuleType="solid", mapId="worldCountries", mapProjection="orthographic", showLegend=FALSE, title="Ortographic Projection", topoJSON="https://www.canvasxpress.org/data/worldLow.json" )