Accessing external url of vega data sets
I have embedded Vega and Vega-Lite into my Angular application, and I can display them directly on my own html pages.
Some of the examples I am adopting contain links to external data files, which I have downloaded and installed in my app with npm i vega-datasets as instructed on this page.
Here is an example of an arc diagram that uses the miserables.json file:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An arc diagram depicting character co-occurrence in the novel Les Misérables.",
"width": 770,
"padding": 5,
"data": [
{
"name": "edges",
"url": "../node_modules/vega-datasets/data/miserables.json",
"format": {
"type": "json",
"property": "links"
}
},
{
"name": "sourceDegree",
"source": "edges",
"transform": [
{
"type": "aggregate",
"groupby": [
"source"
]
}
]
},
{
"name": "targetDegree",
"source": "edges",
"transform": [
{
"type": "aggregate",
"groupby": [
"target"
]
}
]
},
{
"name": "nodes",
"url": "../node_modules/vega-datasets/data/miserables.json",
"format": {
"type": "json",
"property": "nodes"
},
"transform": [
{
"type": "window",
"ops": [
"rank"
],
"as": [
"order"
]
},
{
"type": "lookup",
"from": "sourceDegree",
"key": "source",
"fields": [
"index"
],
"as": [
"sourceDegree"
],
"default": {
"count": 0
}
},
{
"type": "lookup",
"from": "targetDegree",
"key": "target",
"fields": [
"index"
],
"as": [
"targetDegree"
],
"default": {
"count": 0
}
},
{
"type": "formula",
"as": "degree",
"expr": "datum.sourceDegree.count + datum.targetDegree.count"
}
]
}
],
"scales": [
{
"name": "position",
"type": "band",
"domain": {
"data": "nodes",
"field": "order",
"sort": true
},
"range": "width"
},
{
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {
"data": "nodes",
"field": "group"
}
}
],
"marks": [
{
"type": "symbol",
"name": "layout",
"interactive": false,
"from": {
"data": "nodes"
},
"encode": {
"enter": {
"opacity": {
"value": 0
}
},
"update": {
"x": {
"scale": "position",
"field": "order"
},
"y": {
"value": 0
},
"size": {
"field": "degree",
"mult": 5,
"offset": 10
},
"fill": {
"scale": "color",
"field": "group"
}
}
}
},
{
"type": "path",
"from": {
"data": "edges"
},
"encode": {
"update": {
"stroke": {
"value": "#000"
},
"strokeOpacity": {
"value": 0.2
},
"strokeWidth": {
"field": "value"
}
}
},
"transform": [
{
"type": "lookup",
"from": "layout",
"key": "datum.index",
"fields": [
"datum.source",
"datum.target"
],
"as": [
"sourceNode",
"targetNode"
]
},
{
"type": "linkpath",
"sourceX": {
"expr": "min(datum.sourceNode.x, datum.targetNode.x)"
},
"targetX": {
"expr": "max(datum.sourceNode.x, datum.targetNode.x)"
},
"sourceY": {
"expr": "0"
},
"targetY": {
"expr": "0"
},
"shape": "arc"
}
]
},
{
"type": "symbol",
"from": {
"data": "layout"
},
"encode": {
"update": {
"x": {
"field": "x"
},
"y": {
"field": "y"
},
"fill": {
"field": "fill"
},
"size": {
"field": "size"
}
}
}
},
{
"type": "text",
"from": {
"data": "nodes"
},
"encode": {
"update": {
"x": {
"scale": "position",
"field": "order"
},
"y": {
"value": 7
},
"fontSize": {
"value": 9
},
"align": {
"value": "right"
},
"baseline": {
"value": "middle"
},
"angle": {
"value": -90
},
"text": {
"field": "name"
}
}
}
}
]
}
The 2 instances of "url": "../node_modules/vega-datasets/data/miserables.json" actually used to be "url": "data/miserables.json" in the online Vega Editor, but since I have copied the content into a file and placed it in my Angular app's assets folder, I modified the path accordingly.
Or at least I think it was done accordingly!
The graphs do not show, so I suspect I am doing the path adjustment wrong.
Could someone please help me understand what I am doing wrong that the graphs do not show?
Here is a screenshot of my Angular project hierarchy:
The datasets are installed in a folder in node_modules/vega-datasets/data/ and my
I read on the vega slack channel that it is (usually) bad practice to serve files from node modules, so make sure to copy them into (for example) your assets folder.
If you do that and copy that json file into your local assets directory, then all you need to do is replace your two urls with the following:
"url": "/assets/miserables.json"
- Navigation customization
- Printing a HTML template as PDF - Angular 2
- Semantic colors in an Angular Material component
- Create component & add it to a specific module with Angular-CLI
- MSAL Angular HTTP interceptor for localhost not attaching token
- Angular: How to get the current locale at runtime when using AOT
- How can I conditionally disable the routerLink attribute?
- How to hide angular version from wappalyzer?
- Designing nested reactive forms from nested classes
- TypeScript update with Angular update from 16 to 17
- Dynamically set the printed page size using '@page'
- Cookie not set in Angular project when calling ASP.NET Core 6 Web API despite Set-Cookie header
- Angular Module Federation NullInjectorError
- Why is drag and drop not working in this PrimeNG tree?
- View not updating when form data changes
- Access a private variable in spec.ts, Angular6
- How to add Pico CSS to your global scss stylesheet in Angular 17?
- How to use Angular async pipe to display errors and loading statuses on route param change?
- How to open a particular menu programmatically if more than one menu element - angular cdk menu
- How to Deploy Angular SSG on IIS
- Density in Angular Material Design for single buttons only
- How to add a button in a mat-select option when an option is selected?
- Can directive set another directives on the same element?
- Firebase - Check if it's the first time signing in
- Why mat-spinner not showing?
- Angular V18, SSR and requests to Firestore
- Add Angular Material to Nx Workspace
- how to best conditional template show in angular 4
- Ionic not destroying pages after leaving it
- PrimeNg Editor is not showing up - Angular