|
1 | 1 | # area-basic: Basic Area Chart |
2 | 2 |
|
3 | | -A fundamental area chart that visualizes data as a filled region between the line and the axis, ideal for showing magnitude and trends over time or ordered categories. |
| 3 | +## Description |
4 | 4 |
|
5 | | -## Data Requirements |
| 5 | +An area chart displaying a single data series as a filled region under a line. The filled area emphasizes magnitude and cumulative values over a sequence, making trends more visually impactful than simple line plots. Best suited for time series data where you want to highlight volume or accumulated quantities. |
6 | 6 |
|
7 | | -- **x**: Numeric or categorical column for x-axis values (often time or sequence) |
8 | | -- **y**: Numeric column for y-axis values (the values to plot) |
| 7 | +## Data |
9 | 8 |
|
10 | | -## Optional Parameters |
| 9 | +**Required columns:** |
| 10 | +- `x` (numeric/datetime) - sequential values for the horizontal axis (typically time) |
| 11 | +- `y` (numeric) - values for the vertical axis representing magnitude |
11 | 12 |
|
12 | | -- `figsize`: Figure size as (width, height) tuple (default: (10, 6)) |
13 | | -- `alpha`: Transparency level for fill (default: 0.5) |
14 | | -- `color`: Fill color (default: "steelblue") |
15 | | -- `title`: Plot title (default: None) |
16 | | -- `xlabel`: X-axis label (default: uses column name) |
17 | | -- `ylabel`: Y-axis label (default: uses column name) |
18 | | -- `line_color`: Color of the line on top of area (default: same as color) |
19 | | -- `line_width`: Width of the line (default: 2) |
20 | | - |
21 | | -## Expected Output |
22 | | - |
23 | | -An area chart with: |
24 | | -- X and Y axes labeled with column names (or custom labels) |
25 | | -- Filled area between the line and the x-axis |
26 | | -- Visible line on top of the filled area |
27 | | -- Grid visible but subtle (alpha ≤ 0.3) |
28 | | -- Professional appearance with proper spacing |
29 | | -- Smooth transitions between data points |
30 | | - |
31 | | -## Quality Criteria |
32 | | - |
33 | | -- [x] Axes labeled clearly |
34 | | -- [x] Grid visible but subtle |
35 | | -- [x] Area fill clearly visible with appropriate transparency |
36 | | -- [x] Line visible on top of area |
37 | | -- [x] No overlapping labels |
38 | | -- [x] Appropriate figure size |
39 | | -- [x] Type hints and validation present |
40 | | - |
41 | | -## Examples |
42 | | - |
43 | | -### Example 1: Basic Usage |
| 13 | +**Example:** |
44 | 14 | ```python |
45 | 15 | import pandas as pd |
46 | 16 | data = pd.DataFrame({ |
47 | | - 'month': [1, 2, 3, 4, 5, 6], |
48 | | - 'sales': [100, 150, 130, 180, 200, 220] |
| 17 | + 'month': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], |
| 18 | + 'sales': [120, 135, 148, 162, 175, 195, 210, 198, 185, 170, 158, 190] |
49 | 19 | }) |
50 | | -fig = create_plot(data, 'month', 'sales') |
51 | 20 | ``` |
52 | 21 |
|
53 | | -### Example 2: Custom Styling |
54 | | -```python |
55 | | -fig = create_plot( |
56 | | - data, |
57 | | - 'month', |
58 | | - 'sales', |
59 | | - alpha=0.3, |
60 | | - color='green', |
61 | | - title='Monthly Sales' |
62 | | -) |
63 | | -``` |
64 | | - |
65 | | -## Implementation Notes |
66 | | - |
67 | | -- Use appropriate alpha value for fill visibility |
68 | | -- Ensure the line is visible above the filled area |
69 | | -- Handle missing/NaN values gracefully |
70 | | -- Validate that y column contains numeric data |
71 | | - |
72 | 22 | ## Tags |
73 | 23 |
|
74 | | -area, trend, time-series, basic, 2d |
| 24 | +area, trend, timeseries, basic, 2d |
75 | 25 |
|
76 | 26 | ## Use Cases |
77 | 27 |
|
78 | | -- Visualizing stock price trends over time |
79 | | -- Showing website traffic patterns by hour or day |
80 | | -- Displaying cumulative sales or revenue data |
81 | | -- Monitoring resource usage (CPU, memory) over time |
| 28 | +- Visualizing website traffic volume over time |
| 29 | +- Showing cumulative sales or revenue trends across quarters |
| 30 | +- Tracking system resource usage (CPU, memory) over time |
| 31 | +- Displaying temperature variations throughout a day |
0 commit comments