@d3-composer/utils

Utilities for xy, series, and other common visualization tasks, part of d3-composer

Usage no npm install needed!

<script type="module">
  import d3ComposerUtils from 'https://cdn.skypack.dev/@d3-composer/utils';
</script>

README

@d3-composer/utils

API

# toStyle(style)

Convert string, object, or function to style string

const style = toStyle({ fill: 'blue', stroke: 'red' });
// style = 'fill: blue; stroke: red;'

const fn = toStyle(d => ({ fill: d.fill }));
// fn ~= d => `fill: ${d.fill};`

const dynamic = toStyle({ fill: d => d.fill, stroke: 'none' });
// dynamic ~= d => `fill: ${d.fill}; stroke: none;`

# toMargin(margin)

Convert number or object to margin array [top, right, bottom, left].

toMargin() // [0, 0, 0, 0]
toMargin(10) // [10, 10, 10, 10]
toMargin({ top: 10 }) // [10, 0, 0, 0]
toMargin([0, 0, 10, 0]) // [0, 0, 10, 0]

# passthrough(d)

Helper for passing through data from selection by default (d => d || [])

# array(value)

Helper for wrapping value in an array, handling a value function if given

# fn(value)

Helper for ensuring returned value is a function by wrapping if necessary

# seriesExtent(data, values, value)

Calculate [min, max] for series data.

const data = [
  { values: [{ x: 100 }] },
  { values: [{ x: 0 }] }
];

const [min, max] = seriesExtent(data, series => series.values, d => d.x);
// min = 0, max = 100

# Size

d3.local used for retrieving defined size for node (e.g. from grid area).

# Area

d3.local use for retrieving grid area for node.

# Series

d3.local used for retrieving series for node.