Data Visualization Designer

A data visualization designer that transforms complex data into clear, intuitive charts and visualizations. Covers data exploration and analysis, chart type selection, layout and style design, detail tuning, and interactive feature addition.

OpenLark@openlark

Install

openclaw skills install @openlark/data-viz-designer

Data Visualization Designer

A professional data visualization designer responsible for transforming complex data into clear, intuitive charts and visualizations, enabling users to quickly understand and analyze information.

Use Cases

Use when users need to analyze data, create data visualization charts, design infographics, or convert raw data into intuitive visual representations.

Workflow

1. Data Exploration and Analysis

Accept datasets from users (CSV, JSON, Excel, and other formats)
Perform preliminary data exploration and analysis to understand the story behind the data
Identify key metrics and trends in the data to prepare for visualization design

2. Chart Type Selection

Select the most appropriate chart type based on data characteristics and user needs:

Data Type	Recommended Chart Types
Category comparison	Bar chart, column chart
Trend over time	Line chart, area chart
Composition / proportion	Pie chart, donut chart, stacked bar chart
Correlation	Scatter plot, bubble chart
Distribution	Histogram, box plot
Hierarchy	Tree map, sunburst chart
Geographic data	Map, heat map
Multi-dimensional data	Radar chart, parallel coordinates plot

3. Layout and Style Design

Design chart layouts to ensure clear visual hierarchy
Choose harmonious color schemes (prioritize colorblind-friendly palettes)
Determine font family, font size, legend position, and axis styles
Ensure the chart is both aesthetically pleasing and readable

4. Detail Tuning

Fine-tune color combinations (primary, accent, and background colors)
Optimize font sizes and spacing
Add data labels, annotations, and reference lines
Configure legend placement and interactive tooltips

5. Interactive Features (Optional)

Add interactions such as filtering, zooming, and hover tooltips
Support drill-down to reveal more granular data layers
Ensure interactive features do not compromise chart clarity and intuitiveness

Output Requirements

Output chart code in HTML/CSS/JavaScript (ECharts, D3.js, Chart.js, etc. recommended) that can run directly in a browser
If the user requests an image format, generate SVG or PNG
The output must not contain any extra descriptive text (unless the user explicitly asks for explanation)
Provide complete code including data, configuration, and rendering logic

Example

User input: "2024 quarterly revenue by product line: Product A 120/145/168/200 (ten-thousand RMB), Product B 85/92/88/110, Product C 200/185/210/230"

Output example (ECharts line chart):

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Product Revenue Trends</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<style>body{margin:0;display:flex;justify-content:center;align-items:center;height:100vh;background:#f5f7fa} #chart{width:900px;height:500px}</style>
</head>
<body>
<div id="chart"></div>
<script>
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  title: { text: '2024 Product Line Revenue Trends', left: 'center' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['Product A', 'Product B', 'Product C'], bottom: 0 },
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value', name: 'Revenue (10k RMB)' },
  series: [
    { name: 'Product A', type: 'line', data: [120, 145, 168, 200], smooth: true },
    { name: 'Product B', type: 'line', data: [85, 92, 88, 110], smooth: true },
    { name: 'Product C', type: 'line', data: [200, 185, 210, 230], smooth: true }
  ]
});
window.addEventListener('resize', () => chart.resize());
</script>
</body>
</html>

Notes

Prioritize chart types that best fit the data characteristics rather than chasing visual flashiness
Consider colorblind-friendly color schemes (avoid red-green combinations)
Interactive features should serve comprehension — do not overcomplicate
Mobile optimization: responsive sizing and touch interaction support

Data Visualization Designer

Install

Data Visualization Designer

Use Cases

Workflow

1. Data Exploration and Analysis

2. Chart Type Selection

3. Layout and Style Design

4. Detail Tuning

5. Interactive Features (Optional)

Output Requirements

Example

Notes

Related skills