chiasm-dsv-dataset

chiasm-dsv-dataset

A Chiasm component that loads delimiter separated value (DSV) data tables. This is a thin wrapper around the dsv-dataset module, which is a metadata specification and parsing library for data sets. Take a look at the unit test for example usage. When a "path" property is specified, the component appends ".csv" and ".json" to it and uses an XMLHttpRequest to fetch those two paths. The ".csv" fils should contain a data table, and the ".json" file should contain metadata about the table including column types.

Example use:

The following script will set up the component in a Chiasm application:

var chiasm = Chiasm();
chiasm.plugins.dsvDataset = ChiasmDsvDataset;
chiasm.setConfig({
  dsv: {
    plugin: "dsvDataset",
    state: {
      path: "http://bl.ocks.org/curran/raw/b6e1d23c16dc76371a92/iris"
    }
  }
});

Here are a few sample lines from http://bl.ocks.org/curran/raw/b6e1d23c16dc76371a92/iris.csv:

sepal_length,sepal_width,petal_length,petal_width,class
5.3,3.7,1.5,0.2,setosa
5.7,2.8,4.1,1.3,versicolor
5.8,2.7,5.1,1.9,virginica

Here is the content of http://bl.ocks.org/curran/raw/b6e1d23c16dc76371a92/iris.json:

{
  "columns": [
    { "name": "sepal_length", "type": "number", "label": "Sepal Length" },
    { "name": "sepal_width",  "type": "number", "label": "Sepal Width" },
    { "name": "petal_length", "type": "number", "label": "Petal Length" },
    { "name": "petal_width",  "type": "number", "label": "Petal Width" },
    { "name": "class",        "type": "string", "label": "Species" }
  ]
}

The following code will print out the parsed table:

chiasm.getComponent("dsv").then(function (dsv){
  dsv.when("dataset", function (dataset){
    console.log(dataset);
  });
});

The following JSON will be printed:

[
  {
    "sepal_length": 5.1,
    "sepal_width": 3.5,
    "petal_length": 1.4,
    "petal_width": 0.2,
    "class": "setosa"
  },
  {
    "sepal_length": 6.2,
    "sepal_width": 2.9,
    "petal_length": 4.3,
    "petal_width": 1.3,
    "class": "versicolor"
  },
  {
    "sepal_length": 6.3,
    "sepal_width": 3.3,
    "petal_length": 6,
    "petal_width": 2.5,
    "class": "virginica"
  },
  ... more rows of data ...
]

Notice how numeric columns have been parsed to numbers.

To see how this component can be used to fetch data for visualizations, check out this Magic Bar Chart example.