vega-lite | A concise grammar of interactive graphics , built on Vega | Data Visualization library

by vega TypeScript Version: 5.17.0 License: BSD-3-Clause

X-Ray Key Features Code Snippets(6)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | vega-lite Summary

vega-lite is a TypeScript library typically used in Analytics, Data Visualization applications. vega-lite has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Vega-Lite provides a higher-level grammar for visual analysis that generates complete Vega specifications. You can find more details, documentation, examples, usage instructions, and tutorials on the Vega-Lite website. Try using Vega-Lite in the online Vega Editor. Contributions are also welcome. Please see CONTRIBUTING.md for contribution and development guidelines and our Code of Conduct. Read about future plans in our roadmap.

Support

Quality

Security

License

Reuse

Support

vega-lite has a medium active ecosystem.

It has 4164 star(s) with 538 fork(s). There are 90 watchers for this library.

There were 1 major release(s) in the last 12 months.

There are 601 open issues and 2765 have been closed. On average issues are closed in 113 days. There are 44 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of vega-lite is 5.17.0

Quality

vega-lite has no bugs reported.

Security

vega-lite has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

vega-lite is licensed under the BSD-3-Clause License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

vega-lite releases are available to install and integrate.

Installation instructions are not available. Examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vega-lite

Get all kandi verified functions for this library.

vega-lite Key Features

No Key Features are available at this moment for vega-lite.

vega-lite Examples and Code Snippets

(Vis)Compass: Visualization Recommender.,Development Guide,Dependencies

JavaScript

Lines of Code : 6

License : Non-SPDX (NOASSERTION)

Copy

cd path/to/vega-lite
bower link
npm link

# optional: npm link datalib
npm link vega-lite
bower link vega-lite

Using Vega-tooltip with a CDN

TypeScript

Lines of Code : 5

License : Permissive (BSD-3-Clause)

Copy

react-vega-lite ,Install

JavaScript

Lines of Code : 1

License : Non-SPDX (NOASSERTION)

Copy

npm install vega-lib vega-lite react-vega react-vega-lite --save

Can I use vegalite v-5 in observable notebook using JSON syntax (not using vegalite API)?

JavaScript

Lines of Code : 5

License : Strong Copyleft (CC BY-SA 4.0)

Copy

// https://observablehq.com/@vega/hello-vega-embed
embed = require("vega-embed@6")

embed({ vega or vega-lite spec… })

How do I use Aeson to generate a literal (unquoted) javascript expression?

Lines of Code : 54

License : Strong Copyleft (CC BY-SA 4.0)

Copy

toHtmlWith' :: Maybe Text -> VegaLite -> Text
toHtmlWith' mopts vl =
  let spec = encodeToLazyText (fromVL vl)
      -- NB: Removed ‘encodeToLazyText’ call here.
      opts = maybe "" (\o -> "," <> o) mopts

  in TL.unlines

How to use Vega to generate plots in the backend while using express.js

JavaScript

Lines of Code : 38

License : Strong Copyleft (CC BY-SA 4.0)

Copy

const vega = require('vega')
const lite = require('vega-lite')
var express = require('express');
var app = express();

var yourVlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
  description: 'A simple bar c

Community Discussions

Trending Discussions on vega-lite

Sorting a chart axis based on the dynamically updated axis order in another chart

Conditional render label Color base on another field value

Not sure how to use Vega-Lite chart examples - seem to be partial code

Vega-lite data transformation to un-nest objects

label bar chart in Vega Lite with both absolute number and percentage

How to manage layers and colums in vega-lite

vega-lite: is it possible to render only the legend without the reference chart?

Change mark order via parameter

vega-lite: set circle size at start, when you have size change on mouse over

vega-lite: how to add timeFormatLocale to vega editor?

QUESTION

Sorting a chart axis based on the dynamically updated axis order in another chart

Asked 2021-Jun-12 at 13:34

In this VegaLite spec the y-axis order of the bottom-most barplot is updated as the data of that plot is filtered based on the selection in the scatter plot. How can I achieve the same resorting behavior for both the blue and orange bars in the top-most bar plot where I have layered the same barplot together with another chart?

I have tried toggling the axis between shared and independent and switching the order of the layer, but that didn't do it. Conceptually I can imagine using a calculate transform to define a new field that is based on the selection and used as the sort order key, but I can't figure out how to write this vega expression string.

Here is that Altair code if anyone prefers to solve it that way:

...

ANSWER

Answered 2021-Jun-12 at 13:34

The issue with your spec was that in layers you performed filter transform which created a separate data for each layers. Sorting was working at each level of layer but since both the layers data were separate so each layer was getting sorted inpendently.

So instead of having a filter transform, I tried to manual filter using calculate transform and created a filtered_freq_x field which is later used on 2nd layer and performed sorting using this on window. So with this my data becomes same for both layers, just few fields were added and used.

Let me know if this works for you not. Below is the spec config and editor:

Source https://stackoverflow.com/questions/67942375

QUESTION

Conditional render label Color base on another field value

Asked 2021-Jun-03 at 12:13

I'm trying to render the label color base on another field value using test predicate or field predicate but I can not get it right. All I want is that the label color on axis y (section) can change from black to red when its resilience value equal to 0.
I've made my code on online editor and I really appreciate if you can give me some help.

vega-lite-condition-render-label-color

in the case above, the fifth one <4. Hygiene & Cleaning> should be red instead of black.

...

ANSWER

Answered 2021-Jun-03 at 12:13

I have added another layer with text, in which your text of section field is displayed. In that the color config with condition will work properly. Below is the code and editor:

Source https://stackoverflow.com/questions/67820439

QUESTION

Not sure how to use Vega-Lite chart examples - seem to be partial code

Asked 2021-Jun-01 at 10:03

I got the following Vega-Lite code example from Observable and it works great:

...

ANSWER

Answered 2021-Jun-01 at 10:03

You will need vega-lite, vega-cli and vega-embed to create a vega-lite chart. You can check the devDependencies for the selected version of vega-lite. For example, in package.json of vega-lite v5.1.0, these are the required dependencies:

Source https://stackoverflow.com/questions/67785132

QUESTION

Vega-lite data transformation to un-nest objects

Asked 2021-May-31 at 14:39

The data is incoming from an elasticsearch url and has the following form :

...

ANSWER

Answered 2021-May-31 at 14:39

There is a way where you have to provide the fields once and it will be out on single level instead of nested. Perform calculate transform as done below or in editor:

Source https://stackoverflow.com/questions/67775292

QUESTION

label bar chart in Vega Lite with both absolute number and percentage

Asked 2021-May-21 at 04:52

I am able to label a bar chart created in Vega Lite, with either its percentage of the total or its absolute number, like so:

And here's the spec:

...

ANSWER

Answered 2021-May-21 at 04:52

To display the concatenated value of 2 fields "29 (14%)" over text you can use transform calculate and generate a concatenated string based on your field. Then, use that field in your text mark as done below or refer editor:

Source https://stackoverflow.com/questions/67629002

QUESTION

How to manage layers and colums in vega-lite

Asked 2021-May-15 at 08:50

I start from this trellis chart, in which I have 3 columns.

I must add a rule, than I need to use a layer. I have edit my config and now I have this one: I lost the columns and i have everything on one line.

How not to lose the arrangement in columns?

...

ANSWER

Answered 2021-May-15 at 08:50

Wrap up your entire facet and layer inside an vconcat and provided a columns: 3 outside facet. Refer the below code or editor

Source https://stackoverflow.com/questions/67544399

QUESTION

vega-lite: is it possible to render only the legend without the reference chart?

Asked 2021-May-14 at 16:59

I'm building a wireframe of an HTML page in which I have some vega-lite charts.

Is there a way to render only the legend of a chart? If yes, how to?

...

ANSWER

Answered 2021-May-14 at 16:59

I don't know of a built-in way to display only the legend, but you can hack it by removing all positional encodings, setting the mark opacity to zero, and setting the view width/height to 0. For example, here is a way to generate just the legend from this Vega-Lite example:

Source https://stackoverflow.com/questions/67533298

QUESTION

Change mark order via parameter

Asked 2021-May-13 at 08:08

I'm playing with vega-lite v5 and the new parameters and wanted to change the order of marks using an input element:

Open the Chart in the Vega Editor

Is that possible?

I looked into the examples in the documentation but neither on x's order property or with an order encoding I was able to use the param.

...

ANSWER

Answered 2021-May-13 at 08:08

Yes you can do this by sorting the data with a window transform. Although undocumented as of VL 5.1.0, window properties can be parameterised with signal values (and should take expr values with the next update). Here's a working example that separates your input element into the field to sort by and the direction to sort.

Source https://stackoverflow.com/questions/67379937

QUESTION

vega-lite: set circle size at start, when you have size change on mouse over

Asked 2021-May-11 at 12:02

I have created this example.

The circle size grows on mouse hover. It's what I want.

But at start, when I open the editor the circles are not 10 in size, but 200, that it's the on mouse over size.
How to have their size 10 at start?

...

ANSWER

Answered 2021-May-11 at 12:02

Provide the following in your size condition or check the editor. This will first check the length if any selection is made or not.

Source https://stackoverflow.com/questions/67485926

QUESTION

vega-lite: how to add timeFormatLocale to vega editor?

Asked 2021-May-11 at 10:35

In this example I have a date field, and I use it for tooltips and legend.

I would like to have it Italian. I know I can add timeFormatLocale config, but how to use it in the editor?

...

ANSWER

Answered 2021-May-11 at 10:35

Provide a config config having locale and add your timeFormatLocale in time as done below or in editor.

Source https://stackoverflow.com/questions/67484467

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install vega-lite

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: