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.
<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)
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"
)


























