or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

chart-registry.mdcoordinate-grid-charts.mdcore-utilities.mddata-display-widgets.mdfilters.mdindex.mdlegends.mdmixins.mdordinal-specialized-charts.md
tile.json

tessl/npm-dc

A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/dc@4.2.x

To install, run

npx @tessl/cli install tessl/npm-dc@4.2.0

index.mddocs/

DC.js

DC.js is a multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js. It enables the creation of interactive dashboards where charts display aggregations of data attributes through position, size, and color, with filterable dimensions that dynamically update all charts with animated transitions.

Package Information

  • Package Name: dc
  • Package Type: npm
  • Language: JavaScript (ES6 modules)
  • Installation: npm install dc
  • Dependencies: d3.js (version ^6.6.2), crossfilter2 for data manipulation

Core Imports

import * as dc from 'dc';

ES6 named imports:

import { BarChart, LineChart, PieChart, DataCount, chartRegistry } from 'dc';

CommonJS:

const dc = require('dc');
// or
const { BarChart, LineChart, PieChart } = require('dc');

Basic Usage

import { BarChart, DataCount } from 'dc';
import crossfilter from 'crossfilter2';

// Create crossfilter instance
const cf = crossfilter(data);
const dimension = cf.dimension(d => d.category);
const group = dimension.group();

// Create a bar chart
const chart = new BarChart('#chart')
  .width(400)
  .height(200)
  .dimension(dimension)
  .group(group)
  .x(d3.scaleOrdinal())
  .xUnits(dc.units.ordinal);

// Create a data count widget
const dataCount = new DataCount('#data-count')
  .crossfilter(cf)
  .groupAll(cf.groupAll());

// Render all charts
chart.render();
dataCount.render();

Architecture

DC.js is built around several key components:

  • Chart Classes: Concrete chart implementations (BarChart, LineChart, PieChart, etc.)
  • Mixin System: Composable functionality (BaseMixin, CoordinateGridMixin, ColorMixin, etc.)
  • Chart Registry: Global coordination system for filtering and rendering across chart groups
  • Crossfilter Integration: Native support for crossfilter dimensions and groups
  • D3.js Foundation: All rendering built on d3.js selections and scales
  • Filter System: Specialized filter constructors for data selection and brushing

Capabilities

Chart Types - Coordinate Grid Charts

Charts with X/Y axes supporting brushing, zooming, and coordinate-based interactions.

class BarChart extends StackMixin;
class LineChart extends StackMixin;
class ScatterPlot extends CoordinateGridMixin;
class BubbleChart extends BubbleMixin;
class CompositeChart extends CoordinateGridMixin;
class SeriesChart extends CoordinateGridMixin;
class BoxPlot extends CoordinateGridMixin;

Coordinate Grid Charts

Chart Types - Ordinal and Specialized Charts

Category-based charts and specialized visualizations for non-coordinate data.

class PieChart extends CapMixin;
class RowChart extends CapMixin;
class HeatMap extends ColorMixin;
class GeoChoroplethChart extends ColorMixin;
class SunburstChart extends BaseMixin;
class BubbleOverlay extends BubbleMixin;

Ordinal and Specialized Charts

Data Display and Interactive Widgets

Components for displaying data summaries and providing user interaction controls.

class DataCount extends BaseMixin;
class DataTable extends BaseMixin;
class DataGrid extends BaseMixin;
class NumberDisplay extends BaseMixin;
class SelectMenu extends BaseMixin;
class CboxMenu extends BaseMixin;
class TextFilterWidget extends BaseMixin;

Data Display and Widgets

Chart Registry and Global Operations

Centralized management system for coordinating multiple charts and handling global operations like filtering and rendering.

const chartRegistry: ChartRegistry;

function registerChart(chart: BaseMixin, chartGroup?: string): void;
function deregisterChart(chart: BaseMixin, chartGroup?: string): void;
function filterAll(chartGroup?: string): void;
function renderAll(chartGroup?: string): void;
function redrawAll(chartGroup?: string): void;
function refocusAll(chartGroup?: string): void;

Chart Registry and Global Operations

Core Utilities and Configuration

Essential utility functions, configuration management, and helper methods for chart operations.

const config: Config;
const utils: UtilsNamespace;
const constants: ConstantsObject;
const units: UnitsNamespace;
const printers: PrintersNamespace;
const events: EventsNamespace;
const logger: Logger;

function transition(selection: d3.Selection, duration?: number, delay?: number, name?: string): d3.Transition | d3.Selection;
function pluck(property: string, transformFn?: Function): Function;
function afterTransition(transition: d3.Transition, callback: Function): void;
function instanceOfChart(object: any): boolean;
function renderlet(renderletFunction?: Function): Function | null;

Core Utilities and Configuration

Filters and Data Manipulation

Filter constructors and data manipulation tools for crossfilter integration and chart interactions.

namespace filters {
  function RangedFilter(low: number, high: number): RangedFilterObject;
  function TwoDimensionalFilter(key: [any, any]): TwoDimensionalFilterObject;
  function RangedTwoDimensionalFilter(filter: [[any, any], [any, any]]): RangedTwoDimensionalFilterObject;
  function HierarchyFilter(path: any[]): HierarchyFilterObject;
}

Filters and Data Manipulation

Mixins and Base Functionality

Composable mixin classes that provide core functionality to chart implementations.

class BaseMixin;
class CoordinateGridMixin extends BaseMixin;
class StackMixin extends CoordinateGridMixin;
class ColorMixin;
class CapMixin;
class BubbleMixin;
class MarginMixin;

Mixins and Base Functionality

Legends and Visual Components

Legend components for displaying chart keys and visual guides.

class Legend extends BaseMixin;
class HtmlLegend extends BaseMixin;

Legends and Visual Components

Types

interface ChartRegistry {
  has(chart: BaseMixin): boolean;
  list(chartGroup?: string): BaseMixin[];
  clear(chartGroup?: string): void;
}

interface Config {
  dateFormat: (date: Date) => string;
  disableTransitions: boolean;
}

interface UtilsNamespace {
  printSingleValue(value: any): string;
  add(left: any, right: any, unit?: string): any;
  subtract(left: any, right: any, unit?: string): any;
  isNumber(value: any): boolean;
  isFloat(value: any): boolean;
  isInteger(value: any): boolean;
  uniqueId(): number;
  nameToId(name: string): string;
}

interface ConstantsObject {
  CHART_CLASS: string;
  DEBUG_GROUP_CLASS: string;
  STACK_CLASS: string;
  DESELECTED_CLASS: string;
  SELECTED_CLASS: string;
  NODE_INDEX_NAME: string;
  GROUP_INDEX_NAME: string;
  DEFAULT_CHART_GROUP: string;
  EVENT_DELAY: number;
  NEGLIGIBLE_NUMBER: number;
}

interface UnitsNamespace {
  integers: (start: number, end: number) => number;
  ordinal: any;
  fp: {
    precision: (value: number) => (start: number, end: number) => number;
  };
}

interface PrintersNamespace {
  filters: (filters: any[]) => string;
  filter: (filter: any) => string;
}

interface EventsNamespace {
  trigger: (callback: Function, delay?: number) => void;
}

interface Logger {
  enableDebugLog: boolean;
  debug: (message: any, ...args: any[]) => void;
  warn: (message: any, ...args: any[]) => void;
  info: (message: any, ...args: any[]) => void;
}