Simple Graph Spec Tutorial

examples

Files	Size	Format	Created	Updated	License	Source
2	212kB	csv zip		5 years ago		CBOE VIX Page

This is an example dataset, that demonstrates how to build the simple and nice graphs using the "Simple Graph Spec". We are using CBOE Volatility Index (VIX) time-series dataset for 2015-2016 as an example to create line and bar charts. Views We assume that you are familiar with what read more

Download Developers

Data Files

Download files in this dataset

File	Description	Size	Last changed	Download
vix-daily		11kB		csv (11kB) , json (30kB)
simple-graph-spec_zip	Compressed versions of dataset. Includes normalized CSV and JSON data with original data and datapackage.json.	16kB		zip (16kB)

vix-daily

This is a preview version. There might be more data in the original version.

Field information

Field Name	Order	Type (Format)
Date	1	date (%Y-%m-%d)
VIXOpen	2	number
VIXHigh	3	number
VIXLow	4	number
VIXClose	5	number

Not found what you're looking for?

You can search over a thousand datasets on datahub

Integrate this dataset into your favourite tool

Use our data-cli tool designed for data wranglers:

data get https://datahub.io/examples/simple-graph-spec
data info examples/simple-graph-spec
tree examples/simple-graph-spec

# Get a list of dataset's resources
curl -L -s https://datahub.io/examples/simple-graph-spec/datapackage.json | grep path

# Get resources

curl -L https://datahub.io/examples/simple-graph-spec/r/0.csv

curl -L https://datahub.io/examples/simple-graph-spec/r/1.zip

If you are using R here's how to get the data you want quickly loaded:

install.packages("jsonlite", repos="https://cran.rstudio.com/")
library("jsonlite")

json_file <- 'https://datahub.io/examples/simple-graph-spec/datapackage.json'
json_data <- fromJSON(paste(readLines(json_file), collapse=""))

# get list of all resources:
print(json_data$resources$name)

# print all tabular data(if exists any)
for(i in 1:length(json_data$resources$datahub$type)){
  if(json_data$resources$datahub$type[i]=='derived/csv'){
    path_to_file = json_data$resources$path[i]
    data <- read.csv(url(path_to_file))
    print(data)
  }
}

Note: You might need to run the script with root permissions if you are running on Linux machine

Install the Frictionless Data data package library and the pandas itself:

pip install datapackage
pip install pandas

Now you can use the datapackage in the Pandas:

import datapackage
import pandas as pd

data_url = 'https://datahub.io/examples/simple-graph-spec/datapackage.json'

# to load Data Package into storage
package = datapackage.Package(data_url)

# to load only tabular data
resources = package.resources
for resource in resources:
    if resource.tabular:
        data = pd.read_csv(resource.descriptor['path'])
        print (data)

For Python, first install the `datapackage` library (all the datasets on DataHub are Data Packages):

pip install datapackage

To get Data Package into your Python environment, run following code:

from datapackage import Package

package = Package('https://datahub.io/examples/simple-graph-spec/datapackage.json')

# print list of all resources:
print(package.resource_names)

# print processed tabular data (if exists any)
for resource in package.resources:
    if resource.descriptor['datahub']['type'] == 'derived/csv':
        print(resource.read())

If you are using JavaScript, please, follow instructions below:

Install data.js module using npm:

  $ npm install data.js

Once the package is installed, use the following code snippet:

const {Dataset} = require('data.js')

const path = 'https://datahub.io/examples/simple-graph-spec/datapackage.json'

// We're using self-invoking function here as we want to use async-await syntax:
;(async () => {
  const dataset = await Dataset.load(path)
  // get list of all resources:
  for (const id in dataset.resources) {
    console.log(dataset.resources[id]._descriptor.name)
  }
  // get all tabular data(if exists any)
  for (const id in dataset.resources) {
    if (dataset.resources[id]._descriptor.format === "csv") {
      const file = dataset.resources[id]
      // Get a raw stream
      const stream = await file.stream()
      // entire file as a buffer (be careful with large files!)
      const buffer = await file.buffer
      // print data
      stream.pipe(process.stdout)
    }
  }
})()

Read me

This is an example dataset, that demonstrates how to build the simple and nice graphs using the “Simple Graph Spec”. We are using CBOE Volatility Index (VIX) time-series dataset for 2015-2016 as an example to create line and bar charts.

Views

We assume that you are familiar with what datapackage.json is and its specifications.

To create graphs for your tabular data, the datapackage.json should include the views attribute that is responsible for visualizations.

“Simple Graph Spec” is the quickest and easiest way to build a graph. To use it, inside views you should set specType to simple and define some graph specifications in spec property. See example datapackage.json:

{
  "name": "simple-graph-spec",
  "title": "Simple Graph Spec Tutorial",
  "sources": [{
    "name": "CBOE VIX Page",
    "web": "http://www.cboe.com/micro/vix/historical.aspx"
  }],
  "resources": [
    {
      "name": "vix-daily",
      "path": "data/vix-daily.csv",
      "format": "csv",
      "mediatype": "text/csv",
      "schema": {
        "fields": [
          {
            "name": "Date",
            "type": "date",
            "description": ""
          },
          {
            "name": "VIXOpen",
            "type": "number",
            "description": ""
          },
          {
            "name": "VIXHigh",
            "type": "number",
            "description": ""
          },
          {
            "name": "VIXLow",
            "type": "number",
            "description": ""
          },
          {
            "name": "VIXClose",
            "type": "number",
            "description": ""
          }
        ],
        "primaryKey": "Date"
      }
    }
  ],
  "views": [
    {
      "name": "simple-view-line",
      "title": "tutorial-on-simple-views-line",
      "resources": ["vix-daily"],
      "specType": "simple",
      "spec": {
        "type": "line",
        "group": "Date",
        "series": ["VIXHigh", "VIXLow"]
      }
    },
    {
      "name": "simple-view-bar",
      "title": "tutorial-on-simple-views-bar",
      "resources": ["vix-daily"],
      "specType": "simple",
      "spec": {
        "type": "bar",
        "group": "Date",
        "series": ["VIXOpen", "VIXOpen", "VIXHigh", "VIXLow"]
      }
    }
  ]
}

Only 3 properties enough to define graph specifications inside spec property:

Attribute	Type	Description
type	String	line, bar, pie (defaults to line)
group	String	Field name, that will be used as abscissa (usually date field)
series	Array	Field name(s) that will be used as ordinate

You can define multiple views for your dataset. For example, to display line graph as presented above, we defined graph type to be a line:

  ...
  "spec": {
    "type": "line",
    ...
  }

Similarly to display bar chart we’ve used bar type:

  ...
  "spec": {
    "type": "bar",
    ...
  }

We use Date field to display data over time, by setting group attribute to the field name:

  ...
  "spec": {
    ...
    "group": "Date",
    ...
  }

You can set any number of fields to display in series attribute as an array:

  ...
  "spec": {
    ...
    "series": [
      "VIXHigh",
      "VIXLow"
    ]
 }

In our case we’ve displayed line graph for VIXHigh and VIXLow and similarly, in the bar chart, we use all four series and all of them are presented in chart.

Outside of spec attribute there are some other important parameters to note:

Attribute	Type	Description
name	String	Unique identifier for view within list of views (lines 51 and 62)
title	String	Title for the graph (lines 52 and 63)
resources	Array	Data sources for this spec. It can be either resource name or index. By default it is the first resource (lines 53 and 64)
specType	String	Available options: simple, vega, plotly (Required)