Esri / Esri/cedar

Integrate Cedar with VegaLite

Open
#93 0 comments 0 reactions 1 assignee Claimed by @ajturner View on GitHub
v0x
Dominant language
Handlebars
Stars
265
Forks
236
PR merge metrics
No merged PRs in 30d

Description

Check out [VegaLite](https://github.com/uwdata/vega-lite) by playing with [Polestar](http://uwdata.github.io/polestar/#/). VegaLite is a high-level language that then generates more complex Vega documents.

So for Cedar - it would be: Cedar -> VegaLite -> Vega

We could leverage this for more expressive charts.

Our API would look like:

``` javascript
var chart = new Cedar({
"type":"bar",
"data": {
{
"url":"http://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Education_WebMercator/MapServer/5",
"fields": {
"x": {"name":"ZIP_CODE", "label":"ZIP Code"},
"y": {"name":"TOTAL_STUD", "aggregate": "sum", "label":"Total Students"}
"row": {},
"column": {},
"size": {},
"shape": {}
}
}
}
});
```

For example - here is a VegaLite Shorthand

`mark=bar|x=When__Phase_of_flight,O|y=Cost__Other,Q`

![pole](https://cloud.githubusercontent.com/assets/1218/7667543/ffe2ceba-fbd9-11e4-969b-c7541eaa2729.png)

And VegaLite JSON.

``` json
{
"data": {"formatType": "json","values": [],"url": "data/birdstrikes.json"},
"enc": {
"x": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"axis": {"grid": true,"title": true,"maxLabelLength": 25},
"band": {"padding": 1},
"sort": [],
"name": "When__Phase_of_flight",
"type": "O"
},
"y": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"axis": {"grid": true,"title": true,"maxLabelLength": 20,"format": ""},
"band": {"padding": 1},
"sort": [],
"name": "Cost__Other",
"type": "Q"
},
"row": {
"bin": false,
"padding": 0.1,
"sort": [],
"axis": {"grid": true,"title": true,"maxLabelLength": 25},
"height": 150,
"grid": true
},
"col": {
"bin": false,
"padding": 0.1,
"sort": [],
"axis": {"grid": true,"title": true,"maxLabelLength": 12},
"width": 150
},
"size": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"legend": true,
"value": 30,
"sort": []
},
"color": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"legend": true,
"value": "steelblue",
"sort": []
},
"alpha": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"sort": []
},
"shape": {"bin": false,"legend": true,"value": "circle","sort": []},
"text": {
"bin": false,
"scale": {"type": "linear","reverse": false,"zero": true},
"text": {"align": "left","baseline": "middle","margin": 4},
"font": {
"weight": "normal",
"size": 10,
"family": "Helvetica Neue",
"style": "normal"
},
"sort": []
},
"detail": {"bin": false,"sort": []}
},
"filter": [],
"config": {
"gridColor": "black",
"gridOpacity": 0.08,
"filterNull": {"O": false,"Q": true,"T": true},
"toggleSort": "O",
"singleHeight": 200,
"singleWidth": 200,
"largeBandSize": 21,
"smallBandSize": 12,
"largeBandMaxCardinality": 10,
"cellPadding": 0.1,
"cellGridColor": "black",
"cellGridOpacity": 0.15,
"cellBackgroundColor": "transparent",
"textCellWidth": 90,
"strokeWidth": 2,
"timeScaleLabelLength": 3,
"characterWidth": 6
},
"marktype": "bar"
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.