I'm rendering some data onto a map using vega-lite. Currently, I have this schema, which renders the attached image:
{
"title": "What's the nearest city to you?",
"data": {
"values": "...",
"format": {
"type": "csv"
}
},
"encoding": {},
"projection": {
"type": "mercator"
},
"layer": [
{
"data": {
"values": "...",
"format": {
"type": "topojson",
"feature": "world-borders"
}
},
"mark": {
"type": "geoshape",
"fill": "lightgrey",
"stroke": "darkgrey"
},
"width": 800,
"height": 600
},
{
"mark": {
"type": "circle",
"size": 50
},
"encoding": {
"latitude": {
"field": "latitude",
"type": "quantitative"
},
"longitude": {
"field": "longitude",
"type": "quantitative"
},
"color": {
"field": "count",
"type": "quantitative",
"scale": {
"range": [ "#f0f921", "#fcce25", "#fca636", "#f2844b", "#e16462", "#cc4778", "#b12a90", "#8f0da4", "#6a00a8", "#41049d", "#0d0887" ]
}
},
"size": {
"field": "count",
"type": "quantitative"
}
}
}
]
}
Now this looks pretty nice overall! I'm happy with it! But I would really like to be able to provide a rendered image zoomed into the densest areas of data, specifically Europe and the continental US. I've tried everything I can think of as specified in the vega and vega-lite documentation to no avail (all the properties I try have been weird—like rendering all the circles at a single pixel or just clipping the map.)
What I'd really like is just a way to say "show me a view of data+map between lat°long° and lat°long°", but nothing jumps out at me as being designed for that purpose. How can I do this?
In the current Vega-Lite release, panning and zooming are not available for geographic projections. See https://github.com/vega/vega-lite/issues/3306 for more details.
Related
I am using this map https://vega.github.io/vega-lite/examples/geo_layer.html and I'm wondering if there is a zoom function in principle here? Found nothing in docs.
You can zoom the map manually by changing the scale factor of the projection as below. To actually bind this to mouse scroll is not currently supported as far as I'm aware. There is an open issue here you can rad about: https://github.com/vega/vega-lite/issues/3306
If I were you, I'd just use Vega and there is already an example here: https://vega.github.io/vega/examples/zoomable-world-map/
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 500,
"height": 300,
"layer": [
{
"data": {
"url": "data/us-10m.json",
"format": {
"type": "topojson",
"feature": "states"
}
},
"projection": {
"type": "albersUsa", "scale":300
},
"mark": {
"type": "geoshape",
"fill": "lightgray",
"stroke": "white"
}
},
{
"data": {
"url": "data/airports.csv"
},
"projection": {
"type": "albersUsa", "scale":300
},
"mark": "circle",
"encoding": {
"longitude": {
"field": "longitude",
"type": "quantitative"
},
"latitude": {
"field": "latitude",
"type": "quantitative"
},
"size": {"value": 10},
"color": {"value": "steelblue"}
}
}
]
}
I'm still very much a beginner in vega-lite but I'm trying to create a stacked bar chart with different sales channels. Sometimes a sales channel has a 0 and doesn't show up, how can I still show the label?
{
"layer": [
{
"mark": {
"type": "bar",
"cornerRadius": 50,
"color": "#90C290",
"tooltip": true
},
"encoding": {
"x": {
"field": "Number of customers"
}
}
},
{
"mark": {
"type": "text",
"tooltip": true,
"align": "left",
"baseline": "middle",
"x": 10,
"color": "white"
},
"encoding": {
"text": {
"field": "Number of customers",
"type": "text"
}
}
}
],
"encoding": {
"y": {
"field": "Sales channel",
"type": "nominal",
"sort": "descending",
"title": null
},
"x": {
"type": "quantitative",
"title": null,
"axis": null
}
}
}
I tried the code above and looked through documentation but couldn't exactly find what I was looking for
I added sample data to your spec, and there are a few changes I would make.
Around line 29 you have "type": "text" which should be "type": "quantitative".
I think your problem is that the text color is white and the background color is white, so the text is there but you can't see it. A simple fix would be to set the text color to black, or change the background color to something other than white (add "background": "lightgray", before "layer").
It's also possible you don't see the channel at all depending on how you are passing data from Power BI. Check the data tab in the Deneb window to make sure the Channel is there.
If the channel is not there, you'll have to adjust something on the Power BI side. A good practice is to put the data in a table in Power BI first so you know what you are sending into Deneb. If you use an aggregation like SUM on the data field in Power BI, nulls will drop out, but zeros should stay. If you use "Don't summarize" then nulls or errors (text in a number field) will pass in as nulls to Deneb, but you may need to add an "aggregate": "sum" to your encoding.
In any case, here's the spec the way I would write it.
{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"cornerRadius": 50,
"color": "#90C290",
"tooltip": true
}
},
{
"mark": {
"type": "text",
"tooltip": true,
"align": "left",
"baseline": "middle",
"dx": 5,
"color": "black"
},
"encoding": {
"text": {
"field": "Number of customers",
"type": "quantitative"
}
}
}
],
"encoding": {
"y": {
"field": "Sales channel",
"type": "nominal",
"sort": "descending",
"title": null
},
"x": {
"field": "Number of customers",
"type": "quantitative",
"title": null,
"axis": null
}
}
}
Link to sample data in Vega Editor
I want to use "Vega Lite" to achieve the faceted nesting effect similar to tableau. Although "Vega Lite" can also be achieved, the display effect is not satisfactory, which is mainly reflected in that each sub chart has its own coordinate axis label, and the information density is not high. Tableau is much more compact.
This is an example of tableau:
This is an example of vega-lite:
{
"data": {"url": "https://uniplore-source.oss-cn-chengdu.aliyuncs.com/other/orders2.csv"},
"spacing": 0,
"facet": {"row": {"field": "快递方式","type": "nominal",
"header":{"labelExpr": "null"}
}},
"spec": {
"facet": {"column": {"field": "类别","type": "nominal","header":{"labelExpr": "null"}}},
"spacing": 0,
"spec": {
"spacing": 0,
"facet": {
"column": {
"field": "子类别","type": "nominal"
}
},
"spec": {
"facet": {
"column": {
"field": "细分","type": "nominal"
}
},
"spec": {
"mark": "bar",
"spacing": 0,
"encoding": {
"x": {
"field": "细分","type": "nominal"
},
"y": {"aggregate": "sum","field":"销售额"}
}
}
}
}
}
}
You can view my example here.
In fact, the same amount of information can not be displayed on one screen with Vega Lite.
I have tried some configurations, but the effect is not obvious.
I want to know if there is any way Vega Lite can achieve the display effect of tableau.
The most important of these is shared labels.
Thank you.
If you mean shared axes, then you can do this using facet.
https://vega.github.io/vega-lite/docs/facet.html
Edit 1
Editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"name": "trellis_barley",
"description": "The Trellis display by Becker et al. helped establish small multiples as a “powerful mechanism for understanding interactions in studies of how a response depends on explanatory variables”. Here we reproduce a trellis of Barley yields from the 1930s, complete with main-effects ordering to facilitate comparison.",
"data": {"url": "data/barley.json"},
"mark": "point",
"height": {"step": 12},
"encoding": {
"facet": {
"spacing": {"row": -40},
"field": "site",
"type": "ordinal",
"columns": 2,
"sort": {"op": "median", "field": "yield"},
"header":{"labelExpr": "null"}
},
"x": {
"aggregate": "median",
"field": "yield",
"type": "quantitative",
"scale": {"zero": false}
},
"y": {"field": "variety", "type": "ordinal", "sort": "-x"},
"color": {"field": "year", "type": "nominal"}
}
}
Here's my wandb vega. The problem is, right now, it is very hard to mouse over my line and get the tooltip to show. It is like you must hover over the exact pixel of the line with your mouse. How do I make the activation radius larger, so my tooltip shows up if I am approximately on top of the point of my line?
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A plot for an arbitrary number of lines",
"data": {
"name": "wandb"
},
"transform": [
{"filter": {"field": "${field:lineVal}", "valid": true}},
{"filter": {"field": "${field:step}", "valid": true}}
],
"title": "${string:title}",
"layer": [
{
"selection": {
"grid": {
"type": "interval",
"bind": "scales"
}
},
"mark": {"type": "line", "strokeWidth": 5, "interpolate": "linear", "tooltip": true},
"encoding": {
"x":{
"field": "${field:step}",
"type": "quantitative",
"title": "${string:xname}"
},
"y": {
"field": "${field:lineVal}",
"title": "y",
"type": "quantitative"
},
"color": {
"type": "nominal",
"field": "${field:lineKey}"
},
"strokeDash": {
"type": "nominal",
"field": "name"
}
}
}
]
}
You haven't provided the data along with your schema so it is difficult to answer your specific case. However, you should be able to adapt the example code from https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html to achieve what you want.
I have this spec : Direct-link to spec
I would like to make the tick as large as the bar in a generic way (If the size of the view change I’d like that the width of the tick changes as well). Is it a way to do this ? By doing some transform or accessing some hidden variable (stepWidth ?) ? I don’t want to set my view size by setting the step size because I want that my chart fits in an already defined DOM element.
I am not aware of any way to configure tick marks in this way. But one way to achieve what you want is to overlay a zero-height bar with the stroke (i.e. outline) configured to look how you want. For example (vega editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"datasets": {
"$ly1": [
{
"Continent": "Asia",
"Population": 4467162
},
{
"Continent": "Europe",
"Population": 622209
},
{
"Continent": "Africa",
"Population": 1157519
},
{
"Continent": "Oceania",
"Population": 36944
},
{
"Continent": "North America",
"Population": 564626
},
{
"Continent": "Antarctica",
"Population": 6
},
{
"Continent": "South America",
"Population": 410308
}
]
},
"data": {
"name": "$ly1"
},
"autosize": {
"type": "fit",
"contains": "padding"
},
"width": {"step": 60},
"encoding": {
"x": {
"field": "Continent",
"type": "nominal"
},
"y": {
"field": "Population",
"type": "quantitative"
}
},
"layer": [
{
"mark": {
"type": "bar",
"color": "#ccc"
}
},
{
"mark": {
"type": "bar", "strokeWidth": 3
},
"encoding": {
"y2": {"field": "Continent"},
"stroke" : {
"field": "Continent",
"type": "nominal"
},
"color" : {
"field": "Continent",
"type": "nominal"
}
}
}
]
}