World symbol map with square markers

Maps in CanvasXpress allow users to create interactive and customizable visualizations for geographical data. You can integrate various map types, such as choropleths or point maps, and layer your data to highlight trends, distributions, or relationships across regions. With its flexibility, Maps in CanvasXpress support detailed analysis and presentation of spatial data for a wide range of applications.


Economist GGPlot Excel Paul Tol Black And White Solarized Stata Tableau Wall Street CanvasXpress
<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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>

      // Use a data frame (2D-array) for the graph
      var data = 

      // Create the configuration for the graph
      var config = {
         "graphType" : "Map",
         "topoJSON" : "https://www.canvasxpress.org/data/maps/WORLD.json",
         "mapId" : "worldSymbols",
         "theme" : "classic",
         "mapColor" : "#ececec",
         "mapOutlineColor" : "#ffffff",
         "showLegend" : false,
         "title" : "Where are the big computers?",
         "subtitle" : "Synthetic count of systems per country, square area proportional to count",
         "decorations" : {
            "marker" : [
               {
                  "coords" : [
                     39,
                     -98
                  ],
                  "shape" : "square",
                  "size" : 54.772255750516614,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "120"
               },
               {
                  "coords" : [
                     35,
                     104
                  ],
                  "shape" : "square",
                  "size" : 61.23724356957945,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "150"
               },
               {
                  "coords" : [
                     36,
                     138
                  ],
                  "shape" : "square",
                  "size" : 28.284271247461902,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "32"
               },
               {
                  "coords" : [
                     51,
                     10
                  ],
                  "shape" : "square",
                  "size" : 26.457513110645905,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "28"
               },
               {
                  "coords" : [
                     46.5,
                     2.5
                  ],
                  "shape" : "square",
                  "size" : 24.49489742783178,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "24"
               },
               {
                  "coords" : [
                     54,
                     -2
                  ],
                  "shape" : "square",
                  "size" : 22.360679774997898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "20"
               },
               {
                  "coords" : [
                     42.8,
                     12.5
                  ],
                  "shape" : "square",
                  "size" : 17.32050807568877,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     57,
                     -100
                  ],
                  "shape" : "square",
                  "size" : 15.811388300841898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     36.5,
                     127.8
                  ],
                  "shape" : "square",
                  "size" : 15.811388300841898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     52.2,
                     5.3
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -10,
                     -52
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     22,
                     79
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -25,
                     134
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     24,
                     45
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     60,
                     95
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     40,
                     -3.5
                  ],
                  "shape" : "square",
                  "size" : 13.228756555322953,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     46.8,
                     8.2
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     62,
                     15
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     64,
                     26
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     61,
                     9
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     52,
                     19
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     1.35,
                     103.8
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -29,
                     24
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     24,
                     54
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     23.7,
                     121
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     23.5,
                     -102
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     49.8,
                     15.5
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     47.5,
                     14.5
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     39,
                     -98
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "The USA has\n120 systems",
                  "x" : 0.09,
                  "y" : 0.52
               },
               {
                  "coords" : [
                     35,
                     104
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "China has the largest\nnumber of systems: 150",
                  "x" : 0.6,
                  "y" : 0.8
               },
               {
                  "coords" : [
                     36,
                     138
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "Japan: 32 systems",
                  "x" : 0.86,
                  "y" : 0.3
               }
            ]
         },
         "source" : "Synthetic data for illustration"
      }

      // Event used to create graph (optional)
      var events = false

      // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
<html>

  <head>
    <!-- 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/dist/canvasXpress.min.js"></script>
  </head>

  <body>

    <!-- 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" : {
            "vars" : [
               "USA",
               "CHN",
               "JPN",
               "DEU",
               "FRA",
               "GBR",
               "ITA",
               "CAN",
               "KOR",
               "NLD",
               "BRA",
               "IND",
               "AUS",
               "SAU",
               "RUS",
               "ESP",
               "CHE",
               "SWE",
               "FIN",
               "NOR",
               "POL",
               "SGP",
               "ZAF",
               "ARE",
               "TWN",
               "MEX",
               "CZE",
               "AUT"
            ],
            "smps" : [
               "Systems"
            ],
            "data" : [
               [
                  120
               ],
               [
                  150
               ],
               [
                  32
               ],
               [
                  28
               ],
               [
                  24
               ],
               [
                  20
               ],
               [
                  12
               ],
               [
                  10
               ],
               [
                  10
               ],
               [
                  8
               ],
               [
                  8
               ],
               [
                  8
               ],
               [
                  6
               ],
               [
                  8
               ],
               [
                  6
               ],
               [
                  7
               ],
               [
                  6
               ],
               [
                  6
               ],
               [
                  5
               ],
               [
                  5
               ],
               [
                  4
               ],
               [
                  4
               ],
               [
                  3
               ],
               [
                  5
               ],
               [
                  4
               ],
               [
                  3
               ],
               [
                  3
               ],
               [
                  3
               ]
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Map",
         "topoJSON" : "https://www.canvasxpress.org/data/maps/WORLD.json",
         "mapId" : "worldSymbols",
         "theme" : "classic",
         "mapColor" : "#ececec",
         "mapOutlineColor" : "#ffffff",
         "showLegend" : false,
         "title" : "Where are the big computers?",
         "subtitle" : "Synthetic count of systems per country, square area proportional to count",
         "decorations" : {
            "marker" : [
               {
                  "coords" : [
                     39,
                     -98
                  ],
                  "shape" : "square",
                  "size" : 54.772255750516614,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "120"
               },
               {
                  "coords" : [
                     35,
                     104
                  ],
                  "shape" : "square",
                  "size" : 61.23724356957945,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "150"
               },
               {
                  "coords" : [
                     36,
                     138
                  ],
                  "shape" : "square",
                  "size" : 28.284271247461902,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "32"
               },
               {
                  "coords" : [
                     51,
                     10
                  ],
                  "shape" : "square",
                  "size" : 26.457513110645905,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "28"
               },
               {
                  "coords" : [
                     46.5,
                     2.5
                  ],
                  "shape" : "square",
                  "size" : 24.49489742783178,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "24"
               },
               {
                  "coords" : [
                     54,
                     -2
                  ],
                  "shape" : "square",
                  "size" : 22.360679774997898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : "20"
               },
               {
                  "coords" : [
                     42.8,
                     12.5
                  ],
                  "shape" : "square",
                  "size" : 17.32050807568877,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     57,
                     -100
                  ],
                  "shape" : "square",
                  "size" : 15.811388300841898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     36.5,
                     127.8
                  ],
                  "shape" : "square",
                  "size" : 15.811388300841898,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     52.2,
                     5.3
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -10,
                     -52
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     22,
                     79
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -25,
                     134
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     24,
                     45
                  ],
                  "shape" : "square",
                  "size" : 14.142135623730951,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     60,
                     95
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     40,
                     -3.5
                  ],
                  "shape" : "square",
                  "size" : 13.228756555322953,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     46.8,
                     8.2
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     62,
                     15
                  ],
                  "shape" : "square",
                  "size" : 12.24744871391589,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     64,
                     26
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     61,
                     9
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     52,
                     19
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     1.35,
                     103.8
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     -29,
                     24
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     24,
                     54
                  ],
                  "shape" : "square",
                  "size" : 11.180339887498949,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     23.7,
                     121
                  ],
                  "shape" : "square",
                  "size" : 10,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     23.5,
                     -102
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     49.8,
                     15.5
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     47.5,
                     14.5
                  ],
                  "shape" : "square",
                  "size" : 8.660254037844386,
                  "color" : "rgba(51,34,136,0.8)",
                  "label" : ""
               },
               {
                  "coords" : [
                     39,
                     -98
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "The USA has\n120 systems",
                  "x" : 0.09,
                  "y" : 0.52
               },
               {
                  "coords" : [
                     35,
                     104
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "China has the largest\nnumber of systems: 150",
                  "x" : 0.6,
                  "y" : 0.8
               },
               {
                  "coords" : [
                     36,
                     138
                  ],
                  "shape" : "none",
                  "type" : "curved",
                  "fontSize" : 12,
                  "text" : "Japan: 32 systems",
                  "x" : 0.86,
                  "y" : 0.3
               }
            ]
         },
         "source" : "Synthetic data for illustration"
      }

      // Event used to create graph (optional)
      var events = false

            // Call the CanvasXpress function to create the graph
      var cX = new CanvasXpress("canvasId", data, config, events);

    </script>

  </body>

</html>
library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/r/cX-map27-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
data=y,
decorations=list(marker=list(list(color="rgba(51,34,136,0.8)", coords=list(39, -98), label=120, shape="square", size=54.772255750516614), list(color="rgba(51,34,136,0.8)", coords=list(35, 104), label=150, shape="square", size=61.23724356957945), list(color="rgba(51,34,136,0.8)", coords=list(36, 138), label=32, shape="square", size=28.284271247461902), list(color="rgba(51,34,136,0.8)", coords=list(51, 10), label=28, shape="square", size=26.457513110645905), list(color="rgba(51,34,136,0.8)", coords=list(46.5, 2.5), label=24, shape="square", size=24.49489742783178), list(color="rgba(51,34,136,0.8)", coords=list(54, -2), label=20, shape="square", size=22.360679774997898), list(color="rgba(51,34,136,0.8)", coords=list(42.8, 12.5), label="", shape="square", size=17.32050807568877), list(color="rgba(51,34,136,0.8)", coords=list(57, -100), label="", shape="square", size=15.811388300841898), list(color="rgba(51,34,136,0.8)", coords=list(36.5, 127.8), label="", shape="square", size=15.811388300841898), list(color="rgba(51,34,136,0.8)", coords=list(52.2, 5.3), label="", shape="square", size=14.142135623730951), list(color="rgba(51,34,136,0.8)", coords=list(-10, -52), label="", shape="square", size=14.142135623730951), list(color="rgba(51,34,136,0.8)", coords=list(22, 79), label="", shape="square", size=14.142135623730951), list(color="rgba(51,34,136,0.8)", coords=list(-25, 134), label="", shape="square", size=12.24744871391589), list(color="rgba(51,34,136,0.8)", coords=list(24, 45), label="", shape="square", size=14.142135623730951), list(color="rgba(51,34,136,0.8)", coords=list(60, 95), label="", shape="square", size=12.24744871391589), list(color="rgba(51,34,136,0.8)", coords=list(40, -3.5), label="", shape="square", size=13.228756555322953), list(color="rgba(51,34,136,0.8)", coords=list(46.8, 8.2), label="", shape="square", size=12.24744871391589), list(color="rgba(51,34,136,0.8)", coords=list(62, 15), label="", shape="square", size=12.24744871391589), list(color="rgba(51,34,136,0.8)", coords=list(64, 26), label="", shape="square", size=11.180339887498949), list(color="rgba(51,34,136,0.8)", coords=list(61, 9), label="", shape="square", size=11.180339887498949), list(color="rgba(51,34,136,0.8)", coords=list(52, 19), label="", shape="square", size=10), list(color="rgba(51,34,136,0.8)", coords=list(1.35, 103.8), label="", shape="square", size=10), list(color="rgba(51,34,136,0.8)", coords=list(-29, 24), label="", shape="square", size=8.660254037844386), list(color="rgba(51,34,136,0.8)", coords=list(24, 54), label="", shape="square", size=11.180339887498949), list(color="rgba(51,34,136,0.8)", coords=list(23.7, 121), label="", shape="square", size=10), list(color="rgba(51,34,136,0.8)", coords=list(23.5, -102), label="", shape="square", size=8.660254037844386), list(color="rgba(51,34,136,0.8)", coords=list(49.8, 15.5), label="", shape="square", size=8.660254037844386), list(color="rgba(51,34,136,0.8)", coords=list(47.5, 14.5), label="", shape="square", size=8.660254037844386), list(coords=list(39, -98), fontSize=12, shape="none", text="The USA has\n120 systems", type="curved", x=0.09, y=0.52), list(coords=list(35, 104), fontSize=12, shape="none", text="China has the largest\nnumber of systems: 150", type="curved", x=0.6, y=0.8), list(coords=list(36, 138), fontSize=12, shape="none", text="Japan: 32 systems", type="curved", x=0.86, y=0.3))),
graphType="Map",
mapColor="#ececec",
mapId="worldSymbols",
mapOutlineColor="#ffffff",
showLegend=FALSE,
source="Synthetic data for illustration",
subtitle="Synthetic count of systems per country, square area proportional to count",
theme="classic",
title="Where are the big computers?",
topoJSON="https://www.canvasxpress.org/data/maps/WORLD.json"
)
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import show_in_browser

if __name__ == "__main__":
  # Define the chart with its data and configuration
  chart: CanvasXpress = CanvasXpress(
    render_to = "map26",
    data = {
      "y": {
        "vars": ["USA", "CHN", "JPN", "DEU", "FRA", "GBR", "ITA", "CAN", "KOR", "NLD", "BRA", "IND", "AUS", "SAU", "RUS", "ESP", "CHE", "SWE", "FIN", "NOR", "POL", "SGP", "ZAF", "ARE", "TWN", "MEX", "CZE", "AUT"],
        "smps": ["Systems"],
        "data": [
          [120],
          [150],
          [32],
          [28],
          [24],
          [20],
          [12],
          [10],
          [10],
          [8],
          [8],
          [8],
          [6],
          [8],
          [6],
          [7],
          [6],
          [6],
          [5],
          [5],
          [4],
          [4],
          [3],
          [5],
          [4],
          [3],
          [3],
          [3]
        ]
      }
    },
    config = {
      "graphType": "Map",
      "topoJSON": "https://www.canvasxpress.org/data/maps/WORLD.json",
      "mapId": "worldSymbols",
      "theme": "classic",
      "mapColor": "#ececec",
      "mapOutlineColor": "#ffffff",
      "showLegend": False,
      "title": "Where are the big computers?",
      "subtitle": "Synthetic count of systems per country, square area proportional to count",
      "decorations": {
        "marker": [
          {
            "coords": [39, -98],
            "shape": "square",
            "size": 54.772255750516614,
            "color": "rgba(51,34,136,0.8)",
            "label": "120"
          },
          {
            "coords": [35, 104],
            "shape": "square",
            "size": 61.23724356957945,
            "color": "rgba(51,34,136,0.8)",
            "label": "150"
          },
          {
            "coords": [36, 138],
            "shape": "square",
            "size": 28.284271247461902,
            "color": "rgba(51,34,136,0.8)",
            "label": "32"
          },
          {
            "coords": [51, 10],
            "shape": "square",
            "size": 26.457513110645905,
            "color": "rgba(51,34,136,0.8)",
            "label": "28"
          },
          {
            "coords": [46.5, 2.5],
            "shape": "square",
            "size": 24.49489742783178,
            "color": "rgba(51,34,136,0.8)",
            "label": "24"
          },
          {
            "coords": [54, -2],
            "shape": "square",
            "size": 22.360679774997898,
            "color": "rgba(51,34,136,0.8)",
            "label": "20"
          },
          {
            "coords": [42.8, 12.5],
            "shape": "square",
            "size": 17.32050807568877,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [57, -100],
            "shape": "square",
            "size": 15.811388300841898,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [36.5, 127.8],
            "shape": "square",
            "size": 15.811388300841898,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [52.2, 5.3],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-10, -52],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [22, 79],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-25, 134],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [24, 45],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [60, 95],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [40, -3.5],
            "shape": "square",
            "size": 13.228756555322953,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [46.8, 8.2],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [62, 15],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [64, 26],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [61, 9],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [52, 19],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [1.35, 103.8],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-29, 24],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [24, 54],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [23.7, 121],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [23.5, -102],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [49.8, 15.5],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [47.5, 14.5],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [39, -98],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "The USA has\n120 systems",
            "x": 0.09,
            "y": 0.52
          },
          {
            "coords": [35, 104],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "China has the largest\nnumber of systems: 150",
            "x": 0.6,
            "y": 0.8
          },
          {
            "coords": [36, 138],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "Japan: 32 systems",
            "x": 0.86,
            "y": 0.3
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 520
  )

  # Display the chart in its own Web page
  show_in_browser(chart)
Run this notebook: Open in Binder
from canvasxpress.canvas import CanvasXpress
from canvasxpress.plot import graph

graph(
  CanvasXpress(
    render_to = "map26",
    data = {
      "y": {
        "vars": ["USA", "CHN", "JPN", "DEU", "FRA", "GBR", "ITA", "CAN", "KOR", "NLD", "BRA", "IND", "AUS", "SAU", "RUS", "ESP", "CHE", "SWE", "FIN", "NOR", "POL", "SGP", "ZAF", "ARE", "TWN", "MEX", "CZE", "AUT"],
        "smps": ["Systems"],
        "data": [
          [120],
          [150],
          [32],
          [28],
          [24],
          [20],
          [12],
          [10],
          [10],
          [8],
          [8],
          [8],
          [6],
          [8],
          [6],
          [7],
          [6],
          [6],
          [5],
          [5],
          [4],
          [4],
          [3],
          [5],
          [4],
          [3],
          [3],
          [3]
        ]
      }
    },
    config = {
      "graphType": "Map",
      "topoJSON": "https://www.canvasxpress.org/data/maps/WORLD.json",
      "mapId": "worldSymbols",
      "theme": "classic",
      "mapColor": "#ececec",
      "mapOutlineColor": "#ffffff",
      "showLegend": False,
      "title": "Where are the big computers?",
      "subtitle": "Synthetic count of systems per country, square area proportional to count",
      "decorations": {
        "marker": [
          {
            "coords": [39, -98],
            "shape": "square",
            "size": 54.772255750516614,
            "color": "rgba(51,34,136,0.8)",
            "label": "120"
          },
          {
            "coords": [35, 104],
            "shape": "square",
            "size": 61.23724356957945,
            "color": "rgba(51,34,136,0.8)",
            "label": "150"
          },
          {
            "coords": [36, 138],
            "shape": "square",
            "size": 28.284271247461902,
            "color": "rgba(51,34,136,0.8)",
            "label": "32"
          },
          {
            "coords": [51, 10],
            "shape": "square",
            "size": 26.457513110645905,
            "color": "rgba(51,34,136,0.8)",
            "label": "28"
          },
          {
            "coords": [46.5, 2.5],
            "shape": "square",
            "size": 24.49489742783178,
            "color": "rgba(51,34,136,0.8)",
            "label": "24"
          },
          {
            "coords": [54, -2],
            "shape": "square",
            "size": 22.360679774997898,
            "color": "rgba(51,34,136,0.8)",
            "label": "20"
          },
          {
            "coords": [42.8, 12.5],
            "shape": "square",
            "size": 17.32050807568877,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [57, -100],
            "shape": "square",
            "size": 15.811388300841898,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [36.5, 127.8],
            "shape": "square",
            "size": 15.811388300841898,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [52.2, 5.3],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-10, -52],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [22, 79],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-25, 134],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [24, 45],
            "shape": "square",
            "size": 14.142135623730951,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [60, 95],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [40, -3.5],
            "shape": "square",
            "size": 13.228756555322953,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [46.8, 8.2],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [62, 15],
            "shape": "square",
            "size": 12.24744871391589,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [64, 26],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [61, 9],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [52, 19],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [1.35, 103.8],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [-29, 24],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [24, 54],
            "shape": "square",
            "size": 11.180339887498949,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [23.7, 121],
            "shape": "square",
            "size": 10,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [23.5, -102],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [49.8, 15.5],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [47.5, 14.5],
            "shape": "square",
            "size": 8.660254037844386,
            "color": "rgba(51,34,136,0.8)",
            "label": ""
          },
          {
            "coords": [39, -98],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "The USA has\n120 systems",
            "x": 0.09,
            "y": 0.52
          },
          {
            "coords": [35, 104],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "China has the largest\nnumber of systems: 150",
            "x": 0.6,
            "y": 0.8
          },
          {
            "coords": [36, 138],
            "shape": "none",
            "type": "curved",
            "fontSize": 12,
            "text": "Japan: 32 systems",
            "x": 0.86,
            "y": 0.3
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 520
  )
)
using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["USA", "CHN", "JPN", "DEU", "FRA", "GBR", "ITA", "CAN", "KOR", "NLD", "BRA", "IND", "AUS", "SAU", "RUS", "ESP", "CHE", "SWE", "FIN", "NOR", "POL", "SGP", "ZAF", "ARE", "TWN", "MEX", "CZE", "AUT"],
    "smps" => ["Systems"],
    "data" => [
      [120],
      [150],
      [32],
      [28],
      [24],
      [20],
      [12],
      [10],
      [10],
      [8],
      [8],
      [8],
      [6],
      [8],
      [6],
      [7],
      [6],
      [6],
      [5],
      [5],
      [4],
      [4],
      [3],
      [5],
      [4],
      [3],
      [3],
      [3]
    ]
  )
);
  graphType = "Map",
  topoJSON = "https://www.canvasxpress.org/data/maps/WORLD.json",
  mapId = "worldSymbols",
  theme = "classic",
  mapColor = "#ececec",
  mapOutlineColor = "#ffffff",
  showLegend = false,
  title = "Where are the big computers?",
  subtitle = "Synthetic count of systems per country, square area proportional to count",
  decorations = Dict(
    "marker" => [
      Dict(
        "coords" => [39, -98],
        "shape" => "square",
        "size" => 54.772255750516614,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "120"
      ),
      Dict(
        "coords" => [35, 104],
        "shape" => "square",
        "size" => 61.23724356957945,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "150"
      ),
      Dict(
        "coords" => [36, 138],
        "shape" => "square",
        "size" => 28.284271247461902,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "32"
      ),
      Dict(
        "coords" => [51, 10],
        "shape" => "square",
        "size" => 26.457513110645905,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "28"
      ),
      Dict(
        "coords" => [46.5, 2.5],
        "shape" => "square",
        "size" => 24.49489742783178,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "24"
      ),
      Dict(
        "coords" => [54, -2],
        "shape" => "square",
        "size" => 22.360679774997898,
        "color" => "rgba(51,34,136,0.8)",
        "label" => "20"
      ),
      Dict(
        "coords" => [42.8, 12.5],
        "shape" => "square",
        "size" => 17.32050807568877,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [57, -100],
        "shape" => "square",
        "size" => 15.811388300841898,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [36.5, 127.8],
        "shape" => "square",
        "size" => 15.811388300841898,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [52.2, 5.3],
        "shape" => "square",
        "size" => 14.142135623730951,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [-10, -52],
        "shape" => "square",
        "size" => 14.142135623730951,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [22, 79],
        "shape" => "square",
        "size" => 14.142135623730951,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [-25, 134],
        "shape" => "square",
        "size" => 12.24744871391589,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [24, 45],
        "shape" => "square",
        "size" => 14.142135623730951,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [60, 95],
        "shape" => "square",
        "size" => 12.24744871391589,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [40, -3.5],
        "shape" => "square",
        "size" => 13.228756555322953,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [46.8, 8.2],
        "shape" => "square",
        "size" => 12.24744871391589,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [62, 15],
        "shape" => "square",
        "size" => 12.24744871391589,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [64, 26],
        "shape" => "square",
        "size" => 11.180339887498949,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [61, 9],
        "shape" => "square",
        "size" => 11.180339887498949,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [52, 19],
        "shape" => "square",
        "size" => 10,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [1.35, 103.8],
        "shape" => "square",
        "size" => 10,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [-29, 24],
        "shape" => "square",
        "size" => 8.660254037844386,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [24, 54],
        "shape" => "square",
        "size" => 11.180339887498949,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [23.7, 121],
        "shape" => "square",
        "size" => 10,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [23.5, -102],
        "shape" => "square",
        "size" => 8.660254037844386,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [49.8, 15.5],
        "shape" => "square",
        "size" => 8.660254037844386,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [47.5, 14.5],
        "shape" => "square",
        "size" => 8.660254037844386,
        "color" => "rgba(51,34,136,0.8)",
        "label" => ""
      ),
      Dict(
        "coords" => [39, -98],
        "shape" => "none",
        "type" => "curved",
        "fontSize" => 12,
        "text" => "The USA has\n120 systems",
        "x" => 0.09,
        "y" => 0.52
      ),
      Dict(
        "coords" => [35, 104],
        "shape" => "none",
        "type" => "curved",
        "fontSize" => 12,
        "text" => "China has the largest\nnumber of systems: 150",
        "x" => 0.6,
        "y" => 0.8
      ),
      Dict(
        "coords" => [36, 138],
        "shape" => "none",
        "type" => "curved",
        "fontSize" => 12,
        "text" => "Japan: 32 systems",
        "x" => 0.86,
        "y" => 0.3
      )
    ]
  ),
  source = "Synthetic data for illustration"
)
⇧