---

name: data-visualization description: Build data visualizations, charts, graphs, and maps in Flutter/Dart using the data_visualization package suite. Use when the user asks to create charts (line, bar, pie, scatter, heatmap), maps (geographic projections, GeoJSON), hierarchical visualizations (treemap, tree, pack), network graphs, or any data visualization in Flutter. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Data Visualization for Flutter

Use this skill when building data visualizations in Flutter applications. The data_visualization package suite provides D3.js-like functionality for Flutter.

Installation

Add to pubspec.yaml:

dependencies:
  data_visualization: ^1.0.0

Or add individual packages as needed (see Package Reference below).

Core Concepts

Scales (dv_scale)

Transform data values to visual coordinates:

import 'package:dv_scale/dv_scale.dart';

// Linear scale for continuous data
final xScale = scaleLinear(domain: [0, 100], range: [0, 400]);

// Band scale for categorical data (bar charts)
final bandScale = scaleBand(domain: ['A', 'B', 'C'], range: [0, 300]);

// Time scale for dates
final timeScale = scaleTime(
  domain: [DateTime(2024, 1, 1), DateTime(2024, 12, 31)],
  range: [0, 800],
);

// Ordinal scale for color mapping
final colorScale = scaleOrdinal(
  domain: ['cat1', 'cat2'],
  range: [Colors.red, Colors.blue],
);

Curves (dv_curve)

Smooth line interpolation:

import 'package:dv_curve/dv_curve.dart';

final points = [Point(0, 10), Point(50, 80), Point(100, 30)];
final curve = curveCatmullRom();
final smoothPoints = curve.generate(points);

// Available: curveLinear(), curveBasis(), curveCardinal(),
// curveMonotoneX(), curveStep(), curveNatural()

Shapes (dv_shape)

Generate paths for chart elements:

import 'package:dv_shape/dv_shape.dart';

// Line generator
final lineGen = LineGenerator<Point>(
  x: (d, i) => xScale(d.x),
  y: (d, i) => yScale(d.y),
  curve: curveCatmullRom(),
);

// Area generator
final areaGen = AreaGenerator<Point>(
  x: (d, i) => xScale(d.x),
  y0: (d, i) => yScale(0),
  y1: (d, i) => yScale(d.y),
);

// Pie layout
final pieGen = PieGenerator<Map>(value: (d, i) => d['value']);
final arcs = pieGen.generate(data);

// Arc generator
final arcGen = ArcGenerator(
  innerRadius: 50, outerRadius: 100,
  startAngle: 0, endAngle: math.pi / 2,
);

Geographic (dv_geo_core, dv_geo)

Map projections and GeoJSON:

import 'package:dv_geo_core/dv_geo_core.dart';

// Projections
final mercator = geoMercator(center: (0, 0), scale: 100, translate: Point(200, 200));
final orthographic = geoOrthographic(center: (0, 0), scale: 150, translate: center, rotate: (-30, 0, 0));
final equirect = geoEquirectangular(center: (0, 0), scale: 100, translate: center);

// Project (lon, lat) -> (x, y)
final projected = mercator.project(-74.0, 40.7);

// GeoJSON
final geojson = GeoJsonFeatureCollection.fromJson(jsonData);
final geoPath = GeoPath(mercator);
final paths = geoPath.generate(geojson);

Hierarchy (dv_hierarchy)

Hierarchical data layouts:

import 'package:dv_hierarchy/dv_hierarchy.dart';

final root = HierarchyNode<Map>(
  data: {'name': 'root'},
  children: [
    HierarchyNode(data: {'name': 'A', 'value': 100}),
    HierarchyNode(data: {'name': 'B', 'value': 200}),
  ],
);

root.sum((d) => (d['value'] as num?)?.toDouble() ?? 0);

// Layouts - each sets x0, y0, x1, y1 or x, y, r on nodes
treemapLayout(root, width: 400, height: 300);
treeLayout(root, width: 400, height: 300);
packLayout(root, width: 400, height: 400);
clusterLayout(root, width: 400, height: 300);
partitionLayout(root, width: 400, height: 300);

Common Chart Patterns

Line Chart

class LineChartPainter extends CustomPainter {
  final List<Point> data;
  LineChartPainter(this.data);

  @override
  void paint(Canvas canvas, Size size) {
    final xScale = scaleLinear(domain: [0, data.length - 1], range: [50, size.width - 20]);
    final yScale = scaleLinear(domain: [0, 100], range: [size.height - 40, 20]);

    final curve = curveCatmullRom();
    final points = data.map((p) => Point(xScale(p.x), yScale(p.y))).toList();
    final curvePoints = curve.generate(points);

    final path = Path()..moveTo(curvePoints.first.x, curvePoints.first.y);
    for (final p in curvePoints.skip(1)) {
      path.lineTo(p.x, p.y);
    }

    canvas.drawPath(path, Paint()
      ..color = Colors.blue
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Bar Chart

class BarChartPainter extends CustomPainter {
  final List<Map<String, dynamic>> data;
  BarChartPainter(this.data);

  @override
  void paint(Canvas canvas, Size size) {
    final labels = data.map((d) => d['label'] as String).toList();
    final values = data.map((d) => d['value'] as double).toList();

    final xScale = scaleBand(domain: labels, range: [50, size.width - 20], padding: 0.2);
    final yScale = scaleLinear(domain: [0, values.reduce(math.max)], range: [size.height - 40, 20]);

    for (int i = 0; i < data.length; i++) {
      final x = xScale(labels[i])!;
      final y = yScale(values[i]);
      canvas.drawRect(
        Rect.fromLTWH(x, y, xScale.bandwidth, yScale(0) - y),
        Paint()..color = Colors.indigo,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Pie Chart

class PieChartPainter extends CustomPainter {
  final List<Map<String, dynamic>> data;
  PieChartPainter(this.data);

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = math.min(size.width, size.height) / 2 - 20;

    final pie = PieGenerator<Map>(value: (d, i) => d['value'] as double);
    final arcs = pie.generate(data);
    final colors = [Colors.blue, Colors.red, Colors.green, Colors.orange];

    for (int i = 0; i < arcs.length; i++) {
      final arc = arcs[i];
      final arcGen = ArcGenerator(
        innerRadius: radius * 0.5,
        outerRadius: radius,
        startAngle: arc.startAngle,
        endAngle: arc.endAngle,
      );

      canvas.save();
      canvas.translate(center.dx, center.dy);
      canvas.drawPath(arcGen.generate(), Paint()..color = colors[i % colors.length]);
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Geographic Map

class GeoMapPainter extends CustomPainter {
  final GeoJsonFeatureCollection worldData;
  GeoMapPainter(this.worldData);

  @override
  void paint(Canvas canvas, Size size) {
    final center = Point(size.width / 2, size.height / 2);
    final proj = geoMercator(center: (0, 0), scale: size.width / 6, translate: center);

    final geoPath = GeoPath(proj);
    final paths = geoPath.generate(worldData);

    for (final pathPoints in paths) {
      if (pathPoints.length < 3) continue;
      final path = Path()..moveTo(pathPoints.first.x, pathPoints.first.y);
      for (int i = 1; i < pathPoints.length; i++) {
        path.lineTo(pathPoints[i].x, pathPoints[i].y);
      }
      path.close();
      canvas.drawPath(path, Paint()..color = Colors.green.shade300);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

Package Reference

Package	Description
data_visualization	Umbrella package (includes all)
dv_scale	Scale functions (linear, log, band, ordinal, time)
dv_curve	Curve interpolation
dv_shape	Shape generators (line, area, arc, pie, stack)
dv_geo_core	Map projections, GeoJSON parsing
dv_geo	Geographic widgets
dv_hierarchy	Hierarchical layouts (treemap, tree, pack)
dv_stats	Statistical functions (mean, regression)
dv_axis	Chart axes
dv_grid	Grid lines
dv_legend	Legend widgets
dv_annotation	Chart annotations
dv_tooltip	Tooltips
dv_brush	Brush selection
dv_zoom	Zoom/pan
dv_xychart	XY chart series (line, bar, area, scatter)
dv_heatmap	Heatmap visualization
dv_network	Force-directed network graphs
dv_mock_data	Mock data generators
dv_glyph	Symbol glyphs (circle, square, triangle)
dv_gradient	Gradient definitions
dv_pattern	Pattern fills
dv_marker	Markers
dv_text	Text rendering
dv_group	SVG-like group transforms
dv_clip_path	Clipping paths
dv_point	2D Point class
dv_vendor	Array operations, interpolation
dv_delaunay	Delaunay triangulation
dv_voronoi	Voronoi diagrams
dv_bounds	Chart bounds/margins
dv_responsive	Responsive containers
dv_event	Pointer event handling
dv_drag	Drag interaction
dv_threshold	Reference lines/areas

Resources

• Live Demo: https://gsmlg-app.github.io/data_visualization/
• GitHub: https://github.com/gsmlg-dev/data_visualization
• pub.dev: https://pub.dev/packages/data_visualization