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" : [ [1665573,692611,941173,5893,25896], [285560,79004,167398,2636,36522], [1532016,685341,781652,5775,59248], [921781,422768,472940,2781,23292], [10965822,5861203,4567429,45520,491670], [1741368,738227,883748,12799,106594], [1459525,816015,561094,3484,78932], [327529,180068,137288,774,9399], [201894,171923,18073,669,11229], [5963110,2912253,2912790,16415,121652], [2583208,1116230,1419720,36332,10926], [367951,205286,137845,1477,23343], [501615,138637,336937,3488,22553], [4742108,2589026,2019421,11623,122038], [2199302,901980,1245836,15530,35956], [1353022,638517,634373,3209,76923], [1072216,399276,622332,4525,46083], [1544106,638923,872520,2885,29778], [1765656,792344,927871,2951,42490], [651817,319951,286616,3074,42176], [2025212,1144008,813827,5310,62067], [2733964,1616487,878502,16366,222609], [4232501,2170418,1953139,16711,92233], [2438685,1168266,1109659,5282,155478], [994184,404614,572844,2009,14717], [2359892,1111138,1189924,7436,51394], [410986,137126,240178,1718,31964], [697019,231780,433862,2245,29132], [609426,279978,301575,3311,24562], [569081,266348,273559,2757,26417], [3187226,1788850,1284173,null,114203], [598605,286783,286417,2058,23347], [6960215,3942215,2258577,7649,751774], [2901099,1257692,1631163,null,12244], [288256,95284,174852,null,18120], [4701998,2183628,2350363,13473,154534], [1234229,474276,744337,6602,9014], [1533950,720342,713577,7447,92584], [4923433,2485967,2281127,11248,145091], [409112,249508,130555,742,28307], [1383902,566037,786892,4760,26213], [316269,118804,190700,1662,5103], [2076181,981720,1061949,null,32512], [6407637,2433746,3799639,23160,151092], [770754,203053,515096,3616,48989], [294308,149022,119775,784,24727], [2739447,1217290,1437490,15198,69469], [2487433,1247652,1108864,13135,117782], [648124,295497,336475,1912,14240], [2598607,1242987,1237279,6640,111701], [213726,60481,147947,1443,3855] ], "smps" : ["Total","Democrat","Republican","Libertarian","Other"], "vars" : ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"] }, "z" : { "State" : ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"], "Winner" : ["Republican","Republican","Republican","Republican","Democrat","Republican","Democrat","Democrat","Democrat","Republican","Republican","Democrat","Republican","Democrat","Republican","Democrat","Republican","Republican","Republican","Democrat","Democrat","Democrat","Democrat","Democrat","Republican","Republican","Republican","Republican","Republican","Republican","Democrat","Democrat","Democrat","Republican","Republican","Republican","Republican","Democrat","Democrat","Democrat","Republican","Republican","Republican","Republican","Republican","Democrat","Republican","Democrat","Republican","Democrat","Republican"] } } <-- Create the configuration for the graph --> var config = { "colorBy":"Winner", "graphType":"Map", "legendOrder":{ "Winner":[ "Republican", "Democrat" ] }, "mapId":"albersStates", "mapProjection":"albers", "theme":"wallStreetJournal", "title":"2000 Presidential Elections", "topoJSON":"https://www.canvasxpress.org/data/usa-albers-states.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-election2000-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) z=read.table("https://www.canvasxpress.org/data/cX-election2000-var.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE) canvasXpress( data=y, varAnnot=z, colorBy="Winner", graphType="Map", legendOrder=list(Winner=list("Republican", "Democrat")), mapId="albersStates", mapProjection="albers", theme="wallStreetJournal", title="2000 Presidential Elections", topoJSON="https://www.canvasxpress.org/data/usa-albers-states.json" )