@types/d3-shape

What is @types/d3-shape?

The @types/d3-shape package provides TypeScript type definitions for d3-shape, a D3 module for creating graphical shapes like lines, areas, arcs, pies, and more. These definitions allow developers to use d3-shape in TypeScript projects with type checking, enabling better development experience and error handling.

What are @types/d3-shape's main functionalities?

Line Generation

Generates a SVG path data string for a line connecting a series of points.

import * as d3 from 'd3-shape';

const line = d3.line()
    .x((d) => d.x)
    .y((d) => d.y);
const points = [{ x: 0, y: 0 }, { x: 10, y: 10 }];
const pathData = line(points);

Area Generation

Creates an area defined by a line along its top edge and a baseline along the bottom.

import * as d3 from 'd3-shape';

const area = d3.area()
    .x((d) => d.x)
    .y0(0)
    .y1((d) => d.y);
const points = [{ x: 0, y: 0 }, { x: 10, y: 10 }];
const pathData = area(points);

Pie Chart Generation

Generates pie chart sectors, calculating the start and end angles for each data point.

import * as d3 from 'd3-shape';

const pie = d3.pie()
    .value((d) => d.value);
const data = [{ value: 10 }, { value: 20 }];
const arcs = pie(data);

Other packages similar to @types/d3-shape

chart.js

Chart.js is a powerful, flexible JavaScript charting library. It provides a wide variety of chart types, including line, area, and pie charts, similar to d3-shape. However, Chart.js is more focused on the entire charting experience, including axes and tooltips, whereas d3-shape is specifically about generating graphical shapes.

victory

Victory is a React.js component library for building interactive data visualizations. It uses d3 under the hood for calculations but provides a React-friendly API. Compared to @types/d3-shape, Victory offers a higher-level abstraction, making it easier to integrate into React applications but less flexible for non-React projects.

README

Installation

npm install --save @types/d3-shape

Summary

This package contains type definitions for D3JS d3-shape module (https://github.com/d3/d3-shape/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/d3-shape.

Additional Details

• Last updated: Fri, 16 Jul 2021 17:01:22 GMT
• Dependencies: @types/d3-path
• Global values: none

Credits

These definitions were written by Tom Wanzek, Alex Ford, Boris Yankov, denisname, and Nathan Bierema.