Is there a way to add visual patters (like stripes) to marks in vega 2?

Maryam Booshehrian

unread,

Nov 7, 2018, 2:17:23 PM11/7/18

to vega-js

Hi,

I'm trying to add diagonal stripes to bars in my chart, but I cannot find a way to do it.

Thanks

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

unread,

Nov 8, 2018, 3:19:10 AM11/8/18

to maryam.bo...@gmail.com, veg...@googlegroups.com

Yes, you can use SVG patterns, see eg. https://kartoweb.itc.nl/kobben/Vega-Lite/VL-loader.html?VegaLiteFile=NaT.json

--

Barend Köbben

--
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,

Nov 8, 2018, 4:28:46 AM11/8/18

to maryam.bo...@gmail.com, veg...@googlegroups.com

Additionally, you can find my code at https://github.com/kobben/Vega-Lite

--

Barend Köbben

Maryam Booshehrian

unread,

Nov 8, 2018, 10:04:53 AM11/8/18

to vega-js

Thanks Barend, but this Vega Lite. I'm using Vega, not the Lite version. I was looking at the vega json, but didn't see any pattern definition as part of the JSON. How can I define customize patterns?

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

unread,

Nov 8, 2018, 10:17:27 AM11/8/18

to maryam.bo...@gmail.com, veg...@googlegroups.com

Hi Maryam,

What works in Vega-Lite invariably works in Vega too. The vega-lite gets transformed into Vega, then into D3/SVG. You can see that by loading Vega-Lite in the online editor (https://vega.github.io/editor/#/custom/vega-lite ) and see the Vega created from that...

Define custom patterns in SVG, either ‘by hand’ or using the SVG patternfills project (http://iros.github.io/patternfills/), the resulting patterns can be used in Vega-Lite/Vega by using a color fill value such as "url(#circles-2)"

The url points to a SVG fill <def> defined in the enbedding html file, such as

<defs>

</image>

</pattern>

</defs>

</svg>

Hope that explains things

Roy I

unread,

Nov 8, 2018, 12:11:41 PM11/8/18

to vega-js

Thanks to Barend Köbben for sharing the HTML and Vega-Lite code.

Here is a complete working example (HTML, svg and javascript) of Vega v4 "Stacked Bar Chart" using Pattern Fill svg code by Irene Ros:

https://vega.github.io/vega/examples/stacked-bar-chart/

http://iros.github.io/patternfills/sample_d3.html

Note: Not sure if it is possible or how to change color of shading patterns from within Vega spec.

Html and Vega v4.3.0

------------------------

<!DOCTYPE html>

<html>

<head>

<title>Test Vega4 SVG Fill Patterns </title>

</head>

<body>

</body>

var vega4_spec =

{

"$schema": "https://vega.github.io/schema/vega/v4.json",

"width": 500,

"height": 200,

"padding": 5,

"data": [

{

"name": "table",

"values": [

{"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1},

{"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1},

{"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1},

{"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1},

{"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1},

{"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1},

{"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1},

{"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1},

{"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1},

{"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1}

],

"transform": [

{

"type": "stack",

"groupby": ["x"],

"sort": {"field": "c"},

"field": "y"

}

]

}

],

"scales": [

{

"name": "x",

"type": "band",

"range": "width",

"domain": {"data": "table", "field": "x"}

},

{

"name": "y",

"type": "linear",

"range": "height",

"nice": true, "zero": true,

"domain": {"data": "table", "field": "y1"}

},

{

"name": "color",

"type": "ordinal",

"range": ["url(#diagonal-stripe-2)", "url(#circles-1)"],

"domain": {"data": "table", "field": "c"}

}

],

"axes": [

{"orient": "bottom", "scale": "x", "zindex": 1},

{"orient": "left", "scale": "y", "zindex": 1}

],

"marks": [

{

"type": "rect",

"from": {"data": "table"},

"encode": {

"enter": {

"x": {"scale": "x", "field": "x"},

"width": {"scale": "x", "band": 1, "offset": -1},

"y": {"scale": "y", "field": "y0"},

"y2": {"scale": "y", "field": "y1"},

"fill": {"scale": "color", "field": "c"}

},

"update": {

"fillOpacity": {"value": 1}

},

"hover": {

"fillOpacity": {"value": 0.5}

}

]

};

var vegaRuntime = vega.parse(vega4_spec);

var vegaView = new vega.View(vegaRuntime)

.logLevel(vega.Warn)

.initialize("#vis")

.renderer('svg')

.hover()

.run();

</script>

</html>

Dimitris Giannopoulos

unread,

Nov 8, 2018, 1:22:37 PM11/8/18

to vega-js

This works on hover too. Thanks a lot!

Maryam Booshehrian

unread,

Nov 8, 2018, 1:54:44 PM11/8/18

to vega-js

Thanks Roy! How about charts not using svg, but canvas?

Dimitris Giannopoulos

unread,

Nov 8, 2018, 1:54:49 PM11/8/18

to vega-js

That would be a nice feature to have. Until then, CSS pattern generators like http://www.patternify.com/ could provide alternative source for patterns.

Dimitris Giannopoulos

unread,

Nov 22, 2018, 3:57:10 AM11/22/18

to vega-js

This approach, unfortunately, does not work with the canvas renderer.

pbar...@gmail.com

unread,

Mar 5, 2019, 1:08:50 AM3/5/19

to vega-js

By any chance have you made it work suing the cli vg2pdf or vg2svg ?

how to use url in this case ? where to store the svg pattern ?

Reply all

Reply to author

Forward