Vega Rendering API documentation


#1

Hi all,

I just wanted to note that we just posted our first pass at documentation of our Vega Rendering API. You can use this piece of functionality of the MapD Core database (Community and Enterprise versions, we are working on a binary module to enable this in the open source code) to generate server-side rendered visualizations like the map of fishing boat locations below in your own custom apps.

Please let us know if you have any questions or suggestions for improvement, we’re eager to help!

Todd


#2

Hi Mapd Team i am so much eager to learn all about mapd so i installed mapd in Ubuntu machine and tested in the CURD operation using Sql-editor and i started to learn about the Vega , now Vega rendering the back-end to front end png image.so i gone through your Documentation in “https://www.mapd.com/docs/latest/mapd-core-guide/vegaTutorials/” and i can get the html image like a image template, but its not correct , i don’t know how to render correct image in front end side, for the Reference i am pasting my html page

MapD
<script>
function init() {
  const exampleVega = {
    "width": 600,
    "height": 500,
    "data": [
      {
        "name": "sqldb",
        "sql": "SELECT Latitude as x, Longitude as y , sqldb.rowid FROM  sqldb"
      }
    ],
    "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": "sqldb"
        },
        "properties": {
          "x": {
            "scale": "x",
            "field": "x"
          },
          "y": {
            "scale": "y",
            "field": "y"
          },
          "fillColor": "blue",
          "size": {
            "value": 3
          }
        }
      }
    ]
  };

  var conn = new MapdCon()
    .protocol("http")
     .host("localhost")
     .port("9092")
     .dbName("mapd")
     .user("mapd")
     .password("HyperInteractive")
    .connect(function (error, con) {
        console.log("json  : "+JSON.stringify(exampleVega));
      var results = con.renderVega(1, JSON.stringify(exampleVega));
      var blobUrl = '"data":image/png;base64,' + results.image;
      console.log("Output :"+blobUrl);
      var w=window.open('about:blank','backend-rendered png');
      w.document.write("<img src='" + results.image + "' alt='Mapd Image'/>");
      console.log("CROOT - done!");
    });

  console.log("CROOT - done!");
}

document.addEventListener('DOMContentLoaded', init, false);
</script>

so if i did anything in wrong please guide me. Thank you…


#3

Hi,

Looks like you have moved this to an issue here:

https://github.com/mapd/mapd-connector/issues/30

we will track it there

regards


#4

Thanks for your Response @dwayneberry that post is belongs to me only,even though i am not able to create the image in Vega with mapd could you tell me a where i need to check , for get the correct image from my mapd database data.for the reference i explain my issue in this link (https://github.com/mapd/mapd-connector/issues/30) please have a look and guide me Thank you.