vega-view | View component for Vega visualizations | Data Visualization library
kandi X-RAY | vega-view Summary
kandi X-RAY | vega-view Summary
View component for Vega visualizations. A View instantiates an underlying dataflow graph and provides a component for rendering and interacting with a visualization. When initialized with a container DOM element, the View adds a Canvas or SVG-based visualization to a web page. Alternatively, a View can be used either client-side or server-side to export static SVG or PNG (Canvas) images.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vega-view
vega-view Key Features
vega-view Examples and Code Snippets
Community Discussions
Trending Discussions on vega-view
QUESTION
I am using a clone of this VEGA-lite example and its chart spec as reference, and added the renderer
option
ANSWER
Answered 2019-Dec-30 at 20:33The renderer is not a property of the Vega-Lite specification, but rather a Vega-Embed option.
How to specify it depends on how you are rendering your chart. For example, if you open the chart in the vega editor, you can choose the SVG renderer from the Settings menu in the upper right.
If you are generating HTML directly, you can pass the embed options to the vegaEmbed
call; for example:
QUESTION
I'm working on a bar plot in Vega-Lite (generated using Altair). Using the Vega-View API, I've written some code where users can select bars, which changes those bars' colors (along with doing some other stuff elsewhere in the application; the details aren't super important for this question).
My problem is this. Using the default continuousBandSize
of 5
, when zoomed out the bars seem to "overlap" each other horizontally.
Here's a screenshot of this problem.
This problem is resolvable by setting continuousBandSize
to 1
, but the problem then is that -- when you zoom in to the chart -- the bars become very thin and hard for users to select. (Furthermore, since I'm coloring the bars gray by default, they become hard to distinguish from the grid behind the visualization; and I'd prefer to keep the grid if I can.) Here's a screenshot of this problem.
Is it possible to make the bar marks in Vega-Lite adjacent at any zoom level? Or is this not feasible?
Prior research on this problem
The problem of bars being too thin is mentioned in an issue on Vega-Lite's GitHub page here, but that issue seems to address a different problem (of the bars going outside of the visualization).
I've looked into using padding
, paddingInner
, and paddingOuter
(as mentioned in the Vega-Lite documentation and in the answer to this question), with no success. The problem of increasing sizes causing bars to overlap is also brought up in an (unanswered) comment on this answer.
Example Vega-Lite Specification
An example specification showing a subset of the plot I'm working on (with continuousBandSize
set to 1
to show the "thin-bar" problem) is available in the Vega Editor here (apologies for the long URL). As mentioned above, if you zoom in too far with continuousBandSize
set to 1
, the gray bars become very thin and hard to see. And if you set continuousBandSize
to something like 2
or above and zoom out too far, the bars start to overlap each other (this is demonstrated by the blue bar starting to get slightly "covered" by the gray bar to its right -- this isn't super visible here since this is only a subset of the full plot, but the problem is a lot clearer when there are ~500 bars).
Thanks!
...ANSWER
Answered 2019-Apr-06 at 00:30In your chart you are setting the x scale type to quantitative, which leads to very thin bars:
If you set the x scale to ordinal instead, the bars fill the space:
In general, bar charts perform better with non-continuous data.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vega-view
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page