feat: app with pygwalker

README.md

@@ -1,2 +1,10 @@
 # gradio-walkthrough
  
+## App 1: Visual Exploration of AirBnB Listings in NYC using [pygwalker](https://github.com/Kanaries/pygwalker)
+> [pygwalker]() is a python library that turn your dataframe/dataconnection into an interactive visualization module which allows your to analysis the data with drag-and-drop/chat interface, like tableau/powerBI.
+
+Run the app
+
+```bash
+python app.py
+```

app.py

@@ -0,0 +1,16 @@
+import gradio as gr
+import pygwalker as pyg
+import pandas as pd
+from datasets import load_dataset
+
+# load dataset
+dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
+df = dataset.to_pandas()
+
+with gr.Blocks() as demo:
+    gr.Label("Visual Explore NYC-Airbnb data in PyGWalker and Gradio")
+    gr.Markdown("This is a data app build with [pygwalker](https://docs.kanaries.net/pygwalker) and [gradio](https://www.gradio.app/) library. You can use drag-and-drop operations to explore the data, start your analysis now!")
+    gr.HTML(pyg.walk(dataset=df, spec="./viz-config.json", debug=False, return_html=True))
+    # gr.HTML(pyg.walk(dataset=df, debug=False, return_html=True))
+    
+demo.launch()

viz-config.json

@@ -0,0 +1 @@
+{"config":"[{\"visId\":\"gw_nvt1\",\"name\":\"Chart 1\",\"encodings\":{\"dimensions\":[{\"dragId\":\"gw_YxyY\",\"fid\":\"GW_170Q6OGL68\",\"name\":\"name\",\"basename\":\"name\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_wsL2\",\"fid\":\"GW_FV3HE3JNMAQA53SC0\",\"name\":\"host_name\",\"basename\":\"host_name\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_fn9h\",\"fid\":\"GW_2JP8XLFVSB50XOSHFXAUV98YLW8PR6UK0\",\"name\":\"neighbourhood_group\",\"basename\":\"neighbourhood_group\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_BRue\",\"fid\":\"GW_X34ULNLLNKC55MGQHI5E8FK\",\"name\":\"neighbourhood\",\"basename\":\"neighbourhood\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_H4Jp\",\"fid\":\"GW_2BCEDJ2KYSIN2ZHS\",\"name\":\"latitude\",\"basename\":\"latitude\",\"semanticType\":\"quantitative\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_Re-G\",\"fid\":\"GW_GGYX5I6DWC5400P4G\",\"name\":\"longitude\",\"basename\":\"longitude\",\"semanticType\":\"quantitative\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_LI_8\",\"fid\":\"GW_HDS3Q3AXMICVYTBU8\",\"name\":\"room_type\",\"basename\":\"room_type\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_EkhN\",\"fid\":\"GW_N4I5CDG4953P3SFZO8C0\",\"name\":\"last_review\",\"basename\":\"last_review\",\"semanticType\":\"temporal\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_ATOt\",\"fid\":\"GW_2H64QH6GL5TRVQ8G6DBHSKLHH00CSKM0YFOBXDPDROM6I0I7N4\",\"name\":\"calculated_host_listings_count\",\"basename\":\"calculated_host_listings_count\",\"semanticType\":\"quantitative\",\"analyticType\":\"dimension\"},{\"dragId\":\"gw_mea_key_fid\",\"fid\":\"gw_mea_key_fid\",\"name\":\"Measure names\",\"analyticType\":\"dimension\",\"semanticType\":\"nominal\"}],\"measures\":[{\"dragId\":\"gw_8LCp\",\"fid\":\"GW_T8QCS0\",\"name\":\"id\",\"basename\":\"id\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_dNLO\",\"fid\":\"GW_BAKL2C5NRTBG34\",\"name\":\"host_id\",\"basename\":\"host_id\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_n_vw\",\"fid\":\"GW_8NNCA2RAII8\",\"name\":\"price\",\"basename\":\"price\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_Azck\",\"fid\":\"GW_6H6RPL2S5P4DUW3NDHRLVAII8\",\"name\":\"minimum_nights\",\"basename\":\"minimum_nights\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_UqgX\",\"fid\":\"GW_1TBJBQ0OZ1J2LMLTOCBHKWSDAQGKS0\",\"name\":\"number_of_reviews\",\"basename\":\"number_of_reviews\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_Pp6N\",\"fid\":\"GW_1VND4FRL9NEN7X6C40XN4XX6GTTV00\",\"name\":\"reviews_per_month\",\"basename\":\"reviews_per_month\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_4MyG\",\"fid\":\"GW_83RZGR966DZ457EUUZP5KKAO0VG0\",\"name\":\"availability_365\",\"basename\":\"availability_365\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"},{\"dragId\":\"gw_count_fid\",\"fid\":\"gw_count_fid\",\"name\":\"Row count\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\",\"computed\":true,\"expression\":{\"op\":\"one\",\"params\":[],\"as\":\"gw_count_fid\"}},{\"dragId\":\"gw_mea_val_fid\",\"fid\":\"gw_mea_val_fid\",\"name\":\"Measure values\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"sum\"}],\"rows\":[],\"columns\":[],\"color\":[{\"dragId\":\"gw_r9IS\",\"fid\":\"GW_HDS3Q3AXMICVYTBU8\",\"name\":\"room_type\",\"basename\":\"room_type\",\"semanticType\":\"nominal\",\"analyticType\":\"dimension\"}],\"opacity\":[],\"size\":[{\"dragId\":\"gw_cmtn\",\"fid\":\"GW_8NNCA2RAII8\",\"name\":\"price\",\"basename\":\"price\",\"analyticType\":\"measure\",\"semanticType\":\"quantitative\",\"aggName\":\"mean\"}],\"shape\":[],\"radius\":[],\"theta\":[],\"longitude\":[{\"dragId\":\"gw_2kfz\",\"fid\":\"GW_GGYX5I6DWC5400P4G\",\"name\":\"longitude\",\"basename\":\"longitude\",\"semanticType\":\"quantitative\",\"analyticType\":\"dimension\"}],\"latitude\":[{\"dragId\":\"gw_xonh\",\"fid\":\"GW_2BCEDJ2KYSIN2ZHS\",\"name\":\"latitude\",\"basename\":\"latitude\",\"semanticType\":\"quantitative\",\"analyticType\":\"dimension\"}],\"geoId\":[],\"details\":[],\"filters\":[],\"text\":[]},\"config\":{\"defaultAggregated\":true,\"geoms\":[\"poi\"],\"showTableSummary\":false,\"coordSystem\":\"geographic\",\"stack\":\"stack\",\"showActions\":false,\"interactiveScale\":false,\"sorted\":\"none\",\"zeroScale\":true,\"scaleIncludeUnmatchedChoropleth\":false,\"size\":{\"mode\":\"auto\",\"width\":800,\"height\":600},\"format\":{},\"geoKey\":\"name\",\"resolve\":{\"x\":false,\"y\":false,\"color\":false,\"opacity\":false,\"shape\":false,\"size\":false},\"limit\":-1}}]","chart_map":{},"version":"0.3.9"}