Search…
Creating More Advanced Charts
Source code is located at the end of this tutorial.
This tutorial introduces you to Symbol Type marks by creating a heatmap visualization. The heatmap shows contribution level to the Republican party within the continental United States:
The contribution data are obtained using the following SQL query:
1
"data": [
2
{
3
"name": "heatmap_query",
4
"sql": "SELECT rect_pixel_bin(conv_4326_900913_x(lon), -13847031.457875465, -7451726.712679257, 733, 733) as x,
5
rect_pixel_bin(conv_4326_900913_y(lat), 2346114.147993467, 6970277.197053557, 530, 530) as y,
6
SUM(amount) as cnt
7
FROM contributions
8
WHERE (lon >= -124.39000000000038 AND lon <= -66.93999999999943) AND
9
(lat >= 20.61570573311549 AND lat <= 52.93117449504004) AND
10
amount > 0 AND
11
recipient_party = 'R'
12
GROUP BY x, y"
13
}
14
]
Copied!
The visualization uses a Symbol Type marks type to represent each data item in the heatmap_query data table:
1
"marks": [
2
{
3
"type": "symbol",
4
"from": {
5
"data": "heatmap_query"
6
},
7
"properties": { ... elided ... }
8
}
9
]
Copied!
The marks properties property specifies the symbol shape, which is a square. Each square has a pixel width and height of one pixel.
1
"marks": [
2
{
3
... elided ...
4
5
"properties": {
6
"shape": "square",
7
"x": {
8
"field": "x"
9
},
10
"y": {
11
"field": "y"
12
},
13
"width": 1,
14
"height": 1,
15
"fillColor": {
16
"scale": "heat_color",
17
"field": "cnt"
18
}
19
}
20
}
21
]
Copied!
Notice that the data x and y location values do not reference a scale. The location values are the values of the SQL query, transformed using extension functions.
The fill color of the square uses the heat_color scale to determine the color used to represent the data item.
Quantize scales are similar to linear scales, except they use a discrete rather than continuous range. The continuous input domain is divided into uniform segments based on the number of values in the output range.
1
"scales": [
2
{
3
"name": "heat_color",
4
"type": "quantize",
5
"domain": [
6
10000.0,
7
1000000.0
8
],
9
"range": [ "#0d0887", "#2a0593", "#41049d", "#5601a4", "#6a00a8",
10
"#7e03a8", "#8f0da4", "#a11b9b", "#b12a90", "#bf3984",
11
"#cb4679", "#d6556d", "#e16462", "#ea7457", "#f2844b",
12
"#f89540", "#fca636", "#feba2c", "#fcce25", "#f7e425", "#f0f921"
13
],
14
"default": "#0d0887",
15
"nullValue": "#0d0887"
16
}
17
]
Copied!
A heatmap shows a continuous input domain divided into uniform segments based on the number of values in the output range. This is a quantize scales type. In the example, dollar amounts between $10,000 and $1 million are uniformly divided among 21 range values, where the larger amounts are represented by brighter colors.
Values outside the domain and null values are rendered as dark blue, #0d0887.

Source Code

Advanced Chart Type Tutorial Directory Structure
1
index.html
2
/js
3
browser-connector.js
4
vegaspec.js
5
vegademo.js
Copied!

HTML

Advanced Chart Type Tutorial index.html
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<title>OmniSci</title>
5
<meta charset="UTF-8">
6
</head>
7
<body>
8
<script src="js/browser-connector.js"></script>
9
<script src="js/vegaspec.js"></script>
10
<script src="js/vegademo.js"></script>
11
12
<script>
13
document.addEventListener('DOMContentLoaded', init, false);
14
</script>
15
</body>
16
</html>
Copied!

JavaScript

Advanced Chart Type Tutorial vegademo.js
1
function init() {
2
var vegaOptions = {}
3
var connector = new MapdCon()
4
.protocol("http")
5
.host("my.host.com")
6
.port("6273")
7
.dbName("omnisci")
8
.user("omnisci")
9
.password("changeme")
10
.connect(function(error, con) {
11
con.renderVega(1, JSON.stringify(exampleVega), vegaOptions, function(error, result) {
12
if (error) {
13
console.log(error.message);
14
}
15
else {
16
var blobUrl = `data:image/png;base64,${result.image}`
17
var body = document.querySelector('body')
18
var vegaImg = new Image()
19
vegaImg.src = blobUrl
20
body.append(vegaImg)
21
}
22
});
23
});
24
}
Copied!
Advanced Chart Type Tutorial vegaspec.js
1
const exampleVega = {
2
"width": 733,
3
"height": 530,
4
"data": [
5
{
6
"name": "heatmap_query",
7
"sql": "SELECT rect_pixel_bin(conv_4326_900913_x(lon), -13847031.457875465, -7451726.712679257, 733, 733) as x,
8
rect_pixel_bin(conv_4326_900913_y(lat), 2346114.147993467, 6970277.197053557, 530, 530) as y,
9
SUM(amount) as cnt
10
FROM contributions
11
WHERE (lon >= -124.39000000000038 AND lon <= -66.93999999999943) AND
12
(lat >= 20.61570573311549 AND lat <= 52.93117449504004) AND
13
amount > 0 AND
14
recipient_party = 'R'
15
GROUP BY x, y"
16
}
17
],
18
"scales": [
19
{
20
"name": "heat_color",
21
"type": "quantize",
22
"domain": [
23
10000.0,
24
1000000.0
25
],
26
"range": [ "#0d0887", "#2a0593", "#41049d", "#5601a4", "#6a00a8",
27
"#7e03a8", "#8f0da4", "#a11b9b", "#b12a90", "#bf3984",
28
"#cb4679", "#d6556d", "#e16462", "#ea7457", "#f2844b",
29
"#f89540", "#fca636", "#feba2c", "#fcce25", "#f7e425", "#f0f921"
30
],
31
"default": "#0d0887",
32
"nullValue": "#0d0887"
33
}
34
],
35
"marks": [
36
{
37
"type": "symbol",
38
"from": {
39
"data": "heatmap_query"
40
},
41
"properties": {
42
"shape": "square",
43
"x": {
44
"field": "x"
45
},
46
"y": {
47
"field": "y"
48
},
49
"width": 1,
50
"height": 1,
51
"fillColor": {
52
"scale": "heat_color",
53
"field": "cnt"
54
}
55
}
56
}
57
]
58
};
Copied!
Last modified 1yr ago
Export as PDF
Copy link