I have a vega-lite chart specification that I'd like to save to PNG, using one of the themes available in vega-themes.
With vega-embed, I can use a script like the following to produce a themed chart in the browser, and manually click "Save to PNG" in the menu:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#6"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
};
vegaEmbed("#vis", spec, {theme: 'fivethirtyeight'});
</script>
</body>
</html>
Alternatively, I can automatically create an un-themed png using the vl2png command-line tool from vega-cli:
$ cat spec.json | vl2png > chart.png
But I am unsure of where to specify the theme within the vl2png command.
How can I specify a chart theme when using the vega-cli to render and save a chart?
vega-themes aren't available from the vega-cli utilities – they are instead embedded in vega-embed. The good news is that since themes are merely vega config objects, you can just manually include one of them in the spec (on the command-line you can use a utility like jq to merge multiple JSON files).
The bad news, however, is that while the Typescript source for generating the theme objects is available, the vega-themes project doesn't appear to export any of the raw JSON config objects for the themes themselves. So you need to generate it yourself. If you have the vega-theme repo checked out and built, you could extract a config object like this:
cat vega-themes/build/theme-excel.js | sed 's/export default \(.*\);/console.log(JSON.stringify({config: \1}));/g' | node
So putting it all together, you can apply a theme from the console using this bit of gnarly code:
(cat vega-lite/examples/specs/bar.vl.json; \
cat vega-themes/build/theme-dark.js \
| sed 's/export default \(.*\);/console.log(JSON.stringify({config: \1}));/g' \
| node) \
| jq -s add \
| vl2png > spec_dark.png
Related
In my BitBucket+Bamboo setup, I'm trying to get a list of email addresses of people having access to a particular repository. This is the output from the BitBucket API:
{
"size": 3,
"limit": 25,
"isLastPage": true,
"values": [
{
"user": {
"name": "name1",
"emailAddress": "name1.lastname1#domain.com",
"id": 1,
"displayName": "Name1 Lastname1",
"active": true,
"slug": "name1",
"type": "NORMAL",
"links": {
"self": [
{
"href": "https://bitbucket.com/stash/users/name1"
}
]
}
},
"permission": "REPO_WRITE"
},
{
"user": {
"name": "name2",
"emailAddress": "name2.lastname2#domain.com",
"id": 2,
"displayName": "Name2 Lastname2",
"active": true,
"slug": "name2",
"type": "NORMAL",
"links": {
"self": [
{
"href": "https://bitbucket.com/stash/users/name2"
}
]
}
},
"permission": "REPO_WRITE"
},
{
"user": {
"name": "name3",
"emailAddress": "name3.lastname3#domain.com",
"id": 3,
"displayName": "Name3 Lastname3",
"active": true,
"slug": "name3",
"type": "NORMAL",
"links": {
"self": [
{
"href": "https://bitbucket.com/stash/users/name3"
}
]
}
},
"permission": "REPO_WRITE"
}
],
"start": 0
}
is there an easy way to, say, put all 3 email addresses into an array or a coma-separated variable within a bash script? I tried using grep and splitting the API output somehow (e.g. by 'permission'), but no luck so far. Let me note that I may be forced to use standard tools like grep, sed or awk, meaning I may not be able to use tools like jq (to process json in bash) since I cannot really temper with available build agents.
Any help would be much appreciated!
Consider using JQ (or another JSON query tool). It will handle any valid Json, even one that is not pretty-printed or formatted in a specific way. Ca be compined with readarray to build the array in bash.
readarray -t emails <<< "$(jq -r '.values[].user.emailAddress' < file)"
Will produce an array 'emails'
declare -p emails
declare -a emails=([0]=$'name1.lastname1#domain.com' [1]=$'name2.lastname2#domain.com' [2]=$'name3.lastname3#domain.com')
Note 2020-07-22: Added '-t' to strip trailing new lines from result array
Assuming your input is always that regular, this will work using any awk in any shell on every UNIX box:
$ awk -F'"' '$2=="emailAddress"{addrs=addrs sep $4; sep=","} END{print addrs}' file
name1.lastname1#domain.com,name2.lastname2#domain.com,name3.lastname3#domain.com
Save the output in a variable or a file as you see fit, e.g.:
$ var=$(awk -F'"' '$2=="emailAddress"{addrs=addrs sep $4; sep=","} END{print addrs}' file)
$ echo "$var"
name1.lastname1#domain.com,name2.lastname2#domain.com,name3.lastname3#domain.com
Take a look on the python:
You can access directly to your api like this:
import urllib.request
import json
with urllib.request.urlopen('http://your/api') as url:
data = json.loads(url.read().decode())
or as an example with the local file with the same data as you provided:
import json
with open('./response.json') as f:
data = json.load(f)
result = {}
for x in data['values']:
node = x['user']
result[node['emailAddress']] = x['permission']
result is {'name1.lastname1#domain.com': 'REPO_WRITE', 'name2.lastname2#domain.com': 'REPO_WRITE', 'name3.lastname3#domain.com': 'REPO_WRITE'}
$ grep -oP '(?<="emailAddress": ).*' file |
tr -d '",' |
paste -sd,
name1.lastname1#domain.com,name2.lastname2#domain.com,name3.lastname3#domain.com
or
$ grep '"emailAddress":' file |
cut -d: -f2 |
tr -d '", ' |
paste -sd,
I am fetching the data using below API :
https://rally1.rallydev.com/slm/webservice/v2.0/PortfolioItem/Feature/?fetch=ObjectID,FormattedID,Name,Parent&pagesize=2000
I don't want to fetch all fields in Parent. All I need Name,FormattedID,ObjectID,Parent.ObjectID,Parent.Name of Feature. A
{
"_rallyAPIMajor": "2",
"_rallyAPIMinor": "0",
"ObjectID": blabla,
"FormattedID": "F3792",
"DirectChildrenCount": 23,
"Name": "Phase 2: Fork Messages (New flow of messages that will feed data to 8 reports for D&P)",
"Parent": {
"_rallyAPIMajor": "2",
"_rallyAPIMinor": "0",
"_ref": "https://rally1.rallydev.com/slm/webservice/v2.0/portfolioitem/portfolio/blabla",
"_refObjectUUID": "8fae",
"_objectVersion": "67",
"_refObjectName": "blabla",
"ObjectID": blabla,
"FormattedID": "P1ABC",
"DirectChildrenCount": 13,
"Name": "blabla",
"_type": "PortfolioItem/Portfolio"
},
"_type": "PortfolioItem/Feature"
}
This is just the way the Web Services API works. Any fields included in the fetch will be returned on any object that has them. This is very useful for being able to hydrate fields on associated objects- Parent, Iteration, etc.
I am following the below link for logging ecommerce event in branch.io
https://github.com/BranchMetrics/branch-deep-linking-public-api#logging-commerce-events
I am using the same request as mentioned in the link.
but the details are not getting captured in branch.io dashboard.
I am getting "branch_view_enabled": false as a response.
Please help me out if there is any issue in settings ? or explicitly I will have to do something for seeing the events in the dashboard.
A response will be highly appreciated!
I tried it like this
new BranchEvent("Event Name")
.addCustomDataProperty("Key", "Value")
.logEvent(this);
And it shows the event name on the branch dashboard under summary. And my log shows that internally it was targeting the v2. I am sending it through android
https://api.branch.io/v2/event/custom
This is Jackie from Branch.
We are not yet supporting v2/events for commerce yet which is why you weren't able to track it on the dashboard.
Moving forward, please use v1 event request following our official documentation here. I've also included a sample commerce request for your information. In the meantime, we will update the commerce information on our github page so as not to cause any confusion.
curl -X POST https://api.branch.io/v1/event \
-d '{
"branch_key": "your_Branch_key",
"identity": "222",
"event": "purchase",
"metadata": {
"hello": "world",
"custom_data": "this"
},
"commerce_data": {
"revenue": 50.0,
"currency": "USD",
"transaction_id": "foo-transaction-id",
"shipping": 0.0,
"tax": 5.0,
"affiliation": "foo-affiliation",
"products": [
{
"sku": "foo-sku-1",
"name": "foo-item-1",
"price": 45.00,
"quantity": 1,
"brand": "foo-brand",
"category": "Electronics",
"variant": "foo-variant-1"
},
{
"sku": "foo-sku-2",
"price": 2.50,
"quantity": 2
}
]
}
}'
Hope this helps. Please feel free to contact us directly if you have any other questions or issues at support#branch.io.
Best,
Jackie
I tried to implement an animation similar to the one showed in https://vimeo.com/177767802 (min 2:30)
My code is the following:
{
"data": {
"values": [
{"A": 2,"B": 3,"C": 4,"D": "a"},
{"A": 1,"B": 2,"C": 1,"D": "a"},
{"A": 4,"B": 5,"C": 15,"D": "b"},
{"A": 9,"B": 10,"C": 80,"D": "b"}
]
},
"mark": "circle",
"select": {"id": {"type": "point","on": "mauseover"}},
"encoding": {
"x": {"field": "A","type": "quantitative"},
"y": {"field": "B","type": "quantitative"},
"color": [
{"if": "id","field": "D","type": "nominal"},
{"value": "grey"}
],
"size": {"value": 100}
},
"config": {"mark": {"fillOpacity": 0.5}}
}
Essentially it is the same code as in the video, with the only difference that I used a smaller data set which (I took from H. Wickham.)
I tried to render the plot using the Vega-Lite editor (https://vega.github.io/vega-editor/?mode=vega-lite&renderer=svg). The resulting scatterplot is correct, the circles are grey (as they should be), but it does not display any animation and the legend is broken.
My question is whether there is something wrong with the code, something that I overlooked. In case the code is right, but the problem is that I used Vega-Lite 1.0 instead of Vega-Lite 2.0 is there a way to use a Vega-Lite 2.0 (fully understanding the risks of using an alfa version code) in the Vega-Lite editor?
It's now 2021, one may also check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts
You can try Vega 3 and Vega-Lite 2 with selections at https://vega.github.io/editor. We will keep updating the deployed versions.
Vega-lite does not currently support selection, though it will in the upcoming 2.0 release. This video is a preview of interactive functionality that will be available later this year.
I have a third party library, non uglified which was bundled using browserify. Unfortunately the original sources are not available.
Is there a way to unbundled it into different files/sources.
You should be able to 'unbundle' the pre-built Browserify bundle using browser-unpack.
It will generate JSON output like this:
[
{
"id": 1,
"source": "\"use strict\";\r\nvar TodoActions = require(\"./todo\"); ... var VisibilityFilterActions = require(\"./visibility-filter\"); ...",
"deps": {
"./todo": 2,
"./visibility-filter": 3
}
},
{
"id": 2,
"source": "\"use strict\";\r\n ...",
"deps": {}
},
{
"id": 3,
"source": "\"use strict\";\r\n ...",
"deps": {}
},
...
]
It should be reasonably straight-forward to transform the JSON output into source files that can be required. Note that the mappings of require literals (like "./todo") are in the deps. That is, the module required as "./todo" corresponds to the source with an id of 2.
There is also a browserify-unpack tool - which writes the contents as files - but I've not used it.