Example Source Code¶
Vega at a Glance¶
Tutorial: Vega at a Glance
HTML¶
Vega at a Glance index.html¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapD</title>
<meta charset="UTF-8">
<style>
.title {
font-weight: bold;
text-align:center;
}
.mapd {
position: relative;
top: 2px;
}
.search{
displa"y": inline-block;
margin-top: 12px;
margin-left: 50px;
}
.data-count {
padding-right:20px;
}
.filter-count {
font-weight: bold;
color: #45B1E8;
}
</style>
</head>
<body>
<script src="js/thrift.js"></script>
<script src="js/mapd.thrift.js"></script>
<script src="js/mapd_types.js"></script>
<script src="js/mapd-connector.js"></script>
<script>
function init() {
const exampleVega = {
"width": 384,
"height": 564,
"data": [
{
"name": "tweets",
"sql": "SELECT goog_x as x, goog_y as y, tweets_nov_feb.rowid FROM tweets_nov_feb"
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [
-3650484.1235206556,
7413325.514451755
],
"range": "width"
},
{
"name": "y",
"type": "linear",
"domain": [
-5778161.9183506705,
10471808.487466192
],
"range": "height"
}
],
"marks": [
{
"type": "points",
"from": {
"data": "tweets"
},
"properties": {
"x": {
"scale": "x",
"field": "x"
},
"y": {
"scale": "y",
"field": "y"
},
"fillColor": "blue",
"size": {
"value": 3
}
}
}
]
};
var conn = new MapdCon()
.protocol("http")
.host("myserver.mapd.com")
.port("9092")
.dbName("mapd")
.user("mapd")
.password("mypassword")
.connect(function(error, con) {
var results = con.renderVega(1, JSON.stringify(exampleVega));
var blobUrl = '"data":image/png;base64,' + results.image;
var w=window.open('about:blank','backend-rendered png');
w.document.write("<img src='"+blobUrl+"' alt='backend-rendered png'/>")
console.log("CROOT - done!");
});
console.log("CROOT - done!");
}
document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
Getting Started¶
Tutorial: Getting Started with Vega
Getting Started Directory Structure¶
index.html
/js
mapd.thrift.js
mapd-connector.js
mapd_types.js
thrift.js
vegaspec.js
vegademo.js
HTML¶
Getting Started index.html¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapD</title>
<meta charset="UTF-8">
</head>
<body>
<script src="js/thrift.js"></script>
<script src="js/mapd.thrift.js"></script>
<script src="js/mapd_types.js"></script>
<script src="js/mapd-connector.js"></script>
<script src="js/vegaspec.js"></script>
<script src="js/vegademo.js"></script>
<script>
document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
JavaScript¶
Getting Started vegademo.js¶
function init() {
var conn = new MapdCon()
.protocol("http")
.host("my.host.com")
.port("9092")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect(function(error, con) {
if (typeof con != 'undefined') {
try {
var results = con.renderVega(1, JSON.stringify(defaultVega));
} catch(e) {
console.log(e.error_msg);
}
var blobUrl = '"data":image/png;base64,' + results.image;
var w=window.open('about:blank','backend-rendered png');
w.document.write("<img src='"+blobUrl+"' alt='backend-rendered png'/>");
}
else
console.log(error);
});
}
Getting Started vegaspec.js¶
const exampleVega = {
"width": 384,
"height": 564,
"data": [
{
"name": "tweets",
"sql": "SELECT goog_x as x, goog_y as y, tweets_nov_feb.rowid FROM tweets_nov_feb"
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [
-3650484.1235206556,
7413325.514451755
],
"range": "width"
},
{
"name": "y",
"type": "linear",
"domain": [
-5778161.9183506705,
10471808.487466192
],
"range": "height"
}
],
"marks": [
{
"type": "points",
"from": {
"data": "tweets"
},
"properties": {
"x": {
"scale": "x",
"field": "x"
},
"y": {
"scale": "y",
"field": "y"
},
"fillColor": "blue",
"size": {
"value": 3
}
}
}
]
};
Getting More from Your Data¶
Tutorial: Getting More from Your Data
Getting More Insight Tutorial Directory Structure¶
index.html
/js
mapd.thrift.js
mapd-connector.js
mapd_types.js
thrift.js
vegaspec.js
vegademo.js
HTML¶
Getting More Insight Tutorial index.html¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapD</title>
<meta charset="UTF-8">
</head>
<body>
<script src="js/thrift.js"></script>
<script src="js/mapd.thrift.js"></script>
<script src="js/mapd_types.js"></script>
<script src="js/mapd-connector.js"></script>
<script src="js/vegaspec.js"></script>
<script src="js/vegademo.js"></script>
<script>
document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
JavaScript¶
Getting More Insight Tutorial vegademo.js¶
function init() {
var conn = new MapdCon()
.protocol("http")
.host("my.host.com")
.port("9092")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect(function(error, con) {
if (typeof con != 'undefined') {
try {
var results = con.renderVega(1, JSON.stringify(defaultVega));
} catch(e) {
console.log(e.error_msg);
}
var blobUrl = '"data":image/png;base64,' + results.image;
var w=window.open('about:blank','backend-rendered png');
w.document.write("<img src='"+blobUrl+"' alt='backend-rendered png'/>");
}
else
console.log(error);
});
}
Getting More Insight Tutorial vegaspec.js¶
const exampleVega = {
"width": 384,
"height": 564,
"data": [
{
"name": "tweets",
"sql": "SELECT goog_x as x, goog_y as y, lang as color, tweets_nov_feb.rowid FROM tweets_nov_feb"
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [
-3650484.1235206556,
7413325.514451755
],
"range": "width"
},
{
"name": "y",
"type": "linear",
"domain": [
-5778161.9183506705,
10471808.487466192
],
"range": "height"
},
{
"name": "color",
"type": "ordinal",
"domain": ["en", "es", "fr"],
"range": ["#27aeef", "#87bc45", "#ef9b20"],
"default": "gray",
"nullValue": "#cacaca"
}
],
"marks": [
{
"type": "points",
"from": {
"data": "tweets"
},
"properties": {
"x": {
"scale": "x",
"field": "x"
},
"y": {
"scale": "y",
"field": "y"
},
"fillColor": {
"scale": "color",
"field": "color"
},
"size": 3
}
}
]
};
Creating More Advanced Charts¶
Tutorial: Creating More Advanced Charts
Advanced Chart Type Tutorial Directory Structure¶
index.html
/js
mapd.thrift.js
mapd-connector.js
mapd_types.js
thrift.js
vegaspec.js
vegademo.js
HTML¶
Advanced Chart Type Tutorial index.html¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapD</title>
<meta charset="UTF-8">
</head>
<body>
<script src="js/thrift.js"></script>
<script src="js/mapd.thrift.js"></script>
<script src="js/mapd_types.js"></script>
<script src="js/mapd-connector.js"></script>
<script src="js/vegaspec.js"></script>
<script src="js/vegademo.js"></script>
<script>
document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
JavaScript¶
Advanced Chart Type Tutorial vegademo.js¶
function init() {
var conn = new MapdCon()
.protocol("http")
.host("my.host.com")
.port("9092")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect(function(error, con) {
if (typeof con != 'undefined') {
try {
var results = con.renderVega(1, JSON.stringify(defaultVega));
} catch(e) {
console.log(e.error_msg);
}
var blobUrl = '"data":image/png;base64,' + results.image;
var w=window.open('about:blank','backend-rendered png');
w.document.write("<img src='"+blobUrl+"' alt='backend-rendered png'/>");
}
else
console.log(error);
});
}
Advanced Chart Type Tutorial vegaspec.js¶
const exampleVega = {
"width": 733,
"height": 530,
"data": [
{
"name": "heatmap_query",
"sql": "SELECT rect_pixel_bin(conv_4326_900913_x(lon), -13847031.457875465, -7451726.712679257, 733, 733) as x,
rect_pixel_bin(conv_4326_900913_y(lat), 2346114.147993467, 6970277.197053557, 530, 530) as y,
SUM(amount) as cnt
FROM contributions
WHERE (lon >= -124.39000000000038 AND lon <= -66.93999999999943) AND
(lat >= 20.61570573311549 AND lat <= 52.93117449504004) AND
amount > 0 AND
recipient_party = 'R'
GROUP BY x, y"
}
],
"scales": [
{
"name": "heat_color",
"type": "quantize",
"domain": [
10000.0,
1000000.0
],
"range": [ "#0d0887", "#2a0593", "#41049d", "#5601a4", "#6a00a8",
"#7e03a8", "#8f0da4", "#a11b9b", "#b12a90", "#bf3984",
"#cb4679", "#d6556d", "#e16462", "#ea7457", "#f2844b",
"#f89540", "#fca636", "#feba2c", "#fcce25", "#f7e425", "#f0f921"
],
"default": "#0d0887",
"nullValue": "#0d0887"
}
],
"marks": [
{
"type": "symbol",
"from": {
"data": "heatmap_query"
},
"properties": {
"shape": "square",
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"width": 1,
"height": 1,
"fillColor": {
"scale": "heat_color",
"field": "cnt"
}
}
}
]
};
Working with Polys Marks Type¶
Tutorial: Working with Polys Marks Type
Working with Polys Tutorial Directory Structure¶
index.html
/js
mapd.thrift.js
mapd-connector.js
mapd_types.js
thrift.js
vegaspec.js
vegademo.js
HTML¶
Working with Polys Tutorial index.html¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapD</title>
<meta charset="UTF-8">
</head>
<body>
<script src="js/thrift.js"></script>
<script src="js/mapd.thrift.js"></script>
<script src="js/mapd_types.js"></script>
<script src="js/mapd-connector.js"></script>
<script src="js/vegaspec.js"></script>
<script src="js/vegademo.js"></script>
<script>
document.addEventListener('DOMContentLoaded', init, false);
</script>
</body>
</html>
JavaScript¶
Working with Polys Tutorial vegademo.js¶
function init() {
var conn = new MapdCon()
.protocol("http")
.host("my.host.com")
.port("9092")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect(function(error, con) {
if (typeof con != 'undefined') {
try {
var results = con.renderVega(1, JSON.stringify(defaultVega));
} catch(e) {
console.log(e.error_msg);
}
var blobUrl = '"data":image/png;base64,' + results.image;
var w=window.open('about:blank','backend-rendered png');
w.document.write("<img src='"+blobUrl+"' alt='backend-rendered png'/>");
}
else
console.log(error);
});
}
Working with Polys Tutorial vegaspec.js¶
const exampleVega = {
"width": 1004,
"height": 336,
"data": [
{
"name": "polys",
"format": "polys",
"sql": "SELECT zipcodes.rowid,AVG(contributions_donotmodify.amount) AS avgContrib FROM contributions_donotmodify,zipcodes WHERE contributions_donotmodify.amount IS NOT NULL AND contributions_donotmodify.contributor_zipcode = zipcodes.ZCTA5CE10 GROUP BY zipcodes.rowid ORDER BY avgContrib DESC"
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": [
-19646150.75527339,
19646150.755273417
],
"range": "width"
},
{
"name": "y",
"type": "linear",
"domain": [
-3071257.58106188,
10078357.267122284
],
"range": "height"
},
{
"name": "polys_fillColor",
"type": "linear",
"domain": [
0, 325, 650, 975,
1300, 1625, 1950, 2275, 2600
],
"range": [
"#115f9a", "#1984c5", "#22a7f0", "#48b5c4",
"#76c68f", "#a6d75b", "#c9e52f", "#d0ee11", "#d0f400"
],
"default": "green",
"nullValue": "#CACACA"
}
],
"marks": [
{
"type": "polys",
"from": {
"data": "polys"
},
"properties": {
"x": {
"scale": "x",
"field": "x"
},
"y": {
"scale": "y",
"field": "y"
},
"fillColor": {
"scale": "polys_fillColor",
"field": "avgContrib"
},
"strokeColor": "white",
"strokeWidth": 0,
"lineJoin": "miter",
"miterLimit": 10
}
}
]
};