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


























