How to use the d3-shape.curveCardinal function in d3-shape

To help you get started, we’ve selected a few d3-shape examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

DefinitelyTyped / DefinitelyTyped / d3-shape / d3-shape-tests.ts View on Github
defaultArea = defaultArea.defined(true);

area = area.defined((d, t, data) =&gt; {
console.log('Number of Points: ', data.length);
console.log('Y0-Coordinate of first point: ', data[0].y0); // data type is Array
return !d.missing; // d type is AreaDatum
});

areaDefAccessorFn = area.defined();

// curve(...) ------------------------------------------------------------------------

defaultArea = defaultArea.curve(d3Shape.curveLinear);

area = area.curve(d3Shape.curveCardinal.tension(0.5));
// area = area.curve(d3Shape.curveBundle.beta(0.5)); // fails, as curveBundle-based line generator does not support area-related methods

currentCurveFactory = area.curve();

// use Area generator ===============================================================

defaultArea([[10, 10], [20, 10], [20, 20]]);

const areaData: AreaDatum[] = [
{ x0: 10, y0: 10, x1: 10, y1: 30, missing: false },
{ x0: 20, y0: 20, x1: 20, y1: 40, missing: false },
{ x0: 30, y0: 30, x1: 30, y1: 30, missing: false }
];

const areaPathStringMaybe: string | null = area(areaData);
Flaque / quirk / src / main / pulse / Pulse.tsx View on Github
const Chart = ({ data }: { data: number[] }) =&gt; {
// Really shouldn't happen
if (data.length &lt; 3) {
return null;
}

return (
d !== 0).length &lt;= 3 ? 50 : undefined}
&gt;

);
};
zuiidea / antd-admin / src / routes / chart / areaChart / index.js View on Github
bottom: 0,
}}
&gt;

<area fill="#8884d8" stroke="#8884d8" type="monotone">
<area fill="#82ca9d" stroke="#82ca9d" type="monotone">
<area fill="#ffc658" stroke="#ffc658" type="monotone">

)

// CardinalAreaChart
const cardinal = d3.curveCardinal.tension(0.2)
const CardinalAreaChart = () =&gt; (

<area fill="#8884d8" stroke="#8884d8" type="monotone">
<area fill="#82ca9d" stroke="#82ca9d" type="{cardinal}">
davegomez / silky-charts / cjs / chunk-ec892a96.js View on Github
var SCALE_PADDING = 0.15;

var THEME = 'monteCarlo';
var SECONDARY_THEME = 'vividCerise';
var OUTLINE_FILL = 50;
var OUTLINE_HOVER = 30;
var OUTLINE_STROKE = -20; // Line options

var LINE_STROKE_WIDTH = 2;
var LINE_TYPE = 'curveLinear';
var LINE_TYPES = {
curveBasis: d3Shape.curveBasis,
curveBasisClosed: d3Shape.curveBasisClosed,
curveBasisOpen: d3Shape.curveBasisOpen,
curveBundle: d3Shape.curveBundle,
curveCardinal: d3Shape.curveCardinal,
curveCardinalClosed: d3Shape.curveCardinalClosed,
curveCardinalOpen: d3Shape.curveCardinalOpen,
curveCatmullRom: d3Shape.curveCatmullRom,
curveCatmullRomClosed: d3Shape.curveCatmullRomClosed,
curveCatmullRomOpen: d3Shape.curveCatmullRomOpen,
curveLinear: d3Shape.curveLinear,
curveLinearClosed: d3Shape.curveLinearClosed,
curveMonotoneX: d3Shape.curveMonotoneX,
curveMonotoneY: d3Shape.curveMonotoneY,
curveNatural: d3Shape.curveNatural,
curveStep: d3Shape.curveStep,
curveStepAfter: d3Shape.curveStepAfter,
curveStepBefore: d3Shape.curveStepBefore
};

/**
swimlane / ngx-charts / demo / app.component.ts View on Github
maxRadius = 10;
minRadius = 3;
showSeriesOnHover = true;
roundEdges: boolean = true;
animations: boolean = true;
xScaleMin: any;
xScaleMax: any;
yScaleMin: number;
yScaleMax: number;
showDataLabel = false;

curves = {
Basis: shape.curveBasis,
'Basis Closed': shape.curveBasisClosed,
Bundle: shape.curveBundle.beta(1),
Cardinal: shape.curveCardinal,
'Cardinal Closed': shape.curveCardinalClosed,
'Catmull Rom': shape.curveCatmullRom,
'Catmull Rom Closed': shape.curveCatmullRomClosed,
Linear: shape.curveLinear,
'Linear Closed': shape.curveLinearClosed,
'Monotone X': shape.curveMonotoneX,
'Monotone Y': shape.curveMonotoneY,
Natural: shape.curveNatural,
Step: shape.curveStep,
'Step After': shape.curveStepAfter,
'Step Before': shape.curveStepBefore,
default: shape.curveLinear
};

// line interpolation
curveType: string = 'Linear';
esnet / react-timeseries-charts / lib / js / curve.js View on Github
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
});

var _d3Shape = require("d3-shape");

exports.default = {
curveBasisClosed: _d3Shape.curveBasisClosed,
curveBasisOpen: _d3Shape.curveBasisOpen,
curveBasis: _d3Shape.curveBasis,
curveBundle: _d3Shape.curveBundle,
curveCardinalClosed: _d3Shape.curveCardinalClosed,
curveCardinalOpen: _d3Shape.curveCardinalOpen,
curveCardinal: _d3Shape.curveCardinal,
curveCatmullRomClosed: _d3Shape.curveCatmullRomClosed,
curveCatmullRomOpen: _d3Shape.curveCatmullRomOpen,
curveCatmullRom: _d3Shape.curveCatmullRom,
curveLinearClosed: _d3Shape.curveLinearClosed,
curveLinear: _d3Shape.curveLinear,
curveMonotoneX: _d3Shape.curveMonotoneX,
curveMonotoneY: _d3Shape.curveMonotoneY,
curveNatural: _d3Shape.curveNatural,
curveStep: _d3Shape.curveStep,
curveStepAfter: _d3Shape.curveStepAfter,
curveStepBefore: _d3Shape.curveStepBefore
}; /**
*  Copyright (c) 2017, The Regents of the University of California,
*  through Lawrence Berkeley National Laboratory (subject to receipt
*  of any required approvals from the U.S. Dept. of Energy).
*  All rights reserved.
swimlane / ngx-graph / demo / app.component.ts View on Github
setInterpolationType(curveType) {
this.curveType = curveType;
if (curveType === 'Bundle') {
this.curve = shape.curveBundle.beta(1);
}
if (curveType === 'Cardinal') {
this.curve = shape.curveCardinal;
}
if (curveType === 'Catmull Rom') {
this.curve = shape.curveCatmullRom;
}
if (curveType === 'Linear') {
this.curve = shape.curveLinear;
}
if (curveType === 'Monotone X') {
this.curve = shape.curveMonotoneX;
}
if (curveType === 'Monotone Y') {
this.curve = shape.curveMonotoneY;
}
if (curveType === 'Natural') {
this.curve = shape.curveNatural;
}
hshoff / vx / packages / vx-curve / build / index.js View on Github
get: function get() {
return _d3Shape.curveCardinal;
}
});
sghall / resonance / docs / src / routes / reduxExamples / alluvialChart / module / helpers.js View on Github
export function getPath(x, y, yVals, dates, tension) {
return shape.area()
.curve(shape.curveCardinal.tension(tension))
.x((d) => x(d))
.y0((d, i) => y(yVals[i][0]))
.y1((d, i) => y(yVals[i][1]))(dates);
}

d3-shape

Graphical primitives for visualization, such as lines and areas.

ISC
Latest version published 1 year ago

75 / 100