Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
@d3fc/d3fc-shape
Advanced tools
A collection of SVG/canvas path generators for creating chart series
npm install @d3fc/d3fc-shape
All of the exported functions have the same signature, (context) => generator
. The context supplied must be an implementation of the subset of Context2D methods as implemented by d3-path (or indeed a Context2D!).
You can then configure the generator
by invoking the relevant methods (e.g. generator.x(/* ... */)
) as described below. Once suitably configured invoke the generator function itself with the required data (e.g. generator([/* ... */])
).
import { path } from 'd3-path';
import { shapeCandlestick } from 'd3fc-shape';
const ctx = path();
const candlestick = shapeCandlestick()
.x((d, i) => i)
.open((d) => d.open)
.high((d) => d.high)
.low((d) => d.low)
.close((d) => d.close);
d3.select('path')
.datum([
{ open: 4, high: 5, low: 3, close: 3 }
])
.attr('d', candlestick);
import { shapeCandlestick } from 'd3fc-shape';
const ctx = document.querySelector('canvas').getContext('2d');
const candlestick = shapeCandlestick()
.context(ctx)
.x((d, i) => i)
.open((d) => d.open)
.high((d) => d.high)
.low((d) => d.low)
.close((d) => d.close);
candlestick([
{ open: 4, high: 5, low: 3, close: 3 }
]);
ctx.stroke();
# fc.shapeBar(context)
# shapeBar.x(accessorFunc)
# shapeBar.y(accessorFunc)
# shapeBar.width(accessorFunc)
# shapeBar.height(accessorFunc)
The attribute accessor methods available to set the way the bar chart accesses the data.
The accessorFunc(datum, index)
function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.
# shapeBar.horizontalAlign(alignment)
alignment
is one of: left
, right
or center
(default)
# shapeBar.verticalAlign(alignment)
alignment
is one of: bottom
, top
or center
(default)
# fc.shapeBoxPlot(context)
# shapeBoxPlot.value(accessorFunc)
# shapeBoxPlot.median(accessorFunc)
# shapeBoxPlot.upperQuartile(accessorFunc)
# shapeBoxPlot.lowerQuartile(accessorFunc)
# shapeBoxPlot.high(accessorFunc)
# shapeBoxPlot.low(accessorFunc)
# shapeBoxPlot.width(accessorFunc)
The attribute accessor methods available to set the way the bar chart accesses the data.
The accessorFunc(datum, index)
function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.
# shapeBoxPlot.cap(accessorFunc)
The accessorFunc(item, index)
function is called on each item of the data, and returns
the proprtion of the box width that the caps width should be.
# shapeBoxPlot.orient(orientation)
Orientation of the chart. Either horizontal
(default) or vertical
# fc.shapeCandlestick(context)
# shapeCandlestick.x(accessorFunc)
# shapeCandlestick.open(accessorFunc)
# shapeCandlestick.high(accessorFunc)
# shapeCandlestick.low(accessorFunc)
# shapeCandlestick.close(accessorFunc)
# shapeCandlestick.width(accessorFunc)
The attribute accessor methods available to set the way the bar chart accesses the data.
The accessorFunc(datum, index)
function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.
# fc.shapeErrorBar(context)
# shapeErrorBar.value(accessorFunc)
# shapeErrorBar.high(accessorFunc)
# shapeErrorBar.low(accessorFunc)
# shapeErrorBar.width(accessorFunc)
The attribute accessor methods available to set the way the bar chart accesses the data.
The accessorFunc(datum, index)
function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.
# shapeErrorBar.orient(orientation)
Orientation of the chart. Either horizontal
(default) or vertical
# fc.shapeOhlc(context)
# shapeOhlc.x(accessorFunc)
# shapeOhlc.open(accessorFunc)
# shapeOhlc.high(accessorFunc)
# shapeOhlc.low(accessorFunc)
# shapeOhlc.close(accessorFunc)
# shapeOhlc.width(accessorFunc)
The attribute accessor methods available to set the way the bar chart accesses the data.
The accessorFunc(datum, index)
function is called on each item of the data, and returns
the relevant value for the relevant attribute for that item.
# shapeOhlc.orient(orientation)
Orientation of the chart. Either horizontal
(default) or vertical
FAQs
A collection of SVG/canvas path generators for creating chart series
We found that @d3fc/d3fc-shape demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.