Published
Edited
May 16, 2020
Insert cell
Insert cell
MapdCon = {
return require("https://rawgit.com/mapd/mapd-connector/master/dist/browser-connector.js").catch(() => window.MapdCon);
}
Insert cell
Insert cell
connector = new Promise((resolve, reject) => (new MapdCon())
.protocol("https")
.host("metis.mapd.com")
.port("443")
.dbName("mapd")
.user("mapd")
.password("HyperInteractive")
.connect((error, connector) => {
if (error) console.log(error) || reject(error);
else resolve(connector);
}))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
img = {
var mapdVega = {
width: 1410,
height: 399,
data: [
{
name: 'points',
sql
}
],
scales: [
{
name: 'x',
type: 'linear',
domain: [
-20037508.34004,
20037508.34004
],
range: 'width'
},
{
name: 'y',
type: 'linear',
domain: [
-2166638.6872511,
9173738.3733072
],
range: 'height'
},
{
name: 'points_size',
type: 'linear',
domain: [
0,
5000
],
range: [
1,
5
],
clamp: true
},
{
name: 'points_fillColor',
type: 'ordinal',
domain: ordDomains,
range: colors,
'default': '#80DEEA',
nullValue: '#CACACA'
}
],
marks: [
{
type: 'points',
from: {
data: 'points'
},
properties: {
x: {
scale: 'x',
field: 'x'
},
y: {
scale: 'y',
field: 'y'
},
size: {
scale: 'points_size',
field: 'size'
},
fillColor: {
scale: 'points_fillColor',
field: 'color'
}
}
}
]
}
var data = connector.renderVega(0, JSON.stringify(mapdVega))
var blobUrl = "data:image/png;base64," + data.image
return blobUrl
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more