Open Ratings Labs

D3 Chart Playground

Reference implementations of the visualisations used across the Open Ratings product. Each demo is wired to mock data and is fully self-contained — view source to crib the rendering code.
Status: Reference / non-production Charts: Radar · Histogram · Heatmap · Timeline

Dimension Radar

Six-axis radar showing all Open Ratings dimensions for a single artefact, with optional comparison overlay. Used on repository detail pages and in the Toryx Inc. assessment report.

import { renderRadarChart } from '/js/charts/radar.js';

renderRadarChart(document.getElementById('chart-radar'), {
  scores: {
    security: 7.6,
    logic_correctness: 6.9,
    codebase_fit: 8.1,
    maintainability: 7.0,
    test_quality: 5.4,
    dependency_health: 6.8,
  },
  scoresComparison: {
    security: 5.8,
    logic_correctness: 7.4,
    codebase_fit: 6.5,
    maintainability: 7.8,
    test_quality: 8.1,
    dependency_health: 5.9,
  },
  size: 380,
  datasetLabel: 'Repo A',
  comparisonLabel: 'Repo B',
});

Rating Distribution Histogram

Bins a cohort of scores from 0 to 10 and colours each bar by the OpenRatings tier its bin centre falls into. Used on the home page and in benchmark cohort pages.

import { renderHistogram } from '/js/charts/histogram.js';

const scores = sampleScores(400);   // 0..10 floats
renderHistogram(document.getElementById('chart-histogram'), {
  scores,
  bins: 12,
  width: 720,
  height: 280,
});

Dimension Heatmap

2D matrix of repos × dimensions. Cell colour follows the OpenRatings tier palette so an analyst can spot pattern weakness across a portfolio at a glance. Used in benchmark cohort comparison views.

import { renderHeatmap } from '/js/charts/heatmap.js';

renderHeatmap(document.getElementById('chart-heatmap'), {
  rows: ['legacy-payroll', 'claims-engine', 'auth-service', 'ledger-batch', 'vendor-portal'],
  cols: ['security','logic_correctness','codebase_fit','maintainability','test_quality','dependency_health'],
  values: [
    [7.2, 6.8, 8.1, 7.0, 5.5, 6.4],
    [4.1, 7.5, 6.2, 5.8, 3.9, 5.1],
    [8.9, 9.1, 8.5, 7.7, 7.4, 8.2],
    [6.5, 6.0, 7.0, 5.9, 4.8, 5.5],
    [5.2, 5.9, 5.5, 6.4, 4.2, 6.0],
  ],
});