how to use date in dd-mm-yy format for x-axis in vega

[hrishikesh B]

Hi,
I am trying to plot a simple line graph of date vs temperature. I have data in a csv file in the following format.
Date, temperature
1-jan-2015, 20.1
3-feb-2015, 31
How to parse date from csv file and use Date for x-axis?
I went thr' index_chart, but it uses date in UTC format. Another article I found it, mentioned about applying data transform as follows.
I tried by specifying date format in parse field while reading the csv file and then applying transformation as below. I just see a horizontal line and no ticks for months/dates where as y-axis is fine.
"transform" : [

{ "type": "formula",

"field" : "ff_dt",

"expr" : "datetime(datum.dt)"

}

]
For me this is a basic use case for plotting and should be easy to do. I must be missing something.
Can someone please help me get a solution for parsing csv file in the above format and plotting the axis.
regards
Hrishikesh

[Roy I]

In the dataset reading the csv file, try specifying parse format for that field as "date" including a format string.

See: https://github.com/vega/vega/wiki/Data

     https://github.com/d3/d3-time-format/

Here is the Vega example "stocks" ( http://vega.github.io/vega-editor/?mode=vega&spec=stocks ) modified using explicit format string for parse date:

  

---------

CSV file "data/stocks.csv"

symbol,date,price

MSFT,Jan 1 2000,39.81

MSFT,Feb 1 2000,36.35

MSFT,Mar 1 2000,43.22

MSFT,Apr 1 2000,28.37

...

---------

Vega 2.6 spec:

...

"data": [

 {

  "name": "stocks",

             "url": "data/stocks.csv",

             "format": {

                         "type": "csv",

                         "parse": {  "price": "number",

                                     "date": "date:\"%b %d %Y\""

                                  }

                        }

           }

],

...

For your data, try reading the csv file with format parse 

      (csv fieldname) : "date:\"%d-%b-%Y\""

Note: For initial testing, omit any other data transforms on this field

[hrishikesh B]

HI,
Thanks for the detailed answer. I am able to progress a bit. Now I can see the x-axis with dates. But still I am not able to get a simple line graph. Below is my json and sample csv file. Could you please tell me what am I missing?  I don't see any errors in browser console.  My followup question would be what are the tips to debug such issues?
regards
Hrishikesh
{
  "width": 700,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 20},
  "data": [
    {
        "name": "table",
        "url":"./data/temp.csv",
        "format": {"type":"csv", "parse":{"date":"date:\"%d-%b-%y\"", "temp":"number"}}

      }
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "nice" : "month",
      "domain": {"data": "table", "field": "date"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "temp"}
    }
  ],
  "axes": [
    {"type": "x","scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "date"},
          "y": {"scale": "y", "field": "temp"}
        }
      }
    }
   ]
}

sample csv data
=====
date,temp
10-May-12,58.13
30-Apr-12,53.98
27-Apr-12,37
26-Apr-12,39.7
25-Apr-12,20
24-Apr-12,30.28
23-Apr-12,16.7
20-Apr-12,34.98
19-Apr-12,34.44

[Roy I]

In Vega v2.6, line color must be specified, e.g. 

          "stroke": {"value": "blue"}

Vega 2.6 spec 

(works in Vega online editor:   http://vega.github.io/vega-editor/?mode=vega )

-----------------

{

  "width": 700,

  "height": 200,

  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 20},

  "data": [

    {

        "name": "table",

        "values": [

                    {"date": "10-May-12", "temp": 58.13},

                    {"date": "30-Apr-12", "temp": 53.98},

                    {"date": "27-Apr-12", "temp": 37},

                    {"date": "26-Apr-12", "temp": 39.7},

                    {"date": "25-Apr-12", "temp": 20},

                    {"date": "24-Apr-12", "temp": 30.28},

                    {"date": "23-Apr-12", "temp": 16.7},

                    {"date": "20-Apr-12", "temp": 34.98},

                    {"date": "19-Apr-12", "temp": 34.44}

                    ],

        "format": {"type":"json", "parse":{"date":"date:\"%d-%b-%y\"", "temp":"number"}}

      }

  ],

  "scales": [

    {

      "name": "x",

      "type": "time",

      "range": "width",

      "nice" : "month",

      "domain": {"data": "table", "field": "date"}

    },

    {

      "name": "y",

      "type": "linear",

      "range": "height",

      "nice": true,

      "domain": {"data": "table", "field": "temp"}

    }

  ],

  "axes": [

    {"type": "x","scale": "x"},

    {"type": "y", "scale": "y"}

  ],

  "marks": [

    {

      "type": "line",

      "from": {"data": "table"},

      "properties": {

        "enter": {

          "x": {"scale": "x", "field": "date"},

          "y": {"scale": "y", "field": "temp"},

          "stroke": {"value": "blue"}

        }

      }

    }

   ]

}

On Thursday, February 9, 2017 at 1:24:11 PM UTC-5, hrishikesh B wrote:

[hrishikesh B]

It works now. Thanks a lot.