vega-lite

react-vega and react-vega tooltips

由 主宰稳场 提交于 2020-01-15 04:52:05
问题 I'm using react-vega-lite . In official examples: https://vega.github.io/vega-lite/ https://vega.github.io/react-vega-lite/ https://vega.github.io/react-vega/ vega-lite (without react) has a tooltip by default react-vega allows to handle onSignalTooltip event. So, I have 2 questions: 1) Is it possible to turn on tooltip with react-vega ( react-vega-lite )? 2) Does react-vega-lite support onSignalTooltip or I need to switch to Vega? 回答1: Add vega-tooltip package as a dependency, then import

Can we add event listeners to “Vega-Lite” specification?

由 夙愿已清 提交于 2020-01-13 19:52:11
问题 I am new to Vega and Vega-Lite. I am creating a simple bar chart using Vega-Lite but I am not able to add any event listeners e.g. "hover". I want to hover a bar and change the color of the bar. 回答1: If you're using Vega-Embed, it returns a promise with a reference to the view which allows you to use addEventListener - explained in the docs here. Here is an example: const width = 600 const color = blue embed(element, { $schema: 'https://vega.github.io/schema/vega-lite/3.0.0-rc6.json', data: {

Vega-lite heat map text properties

由 ◇◆丶佛笑我妖孽 提交于 2020-01-05 07:08:24
问题 Good time of day! all text - https://github.com/vega/vega-lite/issues/5697 When building data in a block, I would like to change the font size and position of the text in the block. Used the documentation -https://vega.github.io/vega-lite/docs/title.html, but it does not work. block: { "mark": "text" "encoding": { "text": {"field": "z", "type": "quantitative"} "color": {"value": "black"} "fontSize": 40 } Changing the position will allow for the addition of a second text: full code: { "$schema

How to add a slider to a choropleth in altair?

由 微笑、不失礼 提交于 2020-01-05 04:29:08
问题 I am trying to add a slider to my choropleth plot. The slider is based on "years" from 2006 to 2012 My data is like this: It can be downloaded from here: sample_data.csv When I plot the county level choropleth, It is doing an inner join w.r.t fips code for county using transform_lookup This is my code: slider = alt.binding_range(min=2006, max=2012, step=1) select_year = alt.selection_single(name="year", fields=['year'], bind=slider, init={'year': 2006}) alt.Chart(us_counties).mark_geoshape(

Vega-lite bar chart space between bars

由 风流意气都作罢 提交于 2019-12-25 10:52:13
问题 D3 newbie. How I adjust the spacing between bars in vega-lite bar chart and override the default? binSpacing I think only works on histograms. See code below. I'll want to adjust colour of text and font family too... But am having trouble finding it in the docs. { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "width": 1200, "height": 900, "data": { "url": "data/seattle-weather.csv" }, "mark": "bar", "encoding": { "x": { "aggregate": "count", "type": "quantitative" }, "size": {

Remove border around vegaEmbed geoshape generated by altair?

由 允我心安 提交于 2019-12-24 03:59:31
问题 In the below image, observe the border around a map generated from Chart.save() to either HTML or JSON canvas (the border is inside the canvas, not CSS styled). For any other type of mark, one would expect to be able to use Chart.configure_view() to set strokeWidth=0 to remove the border, but this does not appear to affect this geoshape chart. The vegaEmbed embed options do not appear to document what creates this border. Is it possible to style or remove the border? 回答1: The way to remove

Vega-Lite : stroke color value from data?

由 送分小仙女□ 提交于 2019-12-23 13:22:52
问题 In Vega it is possible to take a color value from data, like that : example in Vega Is there a way to do this with Vega-Lite ? example in Vega-Lite 回答1: Yes, you need to set the scale to null in your color property. "encoding": { "x": ..., "y": ..., "color": { "field": "color", "legend": null, "type":"nominal", "scale": null } } To directly encode the data value, the scale property can be set to null. https://vega.github.io/vega-lite/docs/scale.html#disable Hope it helps!! 来源： https:/

Plot multiple “columns” with VEGA-LITE and include a legend

由 孤街醉人 提交于 2019-12-12 15:14:46
问题 I have the following minimal data: [ {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30}, {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20}, {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10}, {"date": "2019-01-04", "foo": 1000, "bar": 60, "goo": 20} ] Which I plot using VEGA-LITE: <!DOCTYPE html> <html> <head> <title>Embedding Vega-Lite</title> <script src="https://cdn.jsdelivr.net/npm/vega@5.4.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0"><

Emailing vega chart

由 試著忘記壹切 提交于 2019-12-11 15:18:59
问题 Is there any way I can send vega chart in email from server side? Say from a spring boot app? I have the vega spec saved in db and I can fill up data as well from the server side, was wondering how I can use this to send out an email with the chart. Vega embed won’t work as most of the email clients filter out script tags from body. I tried vega-cli too but since it’s based on nodejs libs I could not integrate it with my spring boot. Appreciate any help find a solution here. 回答1: As discussed

Broken axis in Altair/Vega

由 ⅰ亾dé卋堺 提交于 2019-12-11 08:47:23
问题 I have a Normalized Stacked Area Chart with huge differences between one variable and the others like: df1=pd.DataFrame.from_dict( {'YEAR': {0: 2010, 1: 2010, 2: 2010, 3: 2010, 4: 2011, 5: 2011, 6: 2011, 7: 2011, 8: 2012, 9: 2012, 10: 2012, 11: 2012, 12: 2013, 13: 2013, 14: 2013, 15: 2013}, 'impact_FU': {0: 0.031479085164086554, 1: 5.9856927170853295e-05, 2: 1.1035885271638534e-05, 3: 5.8233509026863169e-06, 4: 0.059176271387395112, 5: 0.00011179170132430088, 6: 1.9783914536689014e-05, 7: 1
订阅 vega-lite