def customize_visualization(request):

    search_line = "def customize_visualization(request):"

    pattern = "# end_customize"

    content_json = "/static/json/data-science/content.json"

    project_key = "data-visualization/customize/"

    template_path = "portfolio/templates/data-science/data-visualization/customize.html"

    answer = []  # Initialize list to store results

    CI = []

    try:

        # Call the get_views_code to retrieve code in the views file

        views_code = get_views_code(search_line, pattern, module_dir)

        content_json_data = get_content_json_data(content_json, project_key)

        template_code = get_template_code(template_path)

        # Customized Data Visualization for Informed Decision-Making

        # Data collection, to generate the data it was used the Numpy library to seed data into a DataFrame.

        df = pd.DataFrame([np.random.normal(32000, 200000, 3650),

                           np.random.normal(43000, 100000, 3650),

                           np.random.normal(43500, 140000, 3650),

                           np.random.normal(48000, 70000, 3650),

                           np.random.normal(48000, 70000, 3650),

                            np.random.normal(58000, 170000, 3650),

                           np.random.normal(38000, 100000, 3650),

                           np.random.normal(23000, 85000, 3650),

                           np.random.normal(64000, 90000, 3650),

                           np.random.normal(78000, 100000, 3650)],

                          index=[2014,2015, 2016, 2017, 2018, 2019,2020, 2021, 2022, 2023])

        raw_data = th_scope(df.to_html(classes='table table-bordered table-striped to_html', index=True))

        df = df.transpose()

        df_to_html = th_scope(df.to_html(classes='table table-bordered table-striped to_html', index=True))

        sample_size = len(df)

        mean_list = df.mean(axis=0).tolist()

        mean_list = ['%.2f' % elem for elem in mean_list]

        mean_list = [float(i) for i in mean_list]

        print(mean_list)

        std_list = df.std(axis=0).tolist()

        std_list = ['%.2f' % elem for elem in std_list]

        std_list = [float(i) for i in std_list]

        print(std_list)

        attribute_name = df.columns.values.tolist()

        print(attribute_name)

        # Calculate interval confidence of 95%, Z= 1.96

        for i in range(10):

            CI.append(1.96 * float(std_list[i]) / math.sqrt(sample_size))

        CI = ['%.2f' % elem for elem in CI]

        confidence = [float(i) for i in CI]

        print(CI)

        print(confidence)

        # Create a DataFrame to Combines list with result

        # Combine the mean_list, std_list, and attribute_name into a dictionary

        data = {

            'Attribute Name': attribute_name,

            'Mean Value': mean_list,

            'Standard Deviation': std_list,

            'Confidence': confidence

        }

        # Create a DataFrame from the dictionary

        df_combined = pd.DataFrame(data)

        data_to_html = th_scope(df_combined.to_html(classes='table table-bordered table-striped to_html', index=True))

        print(df)

        print(df_combined)

        x_pos = np.arange(len(attribute_name))

        # Option color bar, for default threshold was assigned with Mean value

        threshold = np.mean(mean_list)

        blues = cm.Blues

        reds = cm.Reds

        def colorForBar(mean_list, threshold, confidence):

            if (mean_list - confidence) <= threshold and (mean_list + confidence) >= threshold:

                return "white"

            if mean_list < threshold:

                return "blue"

            if mean_list > threshold:

                return "red"

        colors = []

        for i in range(0, len(mean_list)):

            colors.append(colorForBar(int(mean_list[i]), threshold, int(confidence[i])))

        fig, ax = plt.subplots()

        ax.bar(x_pos, mean_list, bottom=0, width=0.5, color=colors, yerr=confidence,

               error_kw={'capsize': 10, 'elinewidth': 2, 'alpha': 0.7}, align='center')

        ax.yaxis.set_ticks_position('none')

        ax.axhline(y=threshold, zorder=10, linestyle='--', color='orangered', label='Threshold')

        ax.set_ylabel('Value')

        ax.set_xlabel('Age')

        ax.set_xticks(x_pos)

        ax.set_facecolor('.9')

        ax.set_xticklabels(attribute_name)

        ax.set_title('Mean Values with 95% Confidence Intervals for Each Year')

        ax.spines['right'].set_visible(False)

        ax.spines['top'].set_visible(False)

        # Save the plot to a BytesIO object

        graphic = decode_graph(plt)

        # Create a new figure using errorbar method

        plt.figure(figsize=(10, 6))

        # Plot the mean values as bars

        plt.bar(attribute_name, mean_list, color='lightblue', alpha=0.7, label='Mean Value')

        # Add error bars representing confidence intervals

        plt.errorbar(attribute_name, mean_list, yerr=confidence, fmt='o', color='darkblue', label='95% CI')

        # Add labels and a title

        plt.xlabel('Year')

        plt.ylabel('Value')

        plt.title('Mean Values with 95% Confidence Intervals for Each Year')

        # Add a legend

        plt.legend()

        # Show the plot

        plt.grid(axis='y', linestyle='--', alpha=0.7)

        plt.tight_layout()

        # Save the plot to a BytesIO object

        graphic2 = decode_graph(plt)

        context = {

            'views': views_code, 'content': content_json_data, 'template': template_code,

            'answer': answer, 'raw_data': raw_data, 'df_transpose': df_to_html, 'data_to_html': data_to_html,

            'graphic': graphic, 'graphic2': graphic2

        }

        return render(request, 'data-science/data-visualization/customize.html', context)

    except FileNotFoundError:

        context = {'description': 'File not found. Please check the file path or create the file if it does not',

                   'reference': "Read & Process Excel files with Data Frame"}

        return render(request, 'data-science/retrieve_error.html', context)

    except TemplateDoesNotExist:

        context = {'description': 'Template not found. Please check the file path or create the file if it does not',

                   'reference': "Books Store connection from XML File"}

        return render(request, 'data-science/retrieve_error.html', context)

    else:

        context = {'description': 'Something is wrong to retrieve data.',

                   'reference': "Something wrong with retrieving Data with Pandas"}

        return render(request, 'data-science/retrieve_error.html', context)

{% extends 'base.html' %}

{% load i18n %}
{% load static %}
{% load cached_pygments %}
{% block title %}{% trans "Customized Charts (matplotlib)" %} | Marco A. Parra F.{% endblock %}
{% block meta_description %}{% trans "Styling matplotlib figures: colours, markers, annotations and legends, rendered in Django." %}{% endblock %}
{% block content %}
<br>
<br>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="card">
                {% for key, values in content.items %}
                {% for items in content.values %}
                {% for value in items %}
                    <h2 class="cart-title text-center">{{ value.title }}</h2>
                    <hr>
                    <div class="card-body mb-3">
                        <h5 class="card-subtitle mb-3">{{ value.description }}</h5>
                        <p class="card-text">{{ value.key_components }}</p>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <h1>Step By Step data processing</h1>
        <hr>
        <div class="row g-0 mb-3 ">
            <div class="portfolio-box-caption">
                <h3>Data Collections</h3>
                <div class="row">
                    <p>{{ value.data_collection }}</p>
                    <em>Explore the paper's reference for more insights and details on this project's inspiration.<br>
                        <a href="https://www.microsoft.com/en-us/research/wp-content/uploads/2016/02/Ferreira_Fisher_Sample_Oriented_Tasks.pdf" target="_blank">
                            Sample-oriented task-driven visualizations: allowing users to make better, more confident decisions.</a>
                    </em>
                </div>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    <pre>
                        <code class="python">
df = pd.DataFrame([np.random.normal(32000, 200000, 3650),
   np.random.normal(43000, 100000, 3650),np.random.normal(43500, 140000, 3650),np.random.normal(48000, 70000, 3650),
   np.random.normal(48000, 70000, 3650),np.random.normal(58000, 170000, 3650),np.random.normal(38000, 100000, 3650),
   np.random.normal(23000, 85000, 3650),np.random.normal(64000, 90000, 3650),np.random.normal(78000, 100000, 3650)],
  index=[2014,2015, 2016, 2017, 2018, 2019,2020, 2021, 2022, 2023])
                        </code>
                    </pre>
                </div>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    {{ raw_data|safe }}
                </div>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    <p>The next code line is useful when you want to work with your data in a different orientation, such as when you want to perform calculations or visualizations with the data in a format that better suits your needs.</p>
                    <pre>
                        <code class="python">
df = df.transpose()
                        </code>
                    </pre>
                </div>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    {{ df_transpose|safe }}
                </div>
            </div>
        </div>
        <hr>
        <div class="row g-0 mb-3">
            <div class="portfolio-box-caption">
                <h3>Data Preparation, and Exploration</h3>
                <div class="row">
                    <p>{{ value.data_preparation_exploration }}</p>
                </div>
                <div class="row container-app">
                    <pre>
                        <code>
sample_size = len(df)
mean_list = df.mean(axis=0).tolist()
mean_list = ['%.2f' % elem for elem in mean_list]
mean_list = [float(i) for i in mean_list]
std_list = df.std(axis=0).tolist()
std_list = ['%.2f' % elem for elem in std_list]
std_list = [float(i) for i in std_list]
attribute_name = df.columns.values.tolist()
for i in range(10):
    CI.append(1.96 * float(std_list[i]) / math.sqrt(sample_size))

CI = ['%.2f' % elem for elem in CI]
confidence = [float(i) for i in CI]

data = {
    'Attribute Name': attribute_name,
    'Mean Value': mean_list,
    'Standard Deviation': std_list,
    'Confidence': confidence
}
df_combined = pd.DataFrame(data)
                        </code>
                    </pre>
                </div>
                <hr>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                   {{ data_to_html|safe }}
                </div>
            </div>
        </div>
        <hr>
        <div class="row g-0 mb-3">
            <div class="portfolio-box-caption">
                <h3>Dynamic Color Visualization for Yearly Data Analysis</h3>
                <div class="row">
                    <p>{{ value.data_visualization_color }}</p>
                </div>
                <div class="row container-app">
                    <pre>
                        <code>
from matplotlib import cm
threshold = np.mean(mean_list)
blues = cm.Blues
reds = cm.Reds

def colorForBar(mean_list, threshold, confidence):
    if (mean_list - confidence) <= threshold and (mean_list + confidence) >= threshold:
        return "white"
    if mean_list < threshold:
        return "blue"
    if mean_list > threshold:
        return "red"

colors = []
for i in range(0, len(mean_list)):
    colors.append(colorForBar(int(mean_list[i]), threshold, int(confidence[i])))
                        </code>
                    </pre>
                </div>
                <hr>
            </div>
        </div>
        <hr>
         <div class="row g-0 mb-3">
            <div class="portfolio-box-caption">
                <h3>Efficient Graph Rendering and Integration for Dynamic Web Applications</h3>
                <div class="row">
                    <p>{{ value.rendering_integration_graph }}</p>
                </div>
                <div class="row container-app">
                    <pre>
                        <code>
from io import BytesIO
import base64

def decode_graph(plt):
    # Save the plot to a BytesIO object
    buffer = BytesIO()
    plt.savefig(buffer, format='png')
    buffer.seek(0)
    image_png = buffer.getvalue()
    buffer.close()
    # Encode the image to base64
    graphic = base64.b64encode(image_png).decode()

    return  graphic
                        </code>
                    </pre>
                </div>
            </div>
        </div>
        <hr>
        <div class="row g-0 mb-3">
            <div class="portfolio-box-caption">
                <h3>Enhancing Data Insights: Leveraging Matplotlib for Interactive Visualizations in Your Django Project</h3>
                <div class="row">
                    <p>
                        {{ value.data_visualization }}
                    </p>
                    <em>In the virtual environment is necessary install the matplolib library and realize the importation in the views.py</em>
                </div>
                <div class="row container-app">
                    <pre>
                        <code>
fig, ax = plt.subplots()
ax.bar(x_pos, mean_list, bottom=0, width=0.5, color=colors, yerr=confidence,
       error_kw={'capsize': 10, 'elinewidth': 2, 'alpha': 0.7}, align='center')
ax.yaxis.set_ticks_position('none')
ax.axhline(y=threshold, zorder=10, linestyle='--', color='orangered', label='Threshold')
ax.set_ylabel('Value')
ax.set_xlabel('Age')
ax.set_xticks(x_pos)
ax.set_facecolor('.9')
ax.set_xticklabels(attribute_name)
ax.set_title('Mean Values with 95% Confidence Intervals for Each Year')
ax.spines['right'].set_visible(False)
ax.spines['top'].set_visible(False)
graphic = decode_graph(plt)
                        </code>
                    </pre>
                </div>
                <div class="row container-app" style="width: 100%; max-height: 70rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    <img src="data:image/png;base64,{{ graphic }}" alt="Customize 1" class="img-fluid">
                </div>
            </div>
        </div>
        <hr>
        <div class="row g-0 mb-3">
            <div class="portfolio-box-caption">
                <h3>Dynamically Generating and Serving Graphs in Your Django Application (Using errorbar)</h3>
                <div class="row">
                    <p>{{ value.data_visualization2 }}</p>
                </div>
                <div class="row container-app">
                    <pre>
                        <code>
plt.figure(figsize=(10, 6))
plt.bar(attribute_name, mean_list, color='lightblue', alpha=0.7, label='Mean Value')
plt.errorbar(attribute_name, mean_list, yerr=confidence, fmt='o', color='darkblue', label='95% CI')
plt.xlabel('Year')
plt.ylabel('Value')
plt.title('Mean Values with 95% Confidence Intervals for Each Year')
plt.legend()
plt.grid(axis='y', linestyle='--', alpha=0.7)
plt.tight_layout()
graphic2 = decode_graph(plt)
                        </code>
                    </pre>
                </div>
                <div class="row container-app" style="width: 100%; max-height: 50rem; /* Set the desired height here */
        overflow-y: scroll; /* Enable vertical scrolling */">
                    <img src="data:image/png;base64,{{ graphic2 }}" alt="Graph with errobar">
                </div>
                <div class="row">
                    <p>{{ value.data_analysis }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
        {% endfor %}
        {% endfor %}
        <hr>
    </div>
</section>

<section class="container-section mb-4">
    <div class="container-fluid">
        <div class="row g-0">
            <div class="portfolio-box-caption">
                <div class="row">
                    <div class="col-12 col-sm-10">
                        <h3 class="portfolio-box-headers" style="text-align:center">
                            {% trans "Show Code" %}</h3>
                    </div>
                    <div class="col">
                        <button type="button" class="btn btn-light" onclick="$('#section-w').toggle();">
                            Show/Hide
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <div class="container" style="display:none;" id="section-w">
                <div class="row mb-4">
                    <div class="col">
                        <h4>views.py Code</h4>
                        <div class="sourcecode">
                            {% for item in views %}
                            {{ item|pygmentize:"python3" }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col">
                        <h4>Template</h4>
                        <div class="sourcecode">
                            {{ template|pygmentize:"html" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}