Data Visualizaton

Includes: LineChart, AreaChart, BarChart, PieChart, RadarChart, RadialChart

​

Line Chart

Definition
A line chart is a type of graph that displays trends or changes in data over a continuous interval by connecting individual data points with lines.

Uses
- Show trends, correlations and fluctuations over time.
- Ideal for dense time data where changes between points matter.
- Examples: stock prices, sensor data, temperature readings

Illustrative Variants

---

​

Area Chart

Definition
An area chart displays quantitative data over a continuous interval using filled areas beneath plotted data points connected with lines.

Uses
- Emphasize volume or magnitude of change over time, not just direction.
- Showing cumulative values.
- Examples: Tracking total revenue growth broken down by product line, monitoring energy consumption trends from multiple sources

Illustrative Variants

---

​

Bar Chart

Definition
A bar chart uses rectangular bars to visually represent and compare values across categories. The length or height of each bar corresponds to the value it represents.

Uses
- Compare quantities across discrete groupings such as time intervals, sequential stages in a process, or related variables within a set.
- Ideal for categorical data and most effective when there are few data series, allowing for clear comparison between items.
- Examples: Bug reports by severity level, top 10 highest grossing films, sales by region in Q1

​

Vertical Bar Chart

​

Horizontal Bar Chart

Illustrative Variants

---

​

Radial Chart

Definition
A type of chart that has a circular y-axis where values are compared based on proportion of the circular path completed (not the length of the arcs).

Uses
- Emphasizing completion and visual appeal over comparison.
- Useful when the space available small.
- Examples: progress towards a goal, completion levels for different learning modules\

Illustrative Variants

---

​

Pie Chart

Definition
A type of chart that displays proportionate parts of a whole as slices of a circle. Each slice represents a category’s contribution to the total, with its angle proportional to the value it represents.

Uses
- To show the composition of a finite whole or at a given point in time
- Best used when the data series is categorical and not too dense.
- Examples: market share by brand, survey responses to multiple choice questions, time spent across activities in a day

Illustrative Variants

---

​

Radar Chart

Definition
A chart that plots three or more variables on axes radiating from a central point. Data points are connected to form a polygon for each data series, showing patterns or comparisons across categories

Uses
- Comparing multiple metrics across sub-categories
- Emphasize symmetry, imbalance or dominance
- Examples: evaluating candidates across skills, products across features, showing how departments score across metrics like speed, cost, and quality

Illustrative Variants

---

​

Anatomy

1. title: Describes the main insight the chart reveals, supported by a subtitle.
2. tooltip: Expose the value(s) tied to a point, segment, or shape in the chart during interaction.
3. grid : Polar (in Radial and Radar Charts) or categorical grid lines for value reference.
4. legend: Maps colors to data categories they represent. When required, legends may also include value types/units of their respective axes.

​

Legend Variants

---

​

Prompt-Based UI Controls

A simple prompt in plain language given to C1 is enough to control the following properties.

• Visibility of Elements
  • Tell C1 whether x and y axis labels should be visible in the chart.
• Orientation and Layout (only Bar Charts)
  • Ask C1 to use vertical or horizontal bars in Bar Charts.
  • Choose whether you want to use a stacked or grouped Bar Chart.
• Data Units
  • Prompt whether you want the quantitative data to be shown in thousands (K), millions (M), billions (B), or trillions (T).
• Category Labels
  • Rename category labels shown in the chart (eg. “rename Product A to Mobile”).