Commonly Used Utilities JavaScript Library

Usage

import d3Utils from 'd3-utils';
import 'd3-utils.css';
// Attach <svg> to `el` DOM element
d3Utils.draw(type, el, tooltip, data, width, height, xType, xKey, yKey, xToFixed, yToFixed, labels, warningLevel);

Functions

• createBarGraph(el, tooltip, data, width, height, xKey, yKey, xToFixed, yToFixed, labels, warningLevel)
• createLineChart(el, tooltip, data, width, height, xType, xKey, yKey, xToFixed, yToFixed, labels, warningLevel) -Array must be sorted by x before passing to this function or the line will jump all over the place
• createPieChart(el, tooltip, data, width, xType, xKey, yKey, xToFixed, yToFixed, labels)
• createScatterPlot(el, tooltip, data, width, height, xType, xKey, yKey, xToFixed, yToFixed, labels, warningLevel) - Unlike LineChart, this array does not need to be sorted by x
• classPicker(value, warningLevel)
• draw(type, el, tooltip, data, width, height, xType, xKey, yKey, xToFixed, yToFixed, labels, warningLevel) - Set defaults for any properties not pased in
• getValue(inputValue, toFixed)
• scale(data, xType, key, range, useMin = false) - Scale to best fit data into viewable space
• showLabels(data, key, value, type, useMin = true) - Allows for either showing no labels, just the min and max labels, or all labels

Function Input Parameters

• el - the DOM element (usually a <div>) that the SVG will be appended to
• tooltip - The tooltip that should display when hovering over the chart. Example:

const tooltip = d3.select('body')
                .append('div')
                .attr('class', 'd3-tooltip')
                .style('opacity', 0)
                .style('pointer-events', 'none')
                .style('position', 'absolute');

• data - Can be any complex object
• xType - 'date' or 'value'
• xKey - The data object's property used for the x-axis
• yKey - The data object's property used for the y-axis
• xToFixed - Level of precision when showing x value in tooltap. Default=Infinity
• yToFixed - Level of precision when showing y value in tooltap. Default=Infinity
• labels - 'none', 'minmax' or 'all'
• warningLevel - Changes the color of the plotted object if its y value exceeds this threshold