No "size"encoding in geoshape?

113 views
Skip to first unread message

barend...@gmail.com

unread,
Oct 24, 2018, 7:40:27 AM10/24/18
to vega-js
I really like Vega-lite, but for using it for geo visualisations (ie. maps) I am sorely missing the possibility to encode lines with size. 
AFAIK that is not possible in the current version. At least not the way I supposed it would work.

As you can test out on https://kartoweb.itc.nl/kobben/Vega-Lite/VL-loader.html?VegaLiteFile=overijssel_lines_proportional.json :

{
  "width": 700,
  "height": 600,
  "padding": 20,
  "config": {
    "view": {
      "stroke": "none"
    }
  },
  "data": {
    "url": "./data/overijssel_roads.geo.json",
    "format": {
      "type": "json",
      "property": "features"
    }
  },
  "projection": {
    "type": "stereographic"
  },
  "layer": [
    {
      "mark": {
        "type": "geoshape",
        "stroke": "red",
        "color": "red"
      },
      "encoding": {
        "size": {
          "field": "properties.vehicles_per_hour",
          "type": "quantitative"
          }
        }
      }
    }
  ]
}

Gives me "vega...@3.0.0-rc6.min.js:1 WARN size dropped as it is incompatible with "geoshape"."

Is there something I am missing or a workaround? 

Barend Köbben

Dominik Moritz

unread,
Oct 24, 2018, 8:57:08 AM10/24/18
to barend...@gmail.com, vega-js
This is not supported right now in geo because it's not clear in general what to map size to in Vega. If you have a proposal, please suggest it in an issue on the Vega-Lite repo. 

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

b.j.k...@utwente.nl

unread,
Oct 24, 2018, 9:38:59 AM10/24/18
to domo...@gmail.com, barend...@gmail.com, veg...@googlegroups.com

Hi Dominik,

 

Before I can file an issue, I want to better understand your question/remark. What do you mean if you say it “is not clear what to map size to”...?

Surely if you have linear features in a geoshape, size maps to the (SVG) strokeWidth of the line, creating a so-called “flow map”... See e.g. https://en.wikipedia.org/wiki/Flow_map .

 

This is also useful in n0n-geo charts, eg. Sankey diagrams (https://kartoweb.itc.nl/kobben/D3tests/LandGrabbing/flowdiagram.html ) but I guess that can be achieved in vega-lite (with trail, or line marks...?)

 

 

Or am I missing something?

 

 

--

Barend Köbben

Roy I

unread,
Oct 24, 2018, 10:43:46 AM10/24/18
to vega-js
To "encode lines with size", do you mean the thickness of the lines? If so, try adding property "strokeWidth":

screenshot_vegaLite_strokeWidth.png

Vega-Lite (v3.0.0 rc6)
-----------------------------
...
"layer": [
{
"mark": {
"type": "geoshape",
"stroke": "red",
"color": "red",

"strokeWidth": 5
},

Roy I

unread,
Oct 24, 2018, 2:02:47 PM10/24/18
to vega-js
I understand now that what you mean by "encode lines with size" is to show the lines (roads in your data) with widths that vary depending on value of a data field (e.g. properties.vehicles_per_mile).

Here is a working example in Vega (not Vega-Lite) that works with your data. It uses a mark group with data facet so that stroke width and color can be controlled for each line segment (road). In this example, the line width represents road_type and the color represents vehicles_per_hour.

  

screenshot_Vega_geo_line_color_thickness.png



Vega v4.3.0
--------------------
{
  "autosize": "pad",
  "padding": 20,
  "width": 700,
  "height": 600,
  "style": "cell",
  "data": [
    {
      "name": "data_source",
      "format": {"type": "json", "property": "features"}
    }
  ],
  "projections": [
    {
      "name": "projection",
      "size": {"signal": "[width, height]"},
      "fit": {"signal": "data('data_source')"},
      "type": "stereographic"
    }
  ],
  
  "scales": [
    {
        "name": "scale_vehicle_density_line_thickness",
        "type": "ordinal",
        "domain": ["major road", "highway"],
        "range": [6, 10]
    },
    {
        "name": "scale_vehicle_density_line_color",
        "type": "sequential",
        "domain": { "data": "data_source",
                    "field": "properties.vehicles_per_hour"
                  },
        "range": {"scheme": "oranges"}
    }  
  ],
  
  "marks": [
    {
      "type": "group",
      "from": {
         "facet": {
            "name": "data_facet",
            "data": "data_source",
            "groupby": ["properties.road_name"]
         }
      },
      
      "marks": [
        {
          "type": "shape",
          "style": ["geoshape"],
          "from": {"data": "data_facet"},
          "encode": {
            "update": {

              "stroke": {  "scale": "scale_vehicle_density_line_color",
                            "field": "properties.vehicles_per_hour"
                        },
                        
              "strokeWidth": {  "scale": "scale_vehicle_density_line_thickness",
                                "field": "properties.road_type"
                              },
                        
              "tooltip": {"signal": "datum.properties"}
              }
            },
            
          "transform": [{"type": "geoshape", "projection": "projection"}]
        }
    ]
    }  
  ]
}



On Wednesday, October 24, 2018 at 7:40:27 AM UTC-4, barend...@gmail.com wrote:

barend...@gmail.com

unread,
Oct 25, 2018, 8:31:45 AM10/25/18
to vega-js
Thank your for your patience and help. I took some time studying your example, and tried to bring it back to its bare minimum, showing only the desired encoding of a quantitative data in line widths (see code below). 

I did not use Vega before (only vega-lite) and am left with several questions:
- the scaling : I now use use the : "type": "linear", but unlike your example with ordinal scale, it seems I have to provide range AND domain. Without domain nothings shows, are there no defaults as there seem to be for ordinal scale ([min, max] for domain eg.)? The lack of that makes 'automated' mapping impossible...
- the facet - groupBy thing puzzles me. Where can I read a good description of it, and why is it necessary anyway?

It is nice now to have a working example in Vega, but that does not help my Vega-lIte application...It does seem that implementing the same in Vega-Lite should be do-able. Any reason why it was not done? What would be needed to make this work in Vega-Lite, is it worth filing a feature request fro that?


{
"autosize": "pad",
"padding": 20,
"width": 700,
"height": 600,
"style": "cell",
"data": [
{
"name": "data_source",
"format": {"type": "json", "property": "features"}
}
],
"projections": [
{
"name": "projection",
"size": {"signal": "[width, height]"},
"fit": {"signal": "data('data_source')"},
"type": "stereographic"
}
],
"scales": [
{
"name": "scale_vehicle_density_line_thickness",
"type": "linear",
"domain": [0,2563],
"range": [0, 30]
}
],
"marks": [
{
"type": "group",
"from": {
"facet": {
"name": "data_facet",
"data": "data_source",
"groupby": ["properties.vehicles_per_hour"]
}
},
"marks": [
{
"type": "shape",
"style": ["geoshape"],
"from": {"data": "data_facet"},
"encode": {
"update": {
"strokeWidth": { "scale": "scale_vehicle_density_line_thickness",
"field": "properties.vehicles_per_hour"

Dominik Moritz

unread,
Oct 25, 2018, 11:06:22 AM10/25/18
to barend...@gmail.com, vega-js
Thank you, Roy and Barend,

I believe we just overlooked mapping size in Vega-Lite to strokeWidth in Vega. It would be great if you could file an issue with a minimal example. Even better, send us a PR afterward to fix this in the compiler ;-)

Best,
Dominik

--

Roy I

unread,
Oct 25, 2018, 11:52:45 AM10/25/18
to vega-js
The Vega-Lite example "London Tube Lines" is similar to your example data, so another option for your data is to use Vega-Lite geoshape with color for the roads instead of line thickness:

Note: Geojson files can include features that are points, lines or polygons. I think what Dominik Moritz (Vega-Lite core developer) means by "it's not clear in general what to map size to in Vega" is what is the meaning of Vega-Lite's "size" in geo data with these features. Perhaps Vega-Lite can allow "strokeWidth" in geoshape to reference fieldname and scale. You can submit a feature request for Vega-Lite at:

Regarding the example Vega spec, it turns out for your example data, it is not necessary to use marks group facet and groupby. Here is a simpler Vega spec that works the way you described with line thickness and without color scale.

screenshot_vega_geoshape_line_thickness.png



Vega v4.3.0 spec
---------------- 
{
"autosize": "pad",
"padding": 20,
"width": 700,
"height": 600,
"format": {
"type": "json",
"property": "features"
}
}
],
"projections": [
{
"name": "projection",
"size": {
"signal": "[width, height]"
},
"fit": {
"signal": "data('data_source')"
}
}
],
"scales": [
{
"name": "scale_vehicle_density_line_thickness",
"type": "linear",
"domain": {
"data": "data_source",
"field": "properties.vehicles_per_hour"
},
"range": [0, 30]
}
],
"marks": [
{
"type": "shape",
"from": {
"data": "data_source"
},
"encode": {
"update": {
"strokeWidth": {
"scale": "scale_vehicle_density_line_thickness",
"field": "properties.vehicles_per_hour"
},
"tooltip": {
"signal": "datum.properties"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
}
]
}

On Wednesday, October 24, 2018 at 7:40:27 AM UTC-4, barend...@gmail.com wrote:

b.j.k...@utwente.nl

unread,
Oct 25, 2018, 4:06:11 PM10/25/18
to domo...@gmail.com, barend...@gmail.com, veg...@googlegroups.com

Hi Dominik,

 

After the weekend I will file an issue with an example. I am afraid you overrate my abilities in asking me to “send a PR afterward”, don’t even know for sure what that means (pull request? But that would imply I’d fix the issue myself, don’t hold your breath on that...!)

 

Yours,

--

Barend Köbben

ilia timofeev

unread,
Oct 25, 2018, 5:06:47 PM10/25/18
to b.j.k...@utwente.nl, domo...@gmail.com, barend...@gmail.com, veg...@googlegroups.com
I believe that strokeWidth encoding channel would be a better solution. I hope that size will associate with relative area of the geoshape, that will allow to make some funny things. 
Currently you can use layers and filters to select subsets of lines you need to be drawn with different strokeWidth. See my example in   Vega Editor

чт, 25 окт. 2018 г. в 23:06, <b.j.k...@utwente.nl>:
Reply all
Reply to author
Forward
0 new messages