CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

ordinal-specialized-charts.mddocs/

Ordinal and Specialized Charts

Category-based charts and specialized visualizations for non-coordinate data including pie charts, geographic visualizations, and hierarchical displays.

Capabilities

PieChart

Pie and donut chart implementation with slice labels and customizable appearance.

/**
 * Create a Pie Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class PieChart extends CapMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get slice cap (maximum number of slices) */
  slicesCap(cap?: number): number | PieChart;
  
  /** Set/get inner radius for donut chart */
  innerRadius(radius?: number): number | PieChart;
  
  /** Set/get outer radius */
  radius(radius?: number): number | PieChart;
  
  /** Set/get minimum angle for slice */
  minAngleForLabel(angle?: number): number | PieChart;
  
  /** Set/get label function */
  label(labelFunction?: Function): Function | PieChart;
  
  /** Set/get whether to render labels */
  renderLabel(render?: boolean): boolean | PieChart;
  
  /** Set/get title function for slice tooltips */
  title(titleFunction?: Function): Function | PieChart;
  
  /** Set/get whether to render title */
  renderTitle(render?: boolean): boolean | PieChart;
  
  /** Set/get external labels radius */
  externalLabels(radius?: number): number | PieChart;
  
  /** Set/get draw paths function */
  drawPaths(drawPaths?: boolean): boolean | PieChart;
}

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

Usage Example:

import { PieChart } from 'dc';

const pie = new PieChart('#pie-chart')
  .width(300)
  .height(300)
  .radius(100)
  .innerRadius(40)
  .dimension(categoryDimension)
  .group(categoryGroup)
  .label(d => `${d.key}: ${d.value}`)
  .renderLabel(true);

pie.render();

RowChart

Horizontal bar chart implementation for categorical data display.

/**
 * Create a Row Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class RowChart extends CapMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get row height */
  rowHeight(height?: number): number | RowChart;
  
  /** Set/get gap between rows */
  gap(gap?: number): number | RowChart;
  
  /** Set/get elastic X axis */
  elasticX(elastic?: boolean): boolean | RowChart;
  
  /** Set/get label offset from bar end */
  labelOffsetX(offset?: number): number | RowChart;
  
  /** Set/get label offset from bar center */
  labelOffsetY(offset?: number): number | RowChart;
  
  /** Set/get title label offset */
  titleLabelOffsetX(offset?: number): number | RowChart;
  
  /** Set/get fixed bar height */
  fixedBarHeight(height?: number): number | RowChart;
  
  /** Set/get X scale */
  x(scale?: d3.Scale): d3.Scale | RowChart;
}

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

HeatMap

Heat map implementation for visualizing two-dimensional categorical data with color intensity.

/**
 * Create a Heat Map
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class HeatMap extends ColorMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get column accessor function */
  keyAccessor(accessor?: Function): Function | HeatMap;
  
  /** Set/get row accessor function */
  valueAccessor(accessor?: Function): Function | HeatMap;
  
  /** Set/get color accessor function */
  colorAccessor(accessor?: Function): Function | HeatMap;
  
  /** Set/get title function for cell tooltips */
  title(titleFunction?: Function): Function | HeatMap;
  
  /** Set/get columns ordering */
  colsLabel(labelFunction?: Function): Function | HeatMap;
  
  /** Set/get rows ordering */
  rowsLabel(labelFunction?: Function): Function | HeatMap;
  
  /** Set/get whether columns are ordinal */
  cols(cols?: any[]): any[] | HeatMap;
  
  /** Set/get whether rows are ordinal */
  rows(rows?: any[]): any[] | HeatMap;
  
  /** Set/get box padding */
  boxOnClick(handler?: Function): Function | HeatMap;
  
  /** Set/get X border radius */
  xBorderRadius(radius?: number): number | HeatMap;
  
  /** Set/get Y border radius */
  yBorderRadius(radius?: number): number | HeatMap;
}

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

Usage Example:

import { HeatMap } from 'dc';

const heatmap = new HeatMap('#heatmap')
  .width(400)
  .height(300)
  .dimension(twoDDimension)
  .group(twoDGroup)
  .keyAccessor(d => d.key[0])
  .valueAccessor(d => d.key[1])
  .colorAccessor(d => d.value)
  .colors(d3.scaleSequential(d3.interpolateBlues))
  .title(d => `${d.key[0]}, ${d.key[1]}: ${d.value}`);

heatmap.render();

GeoChoroplethChart

Geographic choropleth map implementation for geographical data visualization.

/**
 * Create a Geographic Choropleth Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class GeoChoroplethChart extends ColorMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get overlay GeoJSON features */
  overlayGeoJson(geojson?: any, name?: string, keyAccessor?: Function): any | GeoChoroplethChart;
  
  /** Set/get projection for map */
  projection(projection?: d3.GeoProjection): d3.GeoProjection | GeoChoroplethChart;
  
  /** Set/get GeoJSON object */
  geoJsons(): any[] | GeoChoroplethChart;
  
  /** Set/get geo path generator */
  geoPath(path?: d3.GeoPath): d3.GeoPath | GeoChoroplethChart;
  
  /** Remove specific GeoJSON layer */
  removeGeoJson(name: string): GeoChoroplethChart;
}

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

SunburstChart

Hierarchical sunburst chart implementation for nested categorical data.

/**
 * Create a Sunburst Chart
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class SunburstChart extends BaseMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get inner radius */
  innerRadius(radius?: number): number | SunburstChart;
  
  /** Set/get outer radius */
  radius(radius?: number): number | SunburstChart;
  
  /** Set/get center X coordinate */
  cx(x?: number): number | SunburstChart;
  
  /** Set/get center Y coordinate */
  cy(y?: number): number | SunburstChart;
  
  /** Set/get minimum angle for labels */
  minAngleForLabel(angle?: number): number | SunburstChart;
  
  /** Set/get title function */
  title(titleFunction?: Function): Function | SunburstChart;
  
  /** Set/get label function */
  label(labelFunction?: Function): Function | SunburstChart;
  
  /** Set/get whether to render labels */
  renderLabel(render?: boolean): boolean | SunburstChart;
  
  /** Set/get whether to render title */
  renderTitle(render?: boolean): boolean | SunburstChart;
  
  /** Set/get sunburst data */
  sunburstRootPath(path?: Function): Function | SunburstChart;
}

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

Usage Example:

import { SunburstChart } from 'dc';

const sunburst = new SunburstChart('#sunburst')
  .width(400)
  .height(400)
  .radius(150)
  .innerRadius(20)
  .dimension(hierarchyDimension)
  .group(hierarchyGroup)
  .label(d => d.key)
  .title(d => `${d.key}: ${d.value}`);

sunburst.render();

BubbleOverlay

Bubble overlay implementation for adding bubbles to geographic maps or other charts.

/**
 * Create a Bubble Overlay
 * @param {String|node|d3.selection} parent - DOM selector, element, or d3 selection
 * @param {String} [chartGroup] - Chart group name for coordinated interactions
 */
class BubbleOverlay extends BubbleMixin {
  constructor(parent: string | Element | d3.Selection, chartGroup?: string);
  
  /** Set/get point location accessor */
  point(location?: string, accessor?: Function): Function | BubbleOverlay;
  
  /** Set/get debug flag */
  debug(debug?: boolean): boolean | BubbleOverlay;
}

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

Common Mixin Methods

CapMixin Methods

Charts that inherit from CapMixin (PieChart, RowChart) have these additional methods:

interface CapMixinMethods {
  /** Set/get items cap (maximum displayed items) */
  cap(cap?: number): number | CapMixinChart;
  
  /** Set/get function to compute "others" group */
  othersGrouper(grouper?: Function): Function | CapMixinChart;
  
  /** Set/get "others" label */
  othersLabel(label?: string): string | CapMixinChart;
  
  /** Set/get data ordering */
  ordering(orderFunction?: Function): Function | CapMixinChart;
  
  /** Set/get whether chart takes focus on click */
  takeFocus(takeFocus?: boolean): boolean | CapMixinChart;
}

ColorMixin Methods

Charts that inherit from ColorMixin (HeatMap, GeoChoroplethChart) have these additional methods:

interface ColorMixinMethods {
  /** Set/get color scale */
  colors(scale?: d3.Scale | string[]): d3.Scale | string[] | ColorMixinChart;
  
  /** Set/get ordinal colors domain */
  ordinalColors(colors?: string[]): string[] | ColorMixinChart;
  
  /** Set/get linear colors domain */
  linearColors(colors?: string[]): string[] | ColorMixinChart;
  
  /** Set/get color accessor function */
  colorAccessor(accessor?: Function): Function | ColorMixinChart;
  
  /** Set/get color domain */
  colorDomain(domain?: any[]): any[] | ColorMixinChart;
  
  /** Calculate color domain */
  calculateColorDomain(): ColorMixinChart;
}

Types

interface CapMixin extends BaseMixin {
  cap(cap?: number): number | CapMixin;
  othersGrouper(grouper?: Function): Function | CapMixin;
  othersLabel(label?: string): string | CapMixin;
  ordering(orderFunction?: Function): Function | CapMixin;
  takeFocus(takeFocus?: boolean): boolean | CapMixin;
}

interface ColorMixin {
  colors(scale?: d3.Scale | string[]): d3.Scale | string[] | ColorMixin;
  colorAccessor(accessor?: Function): Function | ColorMixin;
  colorDomain(domain?: any[]): any[] | ColorMixin;
  calculateColorDomain(): ColorMixin;
}

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;
}

docs

chart-registry.md

coordinate-grid-charts.md

core-utilities.md

data-display-widgets.md

filters.md

index.md

legends.md

mixins.md

ordinal-specialized-charts.md

tile.json