rico: rich content to HTML as easy as Doc(df, plot)

03511

What is rico?

rico is a Python package for creating HTML documents from rich content: dataframes, plots, images, markdown etc. It provides a high-level, easy-to-use API with reasonable defaults, as well as low-level access for better control.

Why rico?

One might wonder, why do I need another package if I can create HTML documents with Jupyter and nbconvert? If you are working with data in Jupyter notebooks, you probably don’t need rico. But if you are working with data in Python scripts, rico can be helpful.

Here is my use case. I’m working with data in Python scripts and organizing them into data pipelines using Prefect. Sometimes I want to create a report as the last step of a pipeline. With Jupyter I would have the following routine:

  • Create a task to save all the dataframes I need for my report in Parquet files or in a database.
  • Create a Jupyter notebook to load the dataframes and visualize all the tables and plots I need.
  • Create a task to convert the notebook to HTML using nbconvert.

Creating an extra task and an extra notebook is not what bothers me the most. I have to think about how to pass data to a notebook. Sure it’s not a very hard job, but it’s not a job I want to spend my time on.

With rico, I simply create a task to add all objects I want to visualize to a document and save it to an HTML file.

How to use rico?

Installation 

pip <span>install </span>rico
pip <span>install </span>rico
pip install rico

Enter fullscreen mode Exit fullscreen mode

rico has no dependencies other than standard Python packages.

For Markdown support install markdown-it-py or Python Markdown or set your own Markdown renderer using rico.set_config.

Basic usage

rico provides both declarative and imperative style interfaces.

Declarative style: 

<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>import</span> <span>rico</span>
<span>df</span> <span>=</span> <span>pd</span><span>.</span><span>DataFrame</span><span>(</span>
    <span>{</span>
        <span>"x"</span><span>:</span> <span>[</span><span>2</span><span>,</span> <span>7</span><span>,</span> <span>4</span><span>,</span> <span>1</span><span>,</span> <span>2</span><span>,</span> <span>6</span><span>,</span> <span>8</span><span>,</span> <span>4</span><span>,</span> <span>7</span><span>],</span>
        <span>"y"</span><span>:</span> <span>[</span><span>1</span><span>,</span> <span>9</span><span>,</span> <span>2</span><span>,</span> <span>8</span><span>,</span> <span>3</span><span>,</span> <span>7</span><span>,</span> <span>4</span><span>,</span> <span>6</span><span>,</span> <span>5</span><span>],</span>
    <span>},</span>
    <span>index</span><span>=</span><span>pd</span><span>.</span><span>Index</span><span>(</span><span>list</span><span>(</span><span>"AAABBBCCC"</span><span>)),</span>
<span>)</span>
<span>plot</span> <span>=</span> <span>df</span><span>.</span><span>plot</span><span>.</span><span>scatter</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>df</span><span>,</span> <span>plot</span><span>,</span> <span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>import</span> <span>pandas</span> <span>as</span> <span>pd</span>
<span>import</span> <span>rico</span>

<span>df</span> <span>=</span> <span>pd</span><span>.</span><span>DataFrame</span><span>(</span>
    <span>{</span>
        <span>"x"</span><span>:</span> <span>[</span><span>2</span><span>,</span> <span>7</span><span>,</span> <span>4</span><span>,</span> <span>1</span><span>,</span> <span>2</span><span>,</span> <span>6</span><span>,</span> <span>8</span><span>,</span> <span>4</span><span>,</span> <span>7</span><span>],</span>
        <span>"y"</span><span>:</span> <span>[</span><span>1</span><span>,</span> <span>9</span><span>,</span> <span>2</span><span>,</span> <span>8</span><span>,</span> <span>3</span><span>,</span> <span>7</span><span>,</span> <span>4</span><span>,</span> <span>6</span><span>,</span> <span>5</span><span>],</span>
    <span>},</span>
    <span>index</span><span>=</span><span>pd</span><span>.</span><span>Index</span><span>(</span><span>list</span><span>(</span><span>"AAABBBCCC"</span><span>)),</span>
<span>)</span>
<span>plot</span> <span>=</span> <span>df</span><span>.</span><span>plot</span><span>.</span><span>scatter</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>)</span>

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>df</span><span>,</span> <span>plot</span><span>,</span> <span>title</span><span>=</span><span>"My doc"</span><span>)</span>
import pandas as pd
import rico

df = pd.DataFrame(
    {
        "x": [2, 7, 4, 1, 2, 6, 8, 4, 7],
        "y": [1, 9, 2, 8, 3, 7, 4, 6, 5],
    },
    index=pd.Index(list("AAABBBCCC")),
)
plot = df.plot.scatter(x="x", y="y")

doc = rico.Doc("Hello, World!", df, plot, title="My doc")

Enter fullscreen mode Exit fullscreen mode

The result:

Imperative style: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>"Hello, World!"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>,</span> <span>plot</span><span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>"Hello, World!"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>,</span> <span>plot</span><span>)</span>
doc = rico.Doc(title="My doc")
doc.append("Hello, World!")
doc.append(df, plot)

Enter fullscreen mode Exit fullscreen mode

The result will look the same.

Serialize the document to HTML using str(doc): 

<span>with</span> <span>open</span><span>(</span><span>"doc.html"</span><span>,</span> <span>"w"</span><span>)</span> <span>as</span> <span>f</span><span>:</span>
    <span>f</span><span>.</span><span>write</span><span>(</span><span>str</span><span>(</span><span>doc</span><span>))</span>
<span>with</span> <span>open</span><span>(</span><span>"doc.html"</span><span>,</span> <span>"w"</span><span>)</span> <span>as</span> <span>f</span><span>:</span>
    <span>f</span><span>.</span><span>write</span><span>(</span><span>str</span><span>(</span><span>doc</span><span>))</span>
with open("doc.html", "w") as f:
    f.write(str(doc))

Enter fullscreen mode Exit fullscreen mode

Also, you can call doc.serialize(indent=True) to indent the HTML element tree. For brevity, I will omit the serialization and saving to file in the following examples.

Content types

rico automatically recognizes the following content types:

  • rico content classes (subclasses of rico.ContentBase).
  • Matplotlib Pyplot Plots.
  • Dataframes, Seaborn plots, Altair charts and other types with IPython rich representation methods. Basically, rico support the same types as Jupyter.
  • Text.

Use specific classes for plots and text to change the default behavior: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Text</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>mono</span><span>=</span><span>True</span><span>),</span>  <span># The default value is False. </span>    <span>df</span><span>,</span>
    <span>rico</span><span>.</span><span>Plot</span><span>(</span><span>plot</span><span>,</span> <span>format</span><span>=</span><span>"png"</span><span>,</span> <span>bbox_inches</span><span>=</span><span>"tight"</span><span>),</span>  <span># The default value is "svg". </span>    <span>title</span><span>=</span><span>"My doc"</span><span>,</span>
<span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Text</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>mono</span><span>=</span><span>True</span><span>),</span>  <span># The default value is False. </span>    <span>df</span><span>,</span>
    <span>rico</span><span>.</span><span>Plot</span><span>(</span><span>plot</span><span>,</span> <span>format</span><span>=</span><span>"png"</span><span>,</span> <span>bbox_inches</span><span>=</span><span>"tight"</span><span>),</span>  <span># The default value is "svg". </span>    <span>title</span><span>=</span><span>"My doc"</span><span>,</span>
<span>)</span>
doc = rico.Doc(
    rico.Text("Hello, World!", mono=True),  # The default value is False.     df,
    rico.Plot(plot, format="png", bbox_inches="tight"),  # The default value is "svg".     title="My doc",
)

Enter fullscreen mode Exit fullscreen mode

The following code gives the same result as the code above: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append_text</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>mono</span><span>=</span><span>True</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>)</span>
<span>doc</span><span>.</span><span>append_plot</span><span>(</span><span>plot</span><span>,</span> <span>format</span><span>=</span><span>"png"</span><span>,</span> <span>bbox_inches</span><span>=</span><span>"tight"</span><span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append_text</span><span>(</span><span>"Hello, World!"</span><span>,</span> <span>mono</span><span>=</span><span>True</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>)</span>
<span>doc</span><span>.</span><span>append_plot</span><span>(</span><span>plot</span><span>,</span> <span>format</span><span>=</span><span>"png"</span><span>,</span> <span>bbox_inches</span><span>=</span><span>"tight"</span><span>)</span>
doc = rico.Doc(title="My doc")
doc.append_text("Hello, World!", mono=True)
doc.append(df)
doc.append_plot(plot, format="png", bbox_inches="tight")

Enter fullscreen mode Exit fullscreen mode

Use specific classes and methods for other content types:

  • Images: Image or Doc.append_image.
  • Code: Code or Doc.append_code.
  • Markdown: Markdown or Doc.append_markdown.
  • HTML tag: Tag or Doc.append_tag.
  • Raw HTML: HTML or Doc.append_html.

For example: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Markdown</span><span>(</span><span>"## Dataframe"</span><span>),</span>
    <span>df</span><span>,</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plot"</span><span>),</span>  <span># An alternative way to add a header. </span>    <span>plot</span><span>,</span>
    <span>rico</span><span>.</span><span>HTML</span><span>(</span><span>"<h2>Code</h2>"</span><span>),</span>  <span># Another way to add a header. </span>    <span>rico</span><span>.</span><span>Code</span><span>(</span><span>"print('Hello, World!')"</span><span>),</span>
    <span>title</span><span>=</span><span>"My doc"</span><span>,</span>
<span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Markdown</span><span>(</span><span>"## Dataframe"</span><span>),</span>
    <span>df</span><span>,</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plot"</span><span>),</span>  <span># An alternative way to add a header. </span>    <span>plot</span><span>,</span>
    <span>rico</span><span>.</span><span>HTML</span><span>(</span><span>"<h2>Code</h2>"</span><span>),</span>  <span># Another way to add a header. </span>    <span>rico</span><span>.</span><span>Code</span><span>(</span><span>"print('Hello, World!')"</span><span>),</span>
    <span>title</span><span>=</span><span>"My doc"</span><span>,</span>
<span>)</span>
doc = rico.Doc(
    rico.Markdown("## Dataframe"),
    df,
    rico.Tag("h2", "Plot"),  # An alternative way to add a header.     plot,
    rico.HTML("<h2>Code</h2>"),  # Another way to add a header.     rico.Code("print('Hello, World!')"),
    title="My doc",
)

Enter fullscreen mode Exit fullscreen mode

The result:

The following code gives the same result as the code above: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append_markdown</span><span>(</span><span>"## Dataframe"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>)</span>
<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plot"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>plot</span><span>)</span>
<span>doc</span><span>.</span><span>append_html</span><span>(</span><span>"<h2>Code</h2>"</span><span>)</span>
<span>doc</span><span>.</span><span>append_code</span><span>(</span><span>"print('Hello, World!')"</span><span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"My doc"</span><span>)</span>
<span>doc</span><span>.</span><span>append_markdown</span><span>(</span><span>"## Dataframe"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>df</span><span>)</span>
<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plot"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>plot</span><span>)</span>
<span>doc</span><span>.</span><span>append_html</span><span>(</span><span>"<h2>Code</h2>"</span><span>)</span>
<span>doc</span><span>.</span><span>append_code</span><span>(</span><span>"print('Hello, World!')"</span><span>)</span>
doc = rico.Doc(title="My doc")
doc.append_markdown("## Dataframe")
doc.append(df)
doc.append_tag("h2", "Plot")
doc.append(plot)
doc.append_html("<h2>Code</h2>")
doc.append_code("print('Hello, World!')")

Enter fullscreen mode Exit fullscreen mode

Layout

rico relies on Bootstrap styles. The resulting documents are responsive and mobile-friendly. Use Bootstrap classes to control document layout. For example: 

<span>import</span> <span>altair</span> <span>as</span> <span>alt</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Dataframes"</span><span>),</span>
    <span>rico</span><span>.</span><span>Div</span><span>(</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"A"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"A"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"B"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"B"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"C"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"C"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>,</span>
    <span>),</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plots"</span><span>),</span>
    <span>rico</span><span>.</span><span>Div</span><span>(</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"A"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"A"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"B"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"B"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"C"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"C"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>,</span>
    <span>),</span>
    <span>title</span><span>=</span><span>"Grid system"</span><span>,</span>
<span>)</span>
<span>import</span> <span>altair</span> <span>as</span> <span>alt</span>

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Dataframes"</span><span>),</span>
    <span>rico</span><span>.</span><span>Div</span><span>(</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"A"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"A"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"B"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"B"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"C"</span><span>),</span> <span>df</span><span>.</span><span>loc</span><span>[</span><span>"C"</span><span>,</span> <span>:],</span> <span>class_</span><span>=</span><span>"col"</span><span>),</span>
        <span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>,</span>
    <span>),</span>
    <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plots"</span><span>),</span>
    <span>rico</span><span>.</span><span>Div</span><span>(</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"A"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"A"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"B"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"B"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>rico</span><span>.</span><span>Obj</span><span>(</span>
            <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>"C"</span><span>),</span>
            <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>df</span><span>.</span><span>loc</span><span>[</span><span>"C"</span><span>,</span> <span>:]).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
            <span>class_</span><span>=</span><span>"col"</span><span>,</span>
        <span>),</span>
        <span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>,</span>
    <span>),</span>
    <span>title</span><span>=</span><span>"Grid system"</span><span>,</span>
<span>)</span>
import altair as alt

doc = rico.Doc(
    rico.Tag("h2", "Dataframes"),
    rico.Div(
        rico.Obj(rico.Tag("h3", "A"), df.loc["A", :], class_="col"),
        rico.Obj(rico.Tag("h3", "B"), df.loc["B", :], class_="col"),
        rico.Obj(rico.Tag("h3", "C"), df.loc["C", :], class_="col"),
        class_="row row-cols-auto",
    ),
    rico.Tag("h2", "Plots"),
    rico.Div(
        rico.Obj(
            rico.Tag("h3", "A"),
            alt.Chart(df.loc["A", :]).mark_point().encode(x="x", y="y"),
            class_="col",
        ),
        rico.Obj(
            rico.Tag("h3", "B"),
            alt.Chart(df.loc["B", :]).mark_point().encode(x="x", y="y"),
            class_="col",
        ),
        rico.Obj(
            rico.Tag("h3", "C"),
            alt.Chart(df.loc["C", :]).mark_point().encode(x="x", y="y"),
            class_="col",
        ),
        class_="row row-cols-auto",
    ),
    title="Grid system",
)

Enter fullscreen mode Exit fullscreen mode

The result:

How it works:

  • rico.Div represents an HTML container (<div>). You can add objects to it, just like with rico.Doc.
  • Each content element is also wrapped in a <div> container.
  • rico.Obj is a magic class that automatically determines the content type, just like rico.Doc does.
  • You can specify an HTML class attribute of a <div> container for rico.Div and for any content element such as rico.Obj.
  • The "row", "row-cols-auto", "col" classes are part of the Bootstrap Grid System. Read more in the documentation.

The following code gives the same result as the code above: 

<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"Grid system"</span><span>)</span>
<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Dataframes"</span><span>)</span>
<span>div1</span> <span>=</span> <span>rico</span><span>.</span><span>Div</span><span>(</span><span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>div1</span><span>)</span>
<span>for</span> <span>name</span><span>,</span> <span>data</span> <span>in</span> <span>df</span><span>.</span><span>groupby</span><span>(</span><span>df</span><span>.</span><span>index</span><span>):</span>
    <span>div1</span><span>.</span><span>append</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>name</span><span>),</span> <span>data</span><span>,</span> <span>class_</span><span>=</span><span>"col"</span><span>)</span>
<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plots"</span><span>)</span>
<span>div2</span> <span>=</span> <span>rico</span><span>.</span><span>Div</span><span>(</span><span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>div2</span><span>)</span>
<span>for</span> <span>name</span><span>,</span> <span>data</span> <span>in</span> <span>df</span><span>.</span><span>groupby</span><span>(</span><span>df</span><span>.</span><span>index</span><span>):</span>
    <span>div2</span><span>.</span><span>append</span><span>(</span>
        <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>name</span><span>),</span>
        <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>data</span><span>).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
        <span>class_</span><span>=</span><span>"col"</span><span>,</span>
    <span>)</span>
<span>doc</span> <span>=</span> <span>rico</span><span>.</span><span>Doc</span><span>(</span><span>title</span><span>=</span><span>"Grid system"</span><span>)</span>

<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Dataframes"</span><span>)</span>
<span>div1</span> <span>=</span> <span>rico</span><span>.</span><span>Div</span><span>(</span><span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>div1</span><span>)</span>
<span>for</span> <span>name</span><span>,</span> <span>data</span> <span>in</span> <span>df</span><span>.</span><span>groupby</span><span>(</span><span>df</span><span>.</span><span>index</span><span>):</span>
    <span>div1</span><span>.</span><span>append</span><span>(</span><span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>name</span><span>),</span> <span>data</span><span>,</span> <span>class_</span><span>=</span><span>"col"</span><span>)</span>

<span>doc</span><span>.</span><span>append_tag</span><span>(</span><span>"h2"</span><span>,</span> <span>"Plots"</span><span>)</span>
<span>div2</span> <span>=</span> <span>rico</span><span>.</span><span>Div</span><span>(</span><span>class_</span><span>=</span><span>"row row-cols-auto"</span><span>)</span>
<span>doc</span><span>.</span><span>append</span><span>(</span><span>div2</span><span>)</span>
<span>for</span> <span>name</span><span>,</span> <span>data</span> <span>in</span> <span>df</span><span>.</span><span>groupby</span><span>(</span><span>df</span><span>.</span><span>index</span><span>):</span>
    <span>div2</span><span>.</span><span>append</span><span>(</span>
        <span>rico</span><span>.</span><span>Tag</span><span>(</span><span>"h3"</span><span>,</span> <span>name</span><span>),</span>
        <span>alt</span><span>.</span><span>Chart</span><span>(</span><span>data</span><span>).</span><span>mark_point</span><span>().</span><span>encode</span><span>(</span><span>x</span><span>=</span><span>"x"</span><span>,</span> <span>y</span><span>=</span><span>"y"</span><span>),</span>
        <span>class_</span><span>=</span><span>"col"</span><span>,</span>
    <span>)</span>
doc = rico.Doc(title="Grid system")

doc.append_tag("h2", "Dataframes")
div1 = rico.Div(class_="row row-cols-auto")
doc.append(div1)
for name, data in df.groupby(df.index):
    div1.append(rico.Tag("h3", name), data, class_="col")

doc.append_tag("h2", "Plots")
div2 = rico.Div(class_="row row-cols-auto")
doc.append(div2)
for name, data in df.groupby(df.index):
    div2.append(
        rico.Tag("h3", name),
        alt.Chart(data).mark_point().encode(x="x", y="y"),
        class_="col",
    )

Enter fullscreen mode Exit fullscreen mode

More information

  • Read the more detailed user guide.
  • Take a look at the self-explanatory examples with resulting HTML documents.
  • Install rico, create your own documents.
  • Check the docstrings for details.

Feel free to create an issue to report bugs or submit a suggestions.

原文链接：rico: rich content to HTML as easy as Doc(df, plot)

展开阅读全文
© 版权声明
文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END
Python（EN）
# python# datascience# datavisualization
喜欢就支持一下吧
点赞11 分享
I can accept failure but I can’t accept not trying.
可以接受暂时的失败，但绝对不能接受未曾奋斗过的自己
kity的头像-拾光赋
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

文章目录
kity的头像-拾光赋
文章目录
今日剩余 64.4%
本周剩余 80.6%
本月剩余 21.4%
本年剩余 77.2%
最近评论
Vito的头像-拾光赋

Vito5个月前2

你就是我心中的那首忐忑，总是让我惊心动魄
Jason.Meng的头像-拾光赋钻石会员

Jason.Meng徽章-人气大使-拾光赋5个月前2

总是会在人生的不同阶段反复爱上大佬的文章~
每日一言
Believe you can and you’re halfway there.
相信自己，你也就成功了一半