DEV Community

Cover image for Vega Unfurl 📈 📊 - Take 2 :)
dataPixy 🧚‍♂️
dataPixy 🧚‍♂️

Posted on

Vega Unfurl 📈 📊 - Take 2 :)

So, I simplified the intro docs for this Slack app & added preview image bits :)

Any dataViz devs interested in this bit?

vega-unfurl

Slack app for Vega Editor links preview ...

Usage Example

  1. Paste this Vega-Lite Stacked Bar Chart JSON spec example into online Vega Editor:
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Weather by Month",
  "description": "Stacked Bar Chart",
  "data": {"url": "https://vega.github.io/vega-datasets/data/seattle-weather.csv"},
  "mark": "bar",
  "encoding": {
    "x": {
      "timeUnit": "month",
      "field": "date",
      "type": "ordinal",
      "axis": {"title": "Month of the year"}
    },
    "y": {
      "aggregate": "count",
      "type": "quantitative"
    },
    "color": {
      "field": "weather",
      "type": "nominal",
      "scale": {
        "domain": ["sun", "fog", "drizzle", "rain", "snow"],
        "range": ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
      },
      "legend": {"title": "Weather type"}
    }
  }
}
  1. Click Share in Vega Editor to copy url-encoded Vega(-Lite) spec.

  2. Paste Vega spec URL into a Slack channel in a workspace with installed Vega Unfurl Slack app.

You should see that shared url-encoded vega(-lite) spec link expended with new Slack message attachment containing vega chart title, description, vega json schema link, data links, view/save .vg/.vl.json links & image preview:

Vega Unfurl Example

For this particular Stacked Bar Chart example those links are:

You can also use Vega Unfurl slack app document handlers to save that bar chart svg || png for sharing with your vega data viz team.

Dev Log

See this dev.to post for more info:

https://dev.to/tarasnovak/vega-unfurl-slack-app-13i8

& #vegaUnfurl tag on Twitter for the latest & greatest updates on this front :) ...

References

Everything you ever wanted to know about unfurling ...

All will be revealed ...

Unfurling links in messages

Slack Events API

Developing Slack apps locally

Top comments (0)