node-red-node-ui-vega/examples/Vega-Lite - Example Gallery.json

Node-RED UI widget node for Vega visualization grammar

[{"id":"fb66b9e2.439f78","type":"tab","label":"[Vega-Lite] Example Gallery","disabled":false,"info":"# Shows Examples from [Vega-Lite Example Gallery](https://vega.github.io/vega-lite/examples/).\n\n- press button of inject node to initialize dropdown menu\n- examples are displayed on **Example 3 - Vega-Lite** tab."},{"id":"d2da5be2.d594d8","type":"debug","z":"fb66b9e2.439f78","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":930,"y":140,"wires":[]},{"id":"e4fbdada.9f8408","type":"http request","z":"fb66b9e2.439f78","name":"","method":"GET","ret":"obj","paytoqs":false,"url":"","tls":"","proxy":"","authType":"","x":630,"y":140,"wires":[["98066bc1.63ba38"]]},{"id":"9c806d55.a76e1","type":"change","z":"fb66b9e2.439f78","name":"Vega-Lite Example URL","rules":[{"t":"set","p":"url","pt":"msg","to":"\"https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/\" & payload","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":200,"wires":[["e4fbdada.9f8408"]]},{"id":"98066bc1.63ba38","type":"function","z":"fb66b9e2.439f78","name":"Fix Data URL","func":"function fixURL(obj) {\n    if (obj === null) {\n        return null;\n    }\n    else if (Array.isArray(obj)) {\n        return obj.map(fixURL);\n    }\n    else if(typeof obj === \"object\") {\n        var newObj = {};\n        Object.keys(obj).forEach(function (key) {\n            var val = obj[key];\n            if (key === \"url\") {\n                newObj[key] = \"https://raw.githubusercontent.com/vega/vega/master/docs/\" +val;\n            }\n            else {\n                newObj[key] = fixURL(val);\n            }\n        });\n        return newObj;\n    }\n    return obj;\n}\n\nmsg = {\n    payload: fixURL(msg.payload)\n};\nreturn msg;","outputs":1,"noerr":0,"x":760,"y":200,"wires":[["d2da5be2.d594d8","5f0f22b7.b33d5c"]]},{"id":"5f0f22b7.b33d5c","type":"ui_vega","z":"fb66b9e2.439f78","group":"8e3d3331.52331","name":"","order":2,"width":"20","height":"15","vega":"","x":910,"y":260,"wires":[]},{"id":"f97190.dfbd5e7","type":"inject","z":"fb66b9e2.439f78","name":"Init","topic":"","payload":"isotype_bar_chart.vl.json","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":80,"wires":[["ced2df22.7a74e"]]},{"id":"ced2df22.7a74e","type":"template","z":"fb66b9e2.439f78","name":"List of Examples","field":"options","fieldType":"msg","format":"json","syntax":"plain","template":"[\n    { \"Simple Bar Chart\": \"bar.vl.json\" },\n    { \"Aggregate Bar Chart\": \"bar_aggregate.vl.json\" },\n    { \"Aggregate Bar Chart (Sorted)\": \"bar_aggregate_sort_by_encoding.vl.json\" },\n    { \"Histogram\": \"histogram.vl.json\" },\n    { \"Histogram (from Binned Data)\": \"bar_binned_data.vl.json\" },\n    { \"Log-scaled Histogram\": \"histogram_log.vl.json\" },\n    { \"Grouped Bar Chart\": \"bar_grouped.vl.json\" },\n    { \"Stacked Bar Chart\": \"stacked_bar_weather.vl.json\" },\n    { \"Horizontal Stacked Bar Chart\": \"stacked_bar_h.vl.json\" },\n    { \"Normalized (Percentage) Stacked Bar Chart\": \"stacked_bar_normalize.vl.json\" },\n    { \"Gantt Chart (Ranged Bar Marks)\": \"bar_gantt.vl.json\" },\n    { \"A Bar Chart Encoding Color Names in the Data\": \"bar_color_disabled_scale.vl.json\" },\n    { \"Layered Bar Chart\": \"bar_layered_transparent.vl.json\" },\n    { \"Diverging Stacked Bar Chart (Population Pyramid)\": \"bar_diverging_stack_population_pyramid.vl.json\" },\n    { \"Diverging Stacked Bar Chart (with Neutral Parts)\": \"bar_diverging_stack_transform.vl.json\" },\n    { \"Simple Bar Chart with Labels\": \"layer_bar_labels.vl.json\" },\n    { \"Wilkinson Dot Plot\": \"circle_wilkinson_dotplot.vl.json\" },\n    { \"Isotype Bar Chart\": \"isotype_bar_chart.vl.json\" },\n    { \"Isotype Bar Chart with Emoji\": \"isotype_bar_chart_emoji.vl.json\" },\n    { \"Scatterplot\": \"point_2d.vl.json\" },\n    { \"1D Strip Plot\": \"tick_dot.vl.json\" },\n    { \"Strip Plot\": \"tick_strip.vl.json\" },\n    { \"Colored Scatterplot\": \"point_color_with_shape.vl.json\" },\n    { \"Binned Scatterplot\": \"circle_binned.vl.json\" },\n    { \"Bubble Plot\": \"point_bubble.vl.json\" },\n    { \"Scatterplot with Null Values in Grey\": \"point_invalid_color.vl.json\" },\n    { \"Scatterplot with Filled Circles\": \"circle.vl.json\" },\n    { \"Bubble Plot (Gapminder)\": \"circle_bubble_health_income.vl.json\" },\n    { \"Bubble Plot (Natural Disasters)\": \"circle_natural_disasters.vl.json\" },\n    { \"Scatter Plot with Text Marks\": \"text_scatterplot_colored.vl.json\" },\n    { \"Line Chart\": \"line.vl.json\" },\n    { \"Line Chart with Point Markers\": \"line_overlay.vl.json\" },\n    { \"Line Chart with Stroked Point Markers\": \"line_overlay_stroked.vl.json\" },\n    { \"Multi Series Line Chart\": \"line_color.vl.json\" },\n    { \"Slope Graph\": \"line_slope.vl.json\" },\n    { \"Step Chart\": \"line_step.vl.json\" },\n    { \"Line Chart with Monotone Interpolation\": \"line_monotone.vl.json\" },\n    { \"Line Chart with Conditional Grid Dash\": \"line_conditional_grid_dash.vl.json\" },\n    { \"Connected Scatterplot (Lines with Custom Paths)\": \"connected_scatterplot.vl.json\" },\n    { \"Line Chart with Varying Size (using the trail mark)\": \"trail_color.vl.json\" },\n    { \"Line Chart with Markers and Invalid Values\": \"line_skip_invalid_mid_overlay.vl.json\" },\n    { \"Carbon Dioxide in the Atmosphere\": \"layer_line_co2_concentration.vl.json\" },\n    { \"Line Charts Showing Ranks Over Time\": \"window_rank.vl.json\" },\n    { \"Drawing Sine and Cosine Curves with the Sequence Generator\": \"sequence_line_fold.vl.json\" },\n    { \"Area Chart\": \"area.vl.json\" },\n    { \"Area Chart with Gradient\": \"area_gradient.vl.json\" },\n    { \"Area Chart with Overlaying Lines and Point Markers\": \"area_overlay.vl.json\" },\n    { \"Stacked Area Chart\": \"stacked_area.vl.json\" },\n    { \"Normalized Stacked Area Chart\": \"stacked_area_normalize.vl.json\" },\n    { \"Streamgraph\": \"stacked_area_stream.vl.json\" },\n    { \"Horizon Graph\": \"area_horizon.vl.json\" },\n    { \"Mosaic Chart with Labels\": \"rect_mosaic_labelled_with_offset.vl.json\" },\n    { \"Table Heatmap\": \"rect_heatmap.vl.json\" },\n    { \"Annual Weather Heatmap\": \"rect_heatmap_weather.vl.json\" },\n    { \"Table Binned heatmap\": \"rect_binned_heatmap.vl.json\" },\n    { \"Table Bubble Plot (Github Punch Card)\": \"circle_github_punchcard.vl.json\" },\n    { \"Heatmap with Labels\": \"layer_text_heatmap.vl.json\" },\n    { \"Lasagna Plot (Dense Time-Series Heatmap)\": \"rect_lasagna.vl.json\" },\n    { \"Calculate Percentage of Total\": \"window_percent_of_total.vl.json\" },\n    { \"Calculate Difference from Average\": \"joinaggregate_mean_difference.vl.json\" },\n    { \"Calculate Difference from Annual Average\": \"joinaggregate_mean_difference_by_year.vl.json\" },\n    { \"Calculate Residuals\": \"joinaggregate_residual_graph.vl.json\" },\n    { \"Line Charts Showing Ranks Over Time\": \"window_rank.vl.json\" },\n    { \"Waterfall Chart of Monthly Profit and Loss\": \"waterfall_chart.vl.json\" },\n    { \"Filtering Top-K Items\": \"window_top_k.vl.json\" },\n    { \"Using the lookup transform to combine data\": \"lookup.vl.json\" },\n    { \"Cumulative Frequency Distribution\": \"area_cumulative_freq.vl.json\" },\n    { \"Layered Histogram and Cumulative Histogram\": \"layer_cumulative_histogram.vl.json\" },\n    { \"Parallel Coordinate Plot\": \"parallel_coordinate.vl.json\" },\n    { \"Bar Chart Showing Argmax Value\": \"bar_argmax.vl.json\" },\n    { \"Layering Averages over Raw Values\": \"layer_line_mean_point_raw.vl.json\" },\n    { \"Layering Rolling Averages over Raw Values\": \"layer_line_rolling_mean_point_raw.vl.json\" },\n    { \"Error Bars Showing Confidence Interval\": \"layer_point_errorbar_ci.vl.json\" },\n    { \"Error Bars Showing Standard Deviation\": \"layer_point_errorbar_stdev.vl.json\" },\n    { \"Line Chart with Confidence Interval Band\": \"layer_line_errorband_ci.vl.json\" },\n    { \"Scatterplot with Mean and Standard Deviation Overlay\": \"layer_scatter_errorband_1D_stdev_global_mean.vl.json\" },\n    { \"Box Plot with Min/Max Whiskers\": \"boxplot_minmax_2D_vertical.vl.json\" },\n    { \"Tukey Box Plot (1.5 IQR)\": \"boxplot_2D_vertical.vl.json\" },\n    { \"Simple Bar Chart with Labels\": \"layer_bar_labels.vl.json\" },\n    { \"Layering text over heatmap\": \"layer_text_heatmap.vl.json\" },\n    { \"Carbon Dioxide in the Atmosphere\": \"layer_line_co2_concentration.vl.json\" },\n    { \"Bar Chart Highlighting Values beyond a Threshold\": \"layer_bar_annotations.vl.json\" },\n    { \"Mean overlay over precipitation chart\": \"layer_precipitation_mean.vl.json\" },\n    { \"Histogram with a Global Mean Overlay\": \"layer_histogram_global_mean.vl.json\" },\n    { \"Line Chart with Highlighted Rectangles\": \"layer_falkensee.vl.json\" },\n    { \"Layering Averages over Raw Values\": \"layer_line_mean_point_raw.vl.json\" },\n    { \"Layering Rolling Averages over Raw Values\": \"layer_line_rolling_mean_point_raw.vl.json\" },\n    { \"Distributions and Medians of Likert Scale Ratings\": \"layer_likert.vl.json\" },\n    { \"Comparative Likert Scale Ratings\": \"concat_layer_voyager_result.vl.json\" },\n    { \"Candlestick Chart\": \"layer_candlestick.vl.json\" },\n    { \"Ranged Dot Plot\": \"layer_ranged_dot.vl.json\" },\n    { \"Bullet Chart\": \"facet_bullet.vl.json\" },\n    { \"Layered Plot with Dual-Axis\": \"layer_dual_axis.vl.json\" },\n    { \"Horizon Graph\": \"area_horizon.vl.json\" },\n    { \"Weekly Weather Plot\": \"bar_layered_weather.vl.json\" },\n    { \"Wheat and Wages Example\": \"wheat_wages.vl.json\" },\n    { \"Trellis Bar Chart\": \"trellis_bar.vl.json\" },\n    { \"Trellis Stacked Bar Chart\": \"trellis_stacked_bar.vl.json\" },\n    { \"Trellis Scatter Plot\": \"trellis_scatter.vl.json\" },\n    { \"Trellis Histograms\": \"trellis_bar_histogram.vl.json\" },\n    { \"Trellis Scatter Plot Showing Anscombe's Quartet\": \"trellis_anscombe.vl.json\" },\n    { \"Becker's Barley Trellis Plot\": \"trellis_barley.vl.json\" },\n    { \"Trellis Area\": \"trellis_area.vl.json\" },\n    { \"Repeat and Layer to Show Different Weather Measures\": \"repeat_layer.vl.json\" },\n    { \"Vertical Concatenation\": \"vconcat_weather.vl.json\" },\n    { \"Horizontally Repeated Charts\": \"repeat_histogram.vl.json\" },\n    { \"Interactive Scatterplot Matrix\": \"interactive_splom.vl.json\" },\n    { \"Marginal Histograms\": \"concat_marginal_histograms.vl.json\" },\n    { \"Discretizing scales\": \"concat_bar_scales_discretize.vl.json\" },\n    { \"Nested View Concatenation Aligned with Axis `minExtent`\": \"nested_concat_align.vl.json\" },\n    { \"Population Pyramid\": \"concat_population_pyramid.vl.json\" },\n    { \"Choropleth of Unemployment Rate per County\": \"geo_choropleth.vl.json\" },\n    { \"One Dot per Zipcode in the U.S.\": \"geo_circle.vl.json\" },\n    { \"One Dot per Airport in the U.S. Overlayed on Geoshape\": \"geo_layer.vl.json\" },\n    { \"Rules (line segments) Connecting SEA to every Airport Reachable via Direct Flights\": \"geo_rule.vl.json\" },\n    { \"Three Choropleths Representing Disjoint Data from the Same Table\": \"geo_repeat.vl.json\" },\n    { \"U.S. State Capitals Overlayed on a Map of U.S.\": \"geo_text.vl.json\" },\n    { \"Line between Airports in the U.S.\": \"geo_line.vl.json\" },\n    { \"Income in the U.S. by State, Faceted over Income Brackets\": \"geo_trellis.vl.json\" },\n    { \"London Tube Lines\": \"geo_layer_line_london.vl.json\" },\n    { \"Bar Chart with Highlighting on Hover and Selection on Click\": \"interactive_bar_select_highlight.vl.json\" },\n    { \"Scatterplot with External Links and Tooltips\": \"point_href.vl.json\" },\n    { \"Rectangular Brush\": \"interactive_brush.vl.json\" },\n    { \"Area Chart with Rectangular Brush\": \"interactive_area_brush.vl.json\" },\n    { \"Paintbrush Highlight\": \"interactive_paintbrush.vl.json\" },\n    { \"Scatterplot Pan & Zoom\": \"selection_translate_scatterplot_drag.vl.json\" },\n    { \"Query Widgets\": \"interactive_query_widgets.vl.json\" },\n    { \"Interactive Average\": \"selection_layer_bar_month.vl.json\" },\n    { \"Multi Series Line Chart with Labels\": \"interactive_multi_line_label.vl.json\" },\n    { \"Multi Series Line Chart with Tooltip\": \"interactive_multi_line_tooltip.vl.json\" },\n    { \"Isotype Grid\": \"isotype_grid.vl.json\" },\n    { \"Brushing Scatter Plot to show data on a table\": \"brush_table.vl.json\" },\n    { \"Selectable Heatmap\": \"selection_heatmap.vl.json\" },\n    { \"Bar Chart with a Minimap\": \"bar_count_minimap.vl.json\" },\n    { \"Overview and Detail\": \"interactive_overview_detail.vl.json\" },\n    { \"Crossfilter\": \"interactive_layered_crossfilter.vl.json\" },\n    { \"Interactive Scatterplot Matrix\": \"interactive_splom.vl.json\" },\n    { \"Interactive Dashboard with Cross Highlight\": \"interactive_concat_layer.vl.json\" },\n    { \"Seattle Weather Exploration\": \"interactive_seattle_weather.vl.json\" },\n    { \"Connections among Major U.S. Airports.\": \"airport_connections.vl.json\" }\n]","output":"json","x":230,"y":140,"wires":[["dfded912.b459b8"]]},{"id":"c3b1c81b.705158","type":"comment","z":"fb66b9e2.439f78","name":"Press to initialize dropdown","info":"","x":160,"y":40,"wires":[]},{"id":"6b5ae4cd.088ffc","type":"comment","z":"fb66b9e2.439f78","name":"To see Vega definition","info":"","x":960,"y":100,"wires":[]},{"id":"cfc8bece.77c42","type":"comment","z":"fb66b9e2.439f78","name":"Visualize by Vega","info":"","x":940,"y":300,"wires":[]},{"id":"dfded912.b459b8","type":"ui_dropdown","z":"fb66b9e2.439f78","name":"","label":"","tooltip":"","place":"Select option","group":"8e3d3331.52331","order":1,"width":0,"height":0,"passthru":true,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","x":290,"y":200,"wires":[["9c806d55.a76e1"]]},{"id":"8e3d3331.52331","type":"ui_group","z":"","name":"Default","tab":"ab85ce77.6583c","order":1,"disp":false,"width":"20","collapse":false},{"id":"ab85ce77.6583c","type":"ui_tab","z":"","name":"[Vega-Lite] Example Gallery","icon":"dashboard","order":8,"disabled":false,"hidden":false}]