reaviz — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited reaviz (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Reaviz is a React data visualization library built on D3.js and Framer Motion. It provides composable, animated chart components with a declarative JSX API.
npm install reavizEvery chart follows the same pattern: a top-level chart component wraps axis, series, gridline, and interaction sub-components. Sub-components are passed as JSX element props, making each layer independently configurable:
import { AreaChart, AreaSeries, LinearXAxis, LinearYAxis, GridlineSeries } from 'reaviz';
<AreaChart
data={data}
xAxis={<LinearXAxis type="time" />}
yAxis={<LinearYAxis type="value" />}
series={<AreaSeries interpolation="smooth" />}
gridlines={<GridlineSeries />}
/>Single series — ChartDataShape[]:
{ key: Date | string | number, data: number }Multi / nested series — ChartNestedDataShape[]:
{ key: Date | string | number, data: { key: string, data: number }[] }All chart components share these base props:
| Prop | Type | Default | Description |
|---|---|---|---|
data | ChartDataShape[] | [] | Chart data |
width | number | auto | Width in pixels |
height | number | auto | Height in pixels |
margins | Margins | — | Chart margins { top, right, bottom, left } |
className | string | — | CSS class for the SVG element |
containerClassName | string | — | CSS class for the container div |
| Module | Description |
|---|---|
| LinearXAxis / LinearYAxis | Configurable axes with tick formatting, types (time, value, category, duration) |
| GridlineSeries | Background gridlines and stripes |
| Gradient / GradientStop | SVG gradient fills for areas and bars |
| Mask / Stripes | SVG pattern masks |
| TooltipArea / ChartTooltip | Hover tooltips with customizable templates |
| ChartBrush | Range selection brush for filtering |
| ChartZoomPan | Zoom and pan interaction |
| LinearValueMarker | Horizontal/vertical reference lines at specific values |
| MarkLine | Crosshair mark line on hover |
Pass a built-in scheme name or a custom function to colorScheme:
// Built-in
<AreaSeries colorScheme="cybertron" />
// Custom function
<AreaSeries colorScheme={(_data, index) => index % 2 ? 'blue' : 'green'} />Applies to area and line charts:
'linear' | 'smooth' | 'step' | 'monotone' | 'natural' | 'basis' | 'cardinal'
All series components accept animated: boolean (default true). Framer Motion handles enter, update, and exit transitions.
AreaChart, BarChart, LineChart, ScatterPlot, BubbleChart, Heatmap, FunnelChart, BarList, Sparkline
RadialAreaChart, RadialBarChart, RadialGauge, RadialScatterPlot, RadarChart, PieChart, SunburstChart
Sankey, VennDiagram, TreeMap, LinearGauge, Meter, Map, WordCloud
import { Component } from 'reaviz'width / height and the chart fills its containerseries={<AreaSeries interpolation="smooth" />})null to remove a sub-component (e.g. gridlines={null})~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.