Skip to content

Commit 9e01ad5

Browse files
ka7ehlmarini
ka7eh
and
lmarini
authored
Add vega5 previewer (#171)
* Add vega5 previewer * Add support for csv * Rename Vega5 metadata label to vega5-spec * Add an example to vega previewer README * Fixed metadata URL to use the javascript routes so that it supports running clowder under different contexts than root. Co-authored-by: Luigi Marini <[email protected]> Co-authored-by: Luigi Marini <[email protected]>
1 parent 3113358 commit 9e01ad5

File tree

6 files changed

+175
-1
lines changed

6 files changed

+175
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
77
## Unreleased
88

99
### Added
10+
- Added previewer for Vega v5
1011
- Added a new `created` search option for filtering by upload/creation date of resource.
1112

1213
### Fixed

‎CONTRIBUTORS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Following is a list of contributors in alphabetical order:
1616
- Inna Zharnitsky
1717
- Jim Myers
1818
- Jong Lee
19+
- Kaveh Karimi-Asli
1920
- Kenton McHenry
2021
- Luigi Marini
2122
- Mario Felarca

‎app/models/MetadataDefinition.scala‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,12 @@ object MetadataDefinition {
9595
Json.parse("""
9696
{"label":"GeoJSON",
9797
"uri":"http://geojson.org/geojson-spec.html",
98-
"type":"wkt"}""")
98+
"type":"wkt"}"""),
99+
Json.parse("""
100+
{"label":"vega5-spec",
101+
"description": "Visualization specs for Vega v5 or Vega Lite v4",
102+
"uri":"https://vega.github.io/schema/",
103+
"type":"string"}""")
99104
)
100105
// Add the default definitions, do not update if they already exist.
101106
if(metadataService.getDefinitions().size == 0) {

‎public/javascripts/previewers/vega5/README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Vega 5 Previewer
2+
3+
Visualizes data with the given [Vega](https://vega.github.io/vega/) or [Vega Lite](https://vega.github.io/vega-lite/)
4+
specs from the metadata
5+
6+
## How to use:
7+
8+
> Supports Vega v5 and Vega Lite v 4
9+
10+
> Note: Currently, this previewer only works with JSON and CSV data. Check out the examples on [Vega website](https://vega.github.io/vega/examples/) to see how data can be structured.
11+
12+
This previewer is only for files. After uploading your data json or csv file, add `vega5-spec` to its metadata and set its value to
13+
the specs you want to use for visualization.
14+
You need to include a complete and valid vega specs. The only attribute you can omit in the specs is `data.url`
15+
for `vega-lite` and `data[0].url` for `vega`. The url attribute is automatically set to the file url by the previewer.
16+
In the case of `vega`, the previewer assumes the first item in `data` list is the source for the data that come from the file. You can
17+
have more data sources in that list, either pointing to other remote data or a transformation of the file data source.
18+
19+
You can create and test your specs in [Vega Editor](https://vega.github.io/editor/) before adding it to the file
20+
metadata.
21+
22+
After adding the specs to the file metadata, refresh the page. If the specs are valid for the data, then the
23+
visualization should load.
24+
25+
## Example:
26+
27+
Upload the following data as a csv file to a dataset in Clowder:
28+
29+
| date | amount | program | state |
30+
|------|-------------|---------|----------|
31+
| 2010 | 4534553 | P1 | Illinois |
32+
| 2012 | 356554 | P1 | Illinois |
33+
| 2013 | 234234 | P1 | Illinois |
34+
| 2014 | 234654 | P1 | Illinois |
35+
| 2015 | 32434 | P1 | Illinois |
36+
| 2011 | 5656 | P1 | Illinois |
37+
| 2011 | 3806535.05 | P2 | Illinois |
38+
| 2010 | 3063068.92 | P2 | Illinois |
39+
| 2013 | 2249368.86 | P2 | Illinois |
40+
| 2014 | 2110818.23 | P2 | Illinois |
41+
| 2015 | 1801392.49 | P2 | Illinois |
42+
| 2009 | 1443174.99 | P2 | Illinois |
43+
| 2016 | 1415779.09 | P2 | Illinois |
44+
| 2012 | 1187657.01 | P2 | Illinois |
45+
| 2008 | 763992.9 | P2 | Illinois |
46+
| 2017 | 140875.29 | P2 | Illinois |
47+
| 2007 | 15076.35 | P2 | Illinois |
48+
| 2013 | 12318347.12 | P1 | Indiana |
49+
| 2014 | 11855957.24 | P1 | Indiana |
50+
| 2016 | 10131630.65 | P1 | Indiana |
51+
| 2011 | 9641385.14 | P1 | Indiana |
52+
| 2012 | 9579557.84 | P1 | Indiana |
53+
| 2010 | 8432728.5 | P2 | Indiana |
54+
| 2014 | 5945924 | P2 | Indiana |
55+
| 2016 | 5619332 | P2 | Indiana |
56+
57+
Then add the following vega specs under `vega5-spec` metadata for the uploaded file and refresh the page:
58+
59+
```{json}
60+
{
61+
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
62+
"mark": "bar",
63+
"data": {
64+
"format": {
65+
"type": "csv"
66+
}
67+
},
68+
"selection": {
69+
"program": {
70+
"type": "multi",
71+
"fields": [
72+
"program"
73+
],
74+
"bind": "legend"
75+
}
76+
},
77+
"encoding": {
78+
"row": {
79+
"field": "state",
80+
"title": "States"
81+
},
82+
"x": {
83+
"field": "amount",
84+
"title": "Amount",
85+
"type": "quantitative",
86+
"axis": {
87+
"format": ",.0f"
88+
}
89+
},
90+
"y": {
91+
"field": "date",
92+
"title": "Year"
93+
},
94+
"color": {
95+
"field": "program",
96+
"scale": {
97+
"scheme": "category10"
98+
},
99+
"title": "Program",
100+
"legend": {
101+
"orient": "top"
102+
}
103+
},
104+
"opacity": {
105+
"condition": {
106+
"selection": "program",
107+
"value": 1
108+
},
109+
"value": 0.2
110+
},
111+
"tooltip": {
112+
"field": "Amount",
113+
"format": ",.01f"
114+
}
115+
}
116+
}
117+
```

‎public/javascripts/previewers/vega5/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "Vega 5",
3+
"main": "vega5.js",
4+
"file": true,
5+
"contentType": ["application/json", "text/csv"]
6+
}

‎public/javascripts/previewers/vega5/vega5.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
(function ($, Configuration) {
2+
$(document).ready(function () {
3+
// Get file metadata
4+
$.getJSON(jsRoutes.api.Files.getMetadataJsonLD(Configuration.id).url)
5+
.then(function (metadata) {
6+
var vegaMetadata = metadata.find(function (d) {
7+
return !!d.content["vega5-spec"];
8+
});
9+
if (vegaMetadata) {
10+
try {
11+
var vegaSpecs = JSON.parse(vegaMetadata.content["vega5-spec"]);
12+
} catch {
13+
$(Configuration.tab).append('<div>Invalid JSON is provided for Vega specs</div>');
14+
return;
15+
}
16+
// Load data, vega, and vega-lite scripts if `Vega` specs exist in the file metadata
17+
$.when(
18+
$.getScript("https://cdn.jsdelivr.net/npm/vega@5"),
19+
$.getScript("https://cdn.jsdelivr.net/npm/vega-lite@4")
20+
).then(function () {
21+
// vega-embed must be loaded after vega and vega-lite
22+
$.getScript("https://cdn.jsdelivr.net/npm/vega-embed@6").then(function () {
23+
// Set the file url as data source
24+
if (vegaSpecs["$schema"].indexOf("vega-lite") > -1) {
25+
// Vega Lite only accepts one source of data, so we set the JSON data directly as source.
26+
vegaSpecs.data.url = Configuration.url;
27+
} else {
28+
// Vega expects a list of data sources.
29+
// The previewer expects the first item to be used as data source for the uploaded file.
30+
vegaSpecs.data[0].url = Configuration.url;
31+
}
32+
33+
try {
34+
vegaEmbed(Configuration.tab, vegaSpecs);
35+
} catch (error) {
36+
$(Configuration.tab).append('<div>Could not render Vega visualization. See the console for more details.</div>');
37+
console.error(error);
38+
}
39+
});
40+
});
41+
}
42+
});
43+
});
44+
}(jQuery, Configuration));

0 commit comments

Comments
 (0)