Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

d3-shape

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-shape

Graphical primitives for visualization, such as lines and areas.

  • 0.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.6M
decreased by-54.25%
Maintainers
1
Weekly downloads
 
Created

What is d3-shape?

The d3-shape npm package is a JavaScript library that provides tools for creating graphical shapes—such as lines, areas, curves, pies, and more—designed to work with D3.js, a powerful tool for creating data visualizations. It is commonly used to generate SVG path data based on numerical data input.

What are d3-shape's main functionalities?

Line Shapes

Generates a line shape from an array of points. The 'line' function creates a line generator, and the 'pathData' is the SVG path data string.

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

Area Shapes

Creates an area shape, defined by a baseline and a topline. The 'area' function creates an area generator, which is used to generate the SVG path data for the area shape.

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

Pie and Arc Shapes

Generates pie and arc shapes for creating pie charts. The 'pie' function computes the necessary angles for the pie slices, and the 'arc' function generates the SVG path data for each slice.

const pie = d3.pie().value(d => d.value);
const arc = d3.arc().innerRadius(0).outerRadius(radius);
const pieData = pie([{value: 10}, {value: 20}]);
const arcData = pieData.map(d => arc(d));

Custom Curves

Allows the creation of lines and areas with custom curves. The 'curve' method specifies the type of curve to use, with 'curveBasis' being one of the many available options.

const line = d3.line().curve(d3.curveBasis);
const pathData = line([{x: 0, y: 0}, {x: 10, y: 10}]);

Other packages similar to d3-shape

Keywords

FAQs

Package last updated on 14 Nov 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc