diff --git a/_sources/index_en.rst b/_sources/index_en.rst index 07582b56c2..6a3d6e312f 100644 --- a/_sources/index_en.rst +++ b/_sources/index_en.rst @@ -54,6 +54,6 @@ Contents: challenges/Reto03_en.rst challenges/Reto04_en.rst challenges/Reto05_en.rst - + poc/pandas_en.rst diff --git a/_sources/poc/pandas_en.rst b/_sources/poc/pandas_en.rst new file mode 100644 index 0000000000..1638112dda --- /dev/null +++ b/_sources/poc/pandas_en.rst @@ -0,0 +1,216 @@ +=============== +Pandas Exercise +=============== + +Introduction +------------ +Pandas is a Python library for data manipulation and analysis, offering: + +1. ``DataFrame``: Two-dimensional labeled data structure resembling a spreadsheet. +2. ``Series``: One-dimensional labeled arrays, the building blocks of DataFrames. +3. ``Data Manipulation``: Functions for reading, writing, filtering, and transforming data. +4. ``Integration``: Seamless integration with other Python libraries. +5. ``Performance``: Built on NumPy for fast array operations, optimized for large datasets. + +Exercise +-------- +This exercise will cover the basics of Pandas + +This is a sample code for plotting a graph using Pandas + +.. code:: python + + import js + import pandas as pd + + # Dataset of programming languages and their popularity ratings + languages_data = { + "Language": ["Python", "JavaScript", "Java", "C++", "C#", "PHP"], + "Popularity": [5, 4.8, 4.5, 4.2, 4, 3.8], + } + + languages_df = pd.DataFrame(languages_data) + + current_selected = [] + flavour_elements = js.document.getElementsByName("flavour") + + def plot(data): + # Calculate plot dimensions + width = 400 + height = 300 + margin = 50 + plot_width = width - 2 * margin + plot_height = height - 2 * margin + + # Calculate scale for y-axis + max_rating = max(data["Popularity"]) + y_scale = plot_height / max_rating + + # Generate SVG for the plot + svg = f'' + + # Draw y-axis + svg += f'' + svg += f'Popularity' + + # Draw y-axis scale + for i in range(1, int(max_rating) + 1): + y = height - margin - (i * plot_height / max_rating) + svg += f'' + svg += f'{i}' + + # Draw x-axis + svg += f'' + svg += f'Language' + + # Calculate bar width and spacing + num_bars = len(data) + bar_width = plot_width / num_bars * 0.6 + spacing = plot_width / num_bars * 0.4 + + # Draw bars + for idx, (language, popularity) in enumerate(zip(data["Language"], data["Popularity"])): + x = margin + idx * (bar_width + spacing) + y = height - margin - (popularity * y_scale) + svg += f'' + svg += f'{language}' + + svg += '' + + # Display SVG in the graph area + js.document.getElementById("graph-area").innerHTML = svg + + def select_language(event): + for ele in flavour_elements: + if ele.checked: + current_selected = ele.value + break + if current_selected == "ALL": + plot(languages_df) + else: + filter = languages_df.apply(lambda x: ele.value.lower() in x["Language"].lower(), axis=1) + plot(languages_df[filter]) + + ele_proxy = select_language + + for ele in flavour_elements: + if ele.value == "ALL": + ele.checked = True + current_selected = ele.value + ele.addEventListener("change", ele_proxy) + + plot(languages_df) + +Instructions +------------ +Press ``SHIFT + ENTER`` to run the code + +.. raw:: html + +
+ + + Programming Language Ratings + + + + + + + + packages = ["pandas"] + + + + import js + import pandas as pd + + # Dataset of programming languages and their popularity ratings + languages_data = { + "Language": ["Python", "JavaScript", "Java", "C++", "C#", "PHP"], + "Popularity": [5, 4.8, 4.5, 4.2, 4, 3.8], + } + + languages_df = pd.DataFrame(languages_data) + + current_selected = [] + flavour_elements = js.document.getElementsByName("flavour") + + def plot(data): + # Calculate plot dimensions + width = 400 + height = 300 + margin = 50 + plot_width = width - 2 * margin + plot_height = height - 2 * margin + + # Calculate scale for y-axis + max_rating = max(data["Popularity"]) + y_scale = plot_height / max_rating + + # Generate SVG for the plot + svg = f'' + + # Draw y-axis + svg += f'' + svg += f'Popularity' + + # Draw y-axis scale + for i in range(1, int(max_rating) + 1): + y = height - margin - (i * plot_height / max_rating) + svg += f'' + svg += f'{i}' + + # Draw x-axis + svg += f'' + svg += f'Language' + + # Calculate bar width and spacing + num_bars = len(data) + bar_width = plot_width / num_bars * 0.6 + spacing = plot_width / num_bars * 0.4 + + # Draw bars + for idx, (language, popularity) in enumerate(zip(data["Language"], data["Popularity"])): + x = margin + idx * (bar_width + spacing) + y = height - margin - (popularity * y_scale) + svg += f'' + svg += f'{language}' + + svg += '' + + # Display SVG in the graph area + js.document.getElementById("graph-area").innerHTML = svg + + def select_language(event): + for ele in flavour_elements: + if ele.checked: + current_selected = ele.value + break + if current_selected == "ALL": + plot(languages_df) + else: + filter = languages_df.apply(lambda x: ele.value.lower() in x["Language"].lower(), axis=1) + plot(languages_df[filter]) + + ele_proxy = select_language + + for ele in flavour_elements: + if ele.value == "ALL": + ele.checked = True + current_selected = ele.value + ele.addEventListener("change", ele_proxy) + + plot(languages_df) + + + + + languages_df + + +
+ + + +