tessl/npm-dc

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Coordinate Grid Charts

Name: tessl/npm-dc
Author: tessl

Charts with X/Y coordinate axes that support brushing, zooming, and interactive coordinate-based filtering. These charts extend CoordinateGridMixin and provide sophisticated interaction capabilities.

Capabilities

BarChart

Concrete bar chart/histogram implementation with stacking support.

/**
 * Create a Bar Chart
 * @param {String|node|d3.selection|CompositeChart} parent - DOM selector, element, or parent chart
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class BarChart extends StackMixin {
  constructor(parent: string | Element | d3.Selection | CompositeChart, chartGroup?: string);
  
  /** Set/get gap between bars in pixels */
  gap(gap?: number): number | BarChart;
  
  /** Set/get whether to center bars on ticks */
  centerBar(centerBar?: boolean): boolean | BarChart;
  
  /** Set/get whether to always use rounding for bar positioning */
  alwaysUseRounding(useRounding?: boolean): boolean | BarChart;
  
  /** Set/get outer padding on an ordinal bar chart */
  outerPadding(padding?: number): number | BarChart;
  
  /** Set/get spacing between bars as a fraction of bar size (0-1) */
  barPadding(padding?: number): number | BarChart;
  
  /** Handle click events on bars */
  onClick(d: any): void;
  
  /** Fade deselected areas based on brush selection */
  fadeDeselectedArea(brushSelection: [number, number]): void;
  
  /** Extend brush selection with rounding if enabled */
  extendBrush(brushSelection: [number, number]): [number, number];
  
  /** Highlight legend items */
  legendHighlight(d: any): void;
  
  /** Reset legend highlighting */
  legendReset(): void;
  
  /** Get maximum X axis value with resolution adjustment */
  xAxisMax(): number;
}

/** Factory function for creating BarChart instances */
function barChart(parent: string | Element | d3.Selection, chartGroup?: string): BarChart;

Usage Example:

import { BarChart } from 'dc';

const chart = new BarChart('#bar-chart')
  .width(400)
  .height(200) 
  .dimension(dateDimension)
  .group(dateGroup)
  .x(d3.scaleTime().domain(d3.extent(data, d => d.date)))
  .gap(2)
  .centerBar(true);

chart.render();

LineChart

Line chart implementation supporting area charts, interpolation, and multiple line series.

/**
 * Create a Line Chart
 * @param {String|node|d3.selection|CompositeChart} parent - DOM selector, element, or parent chart
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class LineChart extends StackMixin {
  constructor(parent: string | Element | d3.Selection | CompositeChart, chartGroup?: string);
  
  /** Set/get line interpolation method */
  interpolate(interpolation?: string | Function): string | Function | LineChart;
  
  /** Set/get line tension for curved interpolation */
  tension(tension?: number): number | LineChart;
  
  /** Set/get whether to render as area chart */
  renderArea(renderArea?: boolean): boolean | LineChart;
  
  /** Set/get whether to render data points */
  renderDataPoints(render?: boolean): boolean | LineChart;
  
  /** Set/get data point radius */
  dotRadius(radius?: number): number | LineChart;
  
  /** Set/get whether chart is dashable */
  dashStyle(dashArray?: number[]): number[] | LineChart;
}

/** Factory function for creating LineChart instances */
function lineChart(parent: string | Element | d3.Selection, chartGroup?: string): LineChart;

ScatterPlot

Scatter plot implementation with customizable symbols and sizing.

/**
 * Create a Scatter Plot
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class ScatterPlot extends CoordinateGridMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get symbol type for scatter points */
  symbol(symbolType?: d3.Symbol): d3.Symbol | ScatterPlot;
  
  /** Set/get size of scatter symbols */
  symbolSize(size?: number): number | ScatterPlot;
  
  /** Set/get whether to exclude brushing */
  excludedOpacity(opacity?: number): number | ScatterPlot;
  
  /** Set/get whether to exclude brushing */
  includedOpacity(opacity?: number): number | ScatterPlot;
  
  /** Set/get highlight function for brushing */
  highlightedSize(size?: number): number | ScatterPlot;
  
  /** Set/get hidden size for filtered points */
  hiddenSize(size?: number): number | ScatterPlot;
}

/** Factory function for creating ScatterPlot instances */
function scatterPlot(parent: string | Element | d3.Selection, chartGroup?: string): ScatterPlot;

BubbleChart

Bubble chart implementation with size encoding for three-dimensional data visualization.

/**
 * Create a Bubble Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class BubbleChart extends BubbleMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get elastic Y axis */
  elasticY(elastic?: boolean): boolean | BubbleChart;
  
  /** Set/get elastic X axis */
  elasticX(elastic?: boolean): boolean | BubbleChart;
}

/** Factory function for creating BubbleChart instances */
function bubbleChart(parent: string | Element | d3.Selection, chartGroup?: string): BubbleChart;

CompositeChart

Container chart that can host multiple sub-charts on the same coordinate system.

/**
 * Create a Composite Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class CompositeChart extends CoordinateGridMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get array of sub-charts to compose */
  compose(subCharts?: BaseMixin[]): BaseMixin[] | CompositeChart;
  
  /** Set/get sub-charts sharing Y axis */
  shareColors(share?: boolean): boolean | CompositeChart;
  
  /** Set/get right Y axis for dual-axis charts */
  rightY(scale?: d3.Scale): d3.Scale | CompositeChart;
  
  /** Set/get right Y axis label */
  rightYAxisLabel(label?: string): string | CompositeChart;
  
  /** Set/get child chart margins */
  childOptions(options?: object): object | CompositeChart;
}

/** Factory function for creating CompositeChart instances */
function compositeChart(parent: string | Element | d3.Selection, chartGroup?: string): CompositeChart;

Usage Example:

import { CompositeChart, LineChart, BarChart } from 'dc';

const composite = new CompositeChart('#composite-chart')
  .width(800)
  .height(400)
  .dimension(dateDimension)
  .x(d3.scaleTime().domain(dateExtent))
  .compose([
    new LineChart(composite)
      .group(lineGroup)
      .colors('blue'),
    new BarChart(composite)
      .group(barGroup)
      .colors('red')
  ]);

composite.render();

SeriesChart

Multi-series chart for displaying multiple data series with shared axes.

/**
 * Create a Series Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class SeriesChart extends CoordinateGridMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get series accessor function */
  seriesAccessor(accessor?: Function): Function | SeriesChart;
  
  /** Set/get key accessor for series */
  keyAccessor(accessor?: Function): Function | SeriesChart;
  
  /** Set/get value accessor for series */
  valueAccessor(accessor?: Function): Function | SeriesChart;
  
  /** Set/get chart function for rendering series */
  chart(chartConstructor?: Function): Function | SeriesChart;
}

/** Factory function for creating SeriesChart instances */
function seriesChart(parent: string | Element | d3.Selection, chartGroup?: string): SeriesChart;

BoxPlot

Box and whisker plot implementation for statistical data visualization.

/**
 * Create a Box Plot
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class BoxPlot extends CoordinateGridMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get box width */
  boxWidth(width?: number | Function): number | Function | BoxPlot;
  
  /** Set/get outlier size */
  outlierSize(size?: number): number | BoxPlot;
  
  /** Set/get whisker width */
  whiskerIqrFactor(factor?: number): number | BoxPlot;
  
  /** Set/get whether to show outliers */
  showOutliers(show?: boolean): boolean | BoxPlot;
  
  /** Set/get data group with statistical calculations */
  group(group?: any): any | BoxPlot;
}

/** Factory function for creating BoxPlot instances */
function boxPlot(parent: string | Element | d3.Selection, chartGroup?: string): BoxPlot;

Common Coordinate Grid Methods

All coordinate grid charts inherit these methods from CoordinateGridMixin:

interface CoordinateGridChartMethods {
  /** Set/get X scale */
  x(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
  
  /** Set/get Y scale */
  y(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
  
  /** Set/get X axis units */
  xUnits(units?: Function): Function | CoordinateGridChart;
  
  /** Set/get X axis units count */
  xUnitsCount(count?: number): number | CoordinateGridChart;
  
  /** Set/get elastic Y axis */
  elasticY(elastic?: boolean): boolean | CoordinateGridChart;
  
  /** Set/get elastic X axis */  
  elasticX(elastic?: boolean): boolean | CoordinateGridChart;
  
  /** Set/get brush on X axis */
  brushOn(brushOn?: boolean): boolean | CoordinateGridChart;
  
  /** Set/get parent chart for brush events */
  parentBrushOn(brushOn?: boolean): boolean | CoordinateGridChart;
  
  /** Enable/disable zoom */
  zoomScale(scale?: d3.Scale): d3.Scale | CoordinateGridChart;
  
  /** Focus on specific domain */
  focus(range?: [any, any]): CoordinateGridChart;
  
  /** Remove focus/zoom */
  refocus(): CoordinateGridChart;
  
  /** Set/get zoom out restriction */
  zoomOutRestrict(restrict?: boolean): boolean | CoordinateGridChart;
}

Types

interface StackMixin extends CoordinateGridMixin {
  stack(group: any, name?: string, accessor?: Function): StackMixin;
  hidableStacks(hidable?: boolean): boolean | StackMixin;
  hideStack(name: string): StackMixin;
  showStack(name: string): StackMixin;
  stackLayout(layout?: d3.Stack): d3.Stack | StackMixin;
}

interface BubbleMixin extends CoordinateGridMixin {
  r(scale?: d3.Scale): d3.Scale | BubbleMixin;
  radiusValueAccessor(accessor?: Function): Function | BubbleMixin;
  minRadius(radius?: number): number | BubbleMixin;
  maxRadius(radius?: number): number | BubbleMixin;
}