Simple charts notebook

import%20marimo%0A%0A__generated_with%20%3D%20%220.22.0%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22%2C%20app_title%3D%22Simple%20charts%20notebook%22)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%20**Simple%20charts%20notebook**%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Aasync%20def%20_()%3A%0A%20%20%20%20%23%20Install%20the%20necessary%20packages%20only%20when%20running%20in%20WASM%20(browser)%20mode.%0A%20%20%20%20import%20sys%0A%0A%20%20%20%20if%20sys.platform%20%3D%3D%20'emscripten'%3A%20%20%23%20WASM%20mode%0A%20%20%20%20%20%20%20%20import%20micropip%0A%20%20%20%20%20%20%20%20await%20micropip.install(%5B'aframexr'%2C%20'wcwidth'%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20aframexr%0A%20%20%20%20import%20json%0A%20%20%20%20import%20urllib.request%20%20%23%20To%20import%20files%20from%20web%0A%0A%0A%20%20%20%20data_str%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20%5B%7B%22model%22%3A%20%22leon%22%2C%20%22motor%22%3A%20%22electric%22%2C%20%22color%22%3A%20%22red%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%2010%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22ibiza%22%2C%20%22motor%22%3A%20%22electric%22%2C%20%22color%22%3A%20%22white%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%203%2C%20%22sales%22%3A%2015%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22cordoba%22%2C%20%22motor%22%3A%20%22diesel%22%2C%20%22color%22%3A%20%22black%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%203%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22toledo%22%2C%20%22motor%22%3A%20%22diesel%22%2C%20%22color%22%3A%20%22white%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%2018%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22altea%22%2C%20%22motor%22%3A%20%22diesel%22%2C%20%22color%22%3A%20%22red%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%204%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22arosa%22%2C%20%22motor%22%3A%20%22electric%22%2C%20%22color%22%3A%20%22red%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%203%2C%20%22sales%22%3A%2012%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22alhambra%22%2C%20%22motor%22%3A%20%22diesel%22%2C%20%22color%22%3A%20%22white%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%205%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22600%22%2C%20%22motor%22%3A%20%22gasoline%22%2C%20%22color%22%3A%20%22yellow%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%203%2C%20%22sales%22%3A%2020%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22127%22%2C%20%22motor%22%3A%20%22gasoline%22%2C%20%22color%22%3A%20%22white%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%205%2C%20%22sales%22%3A%202%7D%2C%0A%20%20%20%20%20%20%20%20%7B%22model%22%3A%20%22panda%22%2C%20%22motor%22%3A%20%22gasoline%22%2C%20%22color%22%3A%20%22black%22%2C%0A%20%20%20%20%20%20%20%20%22doors%22%3A%203%2C%20%22sales%22%3A%2013%7D%5D%0A%20%20%20%20%22%22%22%0A%20%20%20%20data%20%3D%20aframexr.Data.from_json(data_str)%20%20%23%20Raw%20data%0A%20%20%20%20url_data%20%3D%20aframexr.UrlData('https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fdavidlab20%2FTFG%2Fdocs%2Fstatic%2Fdata%2Fdata.json')%0A%20%20%20%20return%20aframexr%2C%20data%2C%20json%2C%20url_data%2C%20urllib%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20data)%3A%0A%20%20%20%20%23%20Pie%20chart%20with%20data%20as%20Data%20object%0A%20%20%20%20pieChart%20%3D%20aframexr.Chart(data%2C%20position%3D'0%202%20-5').mark_arc().encode(color%3D'model'%2C%20theta%3D'sales')%0A%20%20%20%20pieChart.show()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20url_data)%3A%0A%20%20%20%20%23%20Pie%20chart%20with%20data%20as%20UrlData%20object%0A%20%20%20%20pieChartJSON%20%3D%20aframexr.Chart(url_data%2C%20position%3D'0%202%20-5').mark_arc().encode(color%3D'model'%2C%20theta%3D'sales')%0A%20%20%20%20pieChartJSON.show()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20data)%3A%0A%20%20%20%20%23%20Bars%20chart%20with%20data%20as%20Data%20object%0A%20%20%20%20barsChart%20%3D%20aframexr.Chart(data%2C%20position%3D'0%202%20-5').mark_bar().encode(x%3D'model'%2C%20y%3D'sales')%0A%20%20%20%20barsChart.show()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20url_data)%3A%0A%20%20%20%20%23%20Bars%20chart%20with%20data%20as%20UrlData%20object%0A%20%20%20%20barsChartJSON%20%3D%20aframexr.Chart(url_data%2C%20position%3D'0%202%20-5').mark_bar().encode(x%3D'model'%2C%20y%3D'sales')%0A%20%20%20%20barsChartJSON.show()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20json%2C%20urllib)%3A%0A%20%20%20%20%23%20Import%20a%20chart%20from%20a%20JSON%20file%20storing%20the%20specifications%20of%20the%20chart%0A%20%20%20%20with%20urllib.request.urlopen('https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fdavidlab20%2FTFG%2Fdocs%2Fstatic%2Fdata%2Fsimple_chart.json')%20as%20json_chart%3A%0A%20%20%20%20%20%20%20%20json_specs%20%3D%20json.load(json_chart)%0A%0A%20%20%20%20imported_chart%20%3D%20aframexr.Chart.from_dict(json_specs)%0A%20%20%20%20imported_chart.show()%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(%22%22%22%0A%20%20%20%20%23%23%23%20Line%20chart%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(aframexr)%3A%0A%20%20%20%20%23%20Line%20chart%20with%20no%20point%20markers%0A%20%20%20%20line_data%20%3D%20aframexr.UrlData('https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fdavidlab20%2FTFG%2Fdocs%2Fstatic%2Fdata%2Fmodel_year_sales.json')%0A%20%20%20%20line_chart%20%3D%20aframexr.Chart(line_data%2C%20position%3D'0%202%20-5').mark_line().encode(x%3D'year%3AN'%2C%20y%3D'sales'%2C%20color%3D'model')%0A%20%20%20%20line_chart%0A%20%20%20%20return%20(line_data%2C)%0A%0A%0A%40app.cell%0Adef%20_(aframexr%2C%20line_data)%3A%0A%20%20%20%20%23%20Line%20chart%20with%20point%20markers%0A%20%20%20%20line_chart_markers%20%3D%20aframexr.Chart(line_data%2C%20position%3D'0%202%20-5').mark_line(point%3DTrue).encode(x%3D'year%3AN'%2C%20y%3D'sales'%2C%20color%3D'model')%0A%20%20%20%20line_chart_markers%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20return%20(mo%2C)%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A