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"}
}
}
]
}
Related
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 am using the following code to plot a bubble plot using vega-lite. I want to transform values as I change the year value using the slider. But it's not working.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Drag the sliders to highlight points.",
"data": {
"url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
"format": {
"type": "tsv"
}
},
"title": {
"text": "Gapminder Global Indicators",
"anchor": "middle",
"fontSize": 16,
"fontWeight": 700
},
"config": {
"axis": {
"titleFontSize": 13,
"titleFontWeight": "bold"
}
},
"params": [{
"name": "CurrentYear",
"value": [{"year": 1977}],
"select": {"type": "point", "fields": ["year"]},
"bind": {
"year": {"input": "range", "min": 1952, "max": 2007, "step": 5}
}
},{
"name": "View",
"select": "interval",
"bind": "scales"
}],
"width": 650,
"height": 400,
"mark": {
"type": "circle",
"opacity": 0.8,
"stroke": "white",
"strokeWidth": 1
},
"encoding": {
"x": {
"field": "gdpPercap",
"type": "quantitative",
"axis": {"grid": false},
"scale": {
"type": "log",
"base": 10
}
},
"y": {
"field": "lifeExp",
"type": "quantitative",
"axis": {"title": ""}
},
"size": {
"field": "pop"
},
"color": {
"field": "continent"
}
}
}
If I add the following tranform block, it doesn't work.
"transform":[{"filter": {"param": "CurrentYear"}}]
I have already tried the following link :
https://vega.github.io/vega-lite/examples/interactive_query_widgets.html
It is because you are reading in your year column as strings, and then using a numerical selection to filter. You can see that the year values are strings in the "Data Viewer" tab. Reading in the data like this works with the transform filter you suggested above:
"data": {
"url": "https://raw.githubusercontent.com/shre2398/InformationVisualization/main/gapminder.tsv",
"format": {
"type": "tsv",
"parse": {"year": "number"}
}
}
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"
}
}
}
]
}
My best attempt at it so far : Direct link to Vega-editor
I created 2 layers with the same data, remove padding for the 'bar' layer and add a step interpolation for the 'line' layer but I can't find a way to make the line starts at the vertical axis and ends at the right of chart.
The spec (sorry I removed lines because StackOverflow doesn't want to let me post it if the ratio text/code is not enough) :
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"datasets": ...,
"width": 1130,
"height": 438,
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.7
},
"encoding": {
"x": {
"scale": {
"padding": 0
},
"field": "Continent",
"type": "nominal"
},
"y": {
"field": "Population",
"type": "quantitative"
}
},
"data": {
"name": "bar"
}
},
{
"mark": {
"type": "line",
"interpolate": "step",
"strokeWidth": 3
},
"encoding": {
"x": {
"axis": {},
"field": "Continent",
"type": "nominal"
},
"y": {
"axis": {},
"field": "Population",
"type": "quantitative"
}
},
"data": {
"name": "line"
}
}
]
}
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.