Area chart

The area chart is similar to a line chart, but in addition to a line connecting (x, y) values, the area between the line and the x axis (beneath the line for non-negative y and above the line for negative y) is colored. The area chart does a good job of portraying the area covered by the data.

Parameters

In addition to the standard parameters the following apply to area charts.

dataList[dict], DataFrame

Area charts take their data from a variety of formats, including:

• A list of dictionaries, each of which has an x and a y element.
• A file containing a JSON representation of such a list.
• A file containing CSV with two numerical columns.
• A Pandas, Fireducks, pyarrow or polars DataFrame, with two columns holding the x and y values.

In addition, for data frames (or CSV files) of various types, you may also specify which columns in your data hold the x and y values:

import doodl
import pandas as pd

df = pd.DataFrame({
    "score": [86, 74, 95, 62],
    "age": [14, 15, 17, 27]
})

doodl.area_chart(
    data=df,
    x=age,
    y=score
)

Examples

This:

<areachart
  data='[
    { "x": 1, "y": 10 }, 
    { "x": 2, "y": 20 },
    { "x": 3, "y": 15 },
    { "x": 4, "y": 25 },
    { "x": 5, "y": 30 },
    { "x": 6, "y": 35 }
  ]'
  width=350
  height=350
>
</areachart>

produces this:

as do the following:

<areachart
  data='[
    { "id": 1, "score": 10 }, 
    { "id": 2, "score": 20 },
    { "id": 3, "score": 15 },
    { "id": 4, "score": 25 },
    { "id": 5, "score": 30 },
    { "id": 6, "score": 35 }
  ]'
  width=350
  height=350
  x="id"
  y="score"
>
</areachart>