График и уценка рядом в Jupyter Notebook

В моих руках следующий вариант вашего кода работает как следующий шаг (окончательный вариант см. в разделе «Обновление» ниже):

#based on https://stackoverflow.com/q/78670150/8508004, and adapting to put matplotlib in a widget from https://stackoverflow.com/a/51060721/8508004 (which I think was adapted in some ways from https://github.com/jupyter-widgets/ipywidgets/issues/2821)
from ipywidgets import widgets, Layout
from IPython.display import display, Javascript, Markdown as md
import numpy as np
import matplotlib.pyplot as plt

left_widget = widgets.Output()
def func(x, a, b, c, d):
    return a + b*np.exp(c*x + d)

the_x = np.arange(0, 10, 0.5)
the_y = func(the_x, 1, 1, -1, 2)

with left_widget:
    fig, ax = plt.subplots()
    ax.plot(the_x, the_y)
    plt.show(fig)

len_x = len(the_x)

mdout = md(f"""There are {len_x} **elements** of both `the_x`, and `the_y`;
Those values are plotted on the diagram on the left""")

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='auto'
                   )

hbox1 = widgets.Box(children=[left_widget, widgets.HTML(mdout._repr_markdown_())], layout=box_layout)
display(hbox1)

Единственным реальным изменением была упаковка объекта графика Matplotlib в контекст виджета Output() ipywidget, который «может захватывать и отображать стандартный вывод, стандартный вывод и расширенный вывод, сгенерированный IPython», а затем использование этого виджета в качестве левой стороны для перечисленных дочерних элементов. в поле ipywidget. (Найдите код, относящийся к left_widget, чтобы увидеть отличия от исходного предоставленного кода.)

Связанные ресурсы:

• Мой ответ на вопрос «Как отображать графики matplotlib в виджете вкладки Jupyter?» (я думаю, что часть кода в ОП была в некотором роде адаптирована из Отображение ранее созданной фигуры Matplotlib в виджете)

ОБНОВЛЯТЬ:

Чтобы учесть тот факт, что источник адаптированного решения не включал обработку отображения необработанного кода уценки как полностью визуализированного уценки в области справа, я теперь добавил обработку этого. Вам потребуется установить пакеты для первых двух подходов, которые я предлагаю. (Для markdown2 я поместил команду в связанные блокноты: «Установите ее из работающих блокнотов Juyter с помощью %conda install -c conda-forge markdown2 или %pip install markdown2».).
Первые два решения фактически добавляют рендеринг еще одного элемента уценки, чтобы показать, что их можно быстрее адаптировать. И на самом деле, если вам не нужен текст между обратными кавычками, отображаемый как стиль «код», вы можете выполнить стиль без использования CSS. Подробную информацию см. в сопутствующем блокноте Jupyter, указанном в нижней части этого раздела для получения дополнительной информации. информация.
(На самом деле CSS, используемый в первых двух вариантах, может быть проще, но я поместил здесь полную информацию о CSS для всех элементов, чтобы убедиться, что он работает в полной мере.)

Предлагаемое решение А:

#based on https://stackoverflow.com/q/78670150/8508004, and adapting to put matplotlib in a widget from https://stackoverflow.com/a/51060721/8508004 (which I think was adapted in some ways from https://github.com/jupyter-widgets/ipywidgets/issues/2821)
from ipywidgets import widgets, Layout, HTML
from IPython.display import display
import numpy as np
import matplotlib.pyplot as plt
import markdown

left_widget = widgets.Output()
def func(x, a, b, c, d):
    return a + b*np.exp(c*x + d)

the_x = np.arange(0, 10, 0.5)
the_y = func(the_x, 1, 1, -1, 2)

with left_widget:
    fig, ax = plt.subplots()
    ax.plot(the_x, the_y)
    plt.show(fig)

len_x = len(the_x)

md_content = f"""# (Markdown Heading Rendered) RESULTS:

There are {len_x} **elements** of both `the_x`, and `the_y`;
Those values are plotted on the diagram on the left"""

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='auto'
                   )
html_content = markdown.markdown(md_content)
markdown_widget = HTML(
    value=f"""
    <style>
    .markdown-body {{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
        font-size: 16px;
        line-height: 1.5;
        word-wrap: break-word;
    }}
    .markdown-body h1 {{
        padding-bottom: .3em;
        font-size: 2em;
        border-bottom: 1px solid #eaecef;
    }}
    .markdown-body strong {{
        font-weight: 600;
    }}
    .markdown-body code {{
        padding: .2em .4em;
        margin: 0;
        font-size: 85%;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
    }}
    </style>
    <div class = "markdown-body">
    {html_content}
    </div>
    """
)
hbox1 = widgets.Box(children=[left_widget, markdown_widget], layout=box_layout)
display(hbox1)

Предлагаемое решение Б:

#based on https://stackoverflow.com/q/78670150/8508004, and adapting to put matplotlib in a widget from https://stackoverflow.com/a/51060721/8508004 (which I think was adapted in some ways from https://github.com/jupyter-widgets/ipywidgets/issues/2821)
from ipywidgets import widgets, Layout
import numpy as np
import matplotlib.pyplot as plt
import markdown2

left_widget = widgets.Output()
def func(x, a, b, c, d):
    return a + b*np.exp(c*x + d)

the_x = np.arange(0, 10, 0.5)
the_y = func(the_x, 1, 1, -1, 2)

with left_widget:
    fig, ax = plt.subplots()
    ax.plot(the_x, the_y)
    plt.show(fig)

len_x = len(the_x)

md_content = f"""# (Markdown Heading Rendered) RESULTS:

There are {len_x} **elements** of both `the_x`, and `the_y`;
Those values are plotted on the diagram on the left"""

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='auto'
                   )

html_content = markdown2.markdown(md_content)
markdown_widget = widgets.HTML(
    value=f"""
    <style>
    .markdown-body {{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
        font-size: 16px;
        line-height: 1.5;
        word-wrap: break-word;
    }}
    .markdown-body h1 {{
        padding-bottom: .3em;
        font-size: 2em;
        border-bottom: 1px solid #eaecef;
    }}
    .markdown-body strong {{
        font-weight: 600;
    }}
    .markdown-body code {{
        padding: .2em .4em;
        margin: 0;
        font-size: 85%;
        background-color: rgba(27,31,35,.05);
        border-radius: 3px;
    }}
    </style>
    <div class = "markdown-body">
    {html_content}
    </div>
    """
)
hbox1 = widgets.Box(children=[left_widget, markdown_widget], layout=box_layout)
display(hbox1)

Предлагаемое решение C:

from ipywidgets import widgets, Layout
import numpy as np
import matplotlib.pyplot as plt

left_widget = widgets.Output()
def func(x, a, b, c, d):
    return a + b*np.exp(c*x + d)

the_x = np.arange(0, 10, 0.5)
the_y = func(the_x, 1, 1, -1, 2)

with left_widget:
    fig, ax = plt.subplots()
    ax.plot(the_x, the_y)
    plt.show(fig)

len_x = len(the_x)

md_content = f"""There are {len_x} **elements** of both `the_x`, and `the_y`;
Those values are plotted on the diagram on the left"""

box_layout = Layout(display='flex',
                    flex_flow='row',
                    justify_content='space-around',
                    width='auto'
                   )

def simple_markdown_to_html(text):
    # Handle bold text
    text = text.replace('**', '<strong>', 1).replace('**', '</strong>', 1)
    # Handle inline code
    while '`' in text:
        text = text.replace('`', '<code>', 1).replace('`', '</code>', 1)
    return text

html_content = simple_markdown_to_html(md_content)

markdown_widget = widgets.HTML(
    value=f"""
    <style>
    .markdown-body {{
        font-family: Arial, sans-serif;
        padding: 10px;
    }}
    .markdown-body strong {{
        font-weight: bold;
    }}
    .markdown-body code {{
        background-color: #f0f0f0;
        padding: 2px 4px;
        border-radius: 3px;
        font-family: monospace;
    }}
    </style>
    <div class = "markdown-body">
    {html_content}
    </div>
    """
)

hbox1 = widgets.Box(children=[left_widget, markdown_widget], layout=box_layout)
display(hbox1)

Для получения полной информации просмотрите код и результат, полученный с начальной точки, в файле блокнота Jupyter лучше всего смотреть здесь.

Связанные ресурсы для преобразования текста и оформления уценки:

• Сообщение о проблеме «Создание виджета уценки» на странице проблем ipywidgets охватывает преобразование обычного текста с нотацией разметки в HTML-представление рендеринга уценки, которое затем можно обернуть в виджет HTML.
• См. ответ на вопрос «Как установить высоту pywidgets.Text?» и [этот ответ на вопрос «Примеры стилизации виджетов — это традиционно или хак?»] для получения соответствующей информации о стилизации с помощью CSS HTML-кода, который будет помещен в виджет HTML.