State symbol map with circle 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/MD.json",
         "mapId" : "maryland",
         "theme" : "bw",
         "mapColor" : "#ececec",
         "mapOutlineColor" : "#9a9a9a",
         "showLegend" : false,
         "title" : "Where do water systems rack up violations?",
         "subtitle" : "Synthetic violation points per system, circle area proportional to points",
         "decorations" : {
            "marker" : [
               {
                  "coords" : [
                     39.65,
                     -79
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.7,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 2,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.5,
                     -76.4
                  ],
                  "shape" : "sphere",
                  "size" : 3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.4,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.35,
                     -76.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.3,
                     -77.6
                  ],
                  "shape" : "sphere",
                  "size" : 1.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.55,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 2.3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.45,
                     -77.4
                  ],
                  "shape" : "sphere",
                  "size" : 1.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.2,
                     -76.6
                  ],
                  "shape" : "sphere",
                  "size" : 4.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39,
                     -76.5
                  ],
                  "shape" : "sphere",
                  "size" : 2.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.9,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -76.4
                  ],
                  "shape" : "sphere",
                  "size" : 2.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.6,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.35,
                     -76.55
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.2,
                     -75.8
                  ],
                  "shape" : "sphere",
                  "size" : 3.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.35,
                     -75.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.6,
                     -75.4
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -75.2
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.1,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.55,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 1.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38,
                     -76.2
                  ],
                  "shape" : "sphere",
                  "size" : 2.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.1,
                     -76
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -76.8
                  ],
                  "shape" : "sphere",
                  "size" : 1.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.3,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 1.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.5,
                     -77.2
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.6,
                     -77.7
                  ],
                  "shape" : "sphere",
                  "size" : 1.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.4,
                     -78.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.3,
                     -76.2
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.75,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.05,
                     -75.6
                  ],
                  "shape" : "sphere",
                  "size" : 4.2,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.5,
                     -75.8
                  ],
                  "shape" : "sphere",
                  "size" : 1.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.25,
                     -75.95
                  ],
                  "shape" : "sphere",
                  "size" : 4.3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.15,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 1.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.9,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.75,
                     -76.7
                  ],
                  "shape" : "sphere",
                  "size" : 4.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.7,
                     -77.2
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.65,
                     -76.6
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               }
            ]
         },
         "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" : [
               "Allegany",
               "Baltimore",
               "Cecil",
               "Carroll",
               "Frederick",
               "Garrett",
               "Howard",
               "Kent",
               "Harford",
               "Calvert",
               "Caroline",
               "Charles",
               "Dorchester",
               "Queen_Anne_s",
               "Somerset",
               "Talbot",
               "Wicomico",
               "Worcester",
               "Anne_Arundel",
               "Montgomery",
               "Prince_George_s",
               "St_Mary_s",
               "Mineral"
            ],
            "smps" : [
               "Base"
            ],
            "data" : [
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ],
               [
                  1
               ]
            ]
         }
      }

      // Create the configuration for the graph
      var config = {
         "graphType" : "Map",
         "topoJSON" : "https://www.canvasxpress.org/data/maps/MD.json",
         "mapId" : "maryland",
         "theme" : "bw",
         "mapColor" : "#ececec",
         "mapOutlineColor" : "#9a9a9a",
         "showLegend" : false,
         "title" : "Where do water systems rack up violations?",
         "subtitle" : "Synthetic violation points per system, circle area proportional to points",
         "decorations" : {
            "marker" : [
               {
                  "coords" : [
                     39.65,
                     -79
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.7,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 2,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.5,
                     -76.4
                  ],
                  "shape" : "sphere",
                  "size" : 3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.4,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.35,
                     -76.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.3,
                     -77.6
                  ],
                  "shape" : "sphere",
                  "size" : 1.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.55,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 2.3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.45,
                     -77.4
                  ],
                  "shape" : "sphere",
                  "size" : 1.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.2,
                     -76.6
                  ],
                  "shape" : "sphere",
                  "size" : 4.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39,
                     -76.5
                  ],
                  "shape" : "sphere",
                  "size" : 2.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.9,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -76.4
                  ],
                  "shape" : "sphere",
                  "size" : 2.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.6,
                     -76.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.35,
                     -76.55
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.2,
                     -75.8
                  ],
                  "shape" : "sphere",
                  "size" : 3.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.35,
                     -75.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.6,
                     -75.4
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -75.2
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.1,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.55,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 1.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38,
                     -76.2
                  ],
                  "shape" : "sphere",
                  "size" : 2.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.1,
                     -76
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.4,
                     -76.8
                  ],
                  "shape" : "sphere",
                  "size" : 1.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.3,
                     -77
                  ],
                  "shape" : "sphere",
                  "size" : 1.8,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.5,
                     -77.2
                  ],
                  "shape" : "sphere",
                  "size" : 3.1,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.6,
                     -77.7
                  ],
                  "shape" : "sphere",
                  "size" : 1.7,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.4,
                     -78.5
                  ],
                  "shape" : "sphere",
                  "size" : 3.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.3,
                     -76.2
                  ],
                  "shape" : "sphere",
                  "size" : 3.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.75,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 3.5,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.05,
                     -75.6
                  ],
                  "shape" : "sphere",
                  "size" : 4.2,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.5,
                     -75.8
                  ],
                  "shape" : "sphere",
                  "size" : 1.6,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.25,
                     -75.95
                  ],
                  "shape" : "sphere",
                  "size" : 4.3,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.15,
                     -75.9
                  ],
                  "shape" : "sphere",
                  "size" : 1.9,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.9,
                     -76.1
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.75,
                     -76.7
                  ],
                  "shape" : "sphere",
                  "size" : 4.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     39.7,
                     -77.2
                  ],
                  "shape" : "sphere",
                  "size" : 1.4,
                  "color" : "rgba(0,119,187,0.7)"
               },
               {
                  "coords" : [
                     38.65,
                     -76.6
                  ],
                  "shape" : "sphere",
                  "size" : 2.6,
                  "color" : "rgba(0,119,187,0.7)"
               }
            ]
         },
         "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-map28-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(0,119,187,0.7)", coords=list(39.65, -79), shape="sphere", size=3.5), list(color="rgba(0,119,187,0.7)", coords=list(39.7, -76.1), shape="sphere", size=2), list(color="rgba(0,119,187,0.7)", coords=list(39.5, -76.4), shape="sphere", size=3), list(color="rgba(0,119,187,0.7)", coords=list(39.4, -76.9), shape="sphere", size=3.1), list(color="rgba(0,119,187,0.7)", coords=list(39.35, -76.5), shape="sphere", size=3.4), list(color="rgba(0,119,187,0.7)", coords=list(39, -76.9), shape="sphere", size=2.4), list(color="rgba(0,119,187,0.7)", coords=list(39.3, -77.6), shape="sphere", size=1.9), list(color="rgba(0,119,187,0.7)", coords=list(39.55, -77), shape="sphere", size=2.3), list(color="rgba(0,119,187,0.7)", coords=list(39.45, -77.4), shape="sphere", size=1.6), list(color="rgba(0,119,187,0.7)", coords=list(39.2, -76.6), shape="sphere", size=4.1), list(color="rgba(0,119,187,0.7)", coords=list(39, -76.5), shape="sphere", size=2.8), list(color="rgba(0,119,187,0.7)", coords=list(38.9, -77), shape="sphere", size=3.9), list(color="rgba(0,119,187,0.7)", coords=list(38.4, -76.4), shape="sphere", size=2.9), list(color="rgba(0,119,187,0.7)", coords=list(38.6, -76.9), shape="sphere", size=2.7), list(color="rgba(0,119,187,0.7)", coords=list(38.35, -76.55), shape="sphere", size=1.4), list(color="rgba(0,119,187,0.7)", coords=list(38.2, -75.8), shape="sphere", size=3.7), list(color="rgba(0,119,187,0.7)", coords=list(38.35, -75.5), shape="sphere", size=3.5), list(color="rgba(0,119,187,0.7)", coords=list(38.6, -75.4), shape="sphere", size=3.1), list(color="rgba(0,119,187,0.7)", coords=list(38.4, -75.2), shape="sphere", size=2.6), list(color="rgba(0,119,187,0.7)", coords=list(39.1, -75.9), shape="sphere", size=2.6), list(color="rgba(0,119,187,0.7)", coords=list(38.55, -76.1), shape="sphere", size=1.8), list(color="rgba(0,119,187,0.7)", coords=list(38, -76.2), shape="sphere", size=2.8), list(color="rgba(0,119,187,0.7)", coords=list(38.1, -76), shape="sphere", size=3.9), list(color="rgba(0,119,187,0.7)", coords=list(38.4, -76.8), shape="sphere", size=1.5), list(color="rgba(0,119,187,0.7)", coords=list(38.3, -77), shape="sphere", size=1.8), list(color="rgba(0,119,187,0.7)", coords=list(38.5, -77.2), shape="sphere", size=3.1), list(color="rgba(0,119,187,0.7)", coords=list(39.6, -77.7), shape="sphere", size=1.7), list(color="rgba(0,119,187,0.7)", coords=list(39.4, -78.5), shape="sphere", size=3.6), list(color="rgba(0,119,187,0.7)", coords=list(39.3, -76.2), shape="sphere", size=3.9), list(color="rgba(0,119,187,0.7)", coords=list(38.75, -75.9), shape="sphere", size=3.5), list(color="rgba(0,119,187,0.7)", coords=list(38.05, -75.6), shape="sphere", size=4.2), list(color="rgba(0,119,187,0.7)", coords=list(39.5, -75.8), shape="sphere", size=1.6), list(color="rgba(0,119,187,0.7)", coords=list(39.25, -75.95), shape="sphere", size=4.3), list(color="rgba(0,119,187,0.7)", coords=list(38.15, -75.9), shape="sphere", size=1.9), list(color="rgba(0,119,187,0.7)", coords=list(38.9, -76.1), shape="sphere", size=1.4), list(color="rgba(0,119,187,0.7)", coords=list(39.75, -76.7), shape="sphere", size=4.4), list(color="rgba(0,119,187,0.7)", coords=list(39.7, -77.2), shape="sphere", size=1.4), list(color="rgba(0,119,187,0.7)", coords=list(38.65, -76.6), shape="sphere", size=2.6))),
graphType="Map",
mapColor="#ececec",
mapId="maryland",
mapOutlineColor="#9a9a9a",
showLegend=FALSE,
source="Synthetic data for illustration",
subtitle="Synthetic violation points per system, circle area proportional to points",
theme="bw",
title="Where do water systems rack up violations?",
topoJSON="https://www.canvasxpress.org/data/maps/MD.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 = "map27",
    data = {
      "y": {
        "vars": ["Allegany", "Baltimore", "Cecil", "Carroll", "Frederick", "Garrett", "Howard", "Kent", "Harford", "Calvert", "Caroline", "Charles", "Dorchester", "Queen_Anne_s", "Somerset", "Talbot", "Wicomico", "Worcester", "Anne_Arundel", "Montgomery", "Prince_George_s", "St_Mary_s", "Mineral"],
        "smps": ["Base"],
        "data": [
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1]
        ]
      }
    },
    config = {
      "graphType": "Map",
      "topoJSON": "https://www.canvasxpress.org/data/maps/MD.json",
      "mapId": "maryland",
      "theme": "bw",
      "mapColor": "#ececec",
      "mapOutlineColor": "#9a9a9a",
      "showLegend": False,
      "title": "Where do water systems rack up violations?",
      "subtitle": "Synthetic violation points per system, circle area proportional to points",
      "decorations": {
        "marker": [
          {
            "coords": [39.65, -79],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.7, -76.1],
            "shape": "sphere",
            "size": 2,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.5, -76.4],
            "shape": "sphere",
            "size": 3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.4, -76.9],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.35, -76.5],
            "shape": "sphere",
            "size": 3.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39, -76.9],
            "shape": "sphere",
            "size": 2.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.3, -77.6],
            "shape": "sphere",
            "size": 1.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.55, -77],
            "shape": "sphere",
            "size": 2.3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.45, -77.4],
            "shape": "sphere",
            "size": 1.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.2, -76.6],
            "shape": "sphere",
            "size": 4.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39, -76.5],
            "shape": "sphere",
            "size": 2.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.9, -77],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -76.4],
            "shape": "sphere",
            "size": 2.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.6, -76.9],
            "shape": "sphere",
            "size": 2.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.35, -76.55],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.2, -75.8],
            "shape": "sphere",
            "size": 3.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.35, -75.5],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.6, -75.4],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -75.2],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.1, -75.9],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.55, -76.1],
            "shape": "sphere",
            "size": 1.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38, -76.2],
            "shape": "sphere",
            "size": 2.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.1, -76],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -76.8],
            "shape": "sphere",
            "size": 1.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.3, -77],
            "shape": "sphere",
            "size": 1.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.5, -77.2],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.6, -77.7],
            "shape": "sphere",
            "size": 1.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.4, -78.5],
            "shape": "sphere",
            "size": 3.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.3, -76.2],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.75, -75.9],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.05, -75.6],
            "shape": "sphere",
            "size": 4.2,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.5, -75.8],
            "shape": "sphere",
            "size": 1.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.25, -75.95],
            "shape": "sphere",
            "size": 4.3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.15, -75.9],
            "shape": "sphere",
            "size": 1.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.9, -76.1],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.75, -76.7],
            "shape": "sphere",
            "size": 4.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.7, -77.2],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.65, -76.6],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 480
  )

  # 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 = "map27",
    data = {
      "y": {
        "vars": ["Allegany", "Baltimore", "Cecil", "Carroll", "Frederick", "Garrett", "Howard", "Kent", "Harford", "Calvert", "Caroline", "Charles", "Dorchester", "Queen_Anne_s", "Somerset", "Talbot", "Wicomico", "Worcester", "Anne_Arundel", "Montgomery", "Prince_George_s", "St_Mary_s", "Mineral"],
        "smps": ["Base"],
        "data": [
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1],
          [1]
        ]
      }
    },
    config = {
      "graphType": "Map",
      "topoJSON": "https://www.canvasxpress.org/data/maps/MD.json",
      "mapId": "maryland",
      "theme": "bw",
      "mapColor": "#ececec",
      "mapOutlineColor": "#9a9a9a",
      "showLegend": False,
      "title": "Where do water systems rack up violations?",
      "subtitle": "Synthetic violation points per system, circle area proportional to points",
      "decorations": {
        "marker": [
          {
            "coords": [39.65, -79],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.7, -76.1],
            "shape": "sphere",
            "size": 2,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.5, -76.4],
            "shape": "sphere",
            "size": 3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.4, -76.9],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.35, -76.5],
            "shape": "sphere",
            "size": 3.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39, -76.9],
            "shape": "sphere",
            "size": 2.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.3, -77.6],
            "shape": "sphere",
            "size": 1.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.55, -77],
            "shape": "sphere",
            "size": 2.3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.45, -77.4],
            "shape": "sphere",
            "size": 1.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.2, -76.6],
            "shape": "sphere",
            "size": 4.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39, -76.5],
            "shape": "sphere",
            "size": 2.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.9, -77],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -76.4],
            "shape": "sphere",
            "size": 2.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.6, -76.9],
            "shape": "sphere",
            "size": 2.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.35, -76.55],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.2, -75.8],
            "shape": "sphere",
            "size": 3.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.35, -75.5],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.6, -75.4],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -75.2],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.1, -75.9],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.55, -76.1],
            "shape": "sphere",
            "size": 1.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38, -76.2],
            "shape": "sphere",
            "size": 2.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.1, -76],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.4, -76.8],
            "shape": "sphere",
            "size": 1.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.3, -77],
            "shape": "sphere",
            "size": 1.8,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.5, -77.2],
            "shape": "sphere",
            "size": 3.1,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.6, -77.7],
            "shape": "sphere",
            "size": 1.7,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.4, -78.5],
            "shape": "sphere",
            "size": 3.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.3, -76.2],
            "shape": "sphere",
            "size": 3.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.75, -75.9],
            "shape": "sphere",
            "size": 3.5,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.05, -75.6],
            "shape": "sphere",
            "size": 4.2,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.5, -75.8],
            "shape": "sphere",
            "size": 1.6,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.25, -75.95],
            "shape": "sphere",
            "size": 4.3,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.15, -75.9],
            "shape": "sphere",
            "size": 1.9,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.9, -76.1],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.75, -76.7],
            "shape": "sphere",
            "size": 4.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [39.7, -77.2],
            "shape": "sphere",
            "size": 1.4,
            "color": "rgba(0,119,187,0.7)"
          },
          {
            "coords": [38.65, -76.6],
            "shape": "sphere",
            "size": 2.6,
            "color": "rgba(0,119,187,0.7)"
          }
        ]
      },
      "source": "Synthetic data for illustration"
    },
    width = 760,
    height = 480
  )
)
using CanvasXpress

canvasxpress(Dict(
  "y" => Dict(
    "vars" => ["Allegany", "Baltimore", "Cecil", "Carroll", "Frederick", "Garrett", "Howard", "Kent", "Harford", "Calvert", "Caroline", "Charles", "Dorchester", "Queen_Anne_s", "Somerset", "Talbot", "Wicomico", "Worcester", "Anne_Arundel", "Montgomery", "Prince_George_s", "St_Mary_s", "Mineral"],
    "smps" => ["Base"],
    "data" => [
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1],
      [1]
    ]
  )
);
  graphType = "Map",
  topoJSON = "https://www.canvasxpress.org/data/maps/MD.json",
  mapId = "maryland",
  theme = "bw",
  mapColor = "#ececec",
  mapOutlineColor = "#9a9a9a",
  showLegend = false,
  title = "Where do water systems rack up violations?",
  subtitle = "Synthetic violation points per system, circle area proportional to points",
  decorations = Dict(
    "marker" => [
      Dict(
        "coords" => [39.65, -79],
        "shape" => "sphere",
        "size" => 3.5,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.7, -76.1],
        "shape" => "sphere",
        "size" => 2,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.5, -76.4],
        "shape" => "sphere",
        "size" => 3,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.4, -76.9],
        "shape" => "sphere",
        "size" => 3.1,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.35, -76.5],
        "shape" => "sphere",
        "size" => 3.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39, -76.9],
        "shape" => "sphere",
        "size" => 2.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.3, -77.6],
        "shape" => "sphere",
        "size" => 1.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.55, -77],
        "shape" => "sphere",
        "size" => 2.3,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.45, -77.4],
        "shape" => "sphere",
        "size" => 1.6,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.2, -76.6],
        "shape" => "sphere",
        "size" => 4.1,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39, -76.5],
        "shape" => "sphere",
        "size" => 2.8,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.9, -77],
        "shape" => "sphere",
        "size" => 3.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.4, -76.4],
        "shape" => "sphere",
        "size" => 2.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.6, -76.9],
        "shape" => "sphere",
        "size" => 2.7,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.35, -76.55],
        "shape" => "sphere",
        "size" => 1.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.2, -75.8],
        "shape" => "sphere",
        "size" => 3.7,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.35, -75.5],
        "shape" => "sphere",
        "size" => 3.5,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.6, -75.4],
        "shape" => "sphere",
        "size" => 3.1,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.4, -75.2],
        "shape" => "sphere",
        "size" => 2.6,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.1, -75.9],
        "shape" => "sphere",
        "size" => 2.6,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.55, -76.1],
        "shape" => "sphere",
        "size" => 1.8,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38, -76.2],
        "shape" => "sphere",
        "size" => 2.8,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.1, -76],
        "shape" => "sphere",
        "size" => 3.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.4, -76.8],
        "shape" => "sphere",
        "size" => 1.5,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.3, -77],
        "shape" => "sphere",
        "size" => 1.8,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.5, -77.2],
        "shape" => "sphere",
        "size" => 3.1,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.6, -77.7],
        "shape" => "sphere",
        "size" => 1.7,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.4, -78.5],
        "shape" => "sphere",
        "size" => 3.6,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.3, -76.2],
        "shape" => "sphere",
        "size" => 3.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.75, -75.9],
        "shape" => "sphere",
        "size" => 3.5,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.05, -75.6],
        "shape" => "sphere",
        "size" => 4.2,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.5, -75.8],
        "shape" => "sphere",
        "size" => 1.6,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.25, -75.95],
        "shape" => "sphere",
        "size" => 4.3,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.15, -75.9],
        "shape" => "sphere",
        "size" => 1.9,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.9, -76.1],
        "shape" => "sphere",
        "size" => 1.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.75, -76.7],
        "shape" => "sphere",
        "size" => 4.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [39.7, -77.2],
        "shape" => "sphere",
        "size" => 1.4,
        "color" => "rgba(0,119,187,0.7)"
      ),
      Dict(
        "coords" => [38.65, -76.6],
        "shape" => "sphere",
        "size" => 2.6,
        "color" => "rgba(0,119,187,0.7)"
      )
    ]
  ),
  source = "Synthetic data for illustration"
)
⇧