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

@redsift/d3-rs-lines

Package Overview
Dependencies
Maintainers
6
Versions
35
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@redsift/d3-rs-lines

Generates line charts using D3v4.

  • 0.5.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
212
decreased by-5.78%
Maintainers
6
Weekly downloads
 
Created
Source

d3-rs-lines

Circle CI npm MIT

d3-rs-lines generate a range of line charts via the D3 reusable chart convention. Supports area fills, hovers and highlights.

Example

View @redsift/d3-rs-lines on Codepen

Line chart

Sample bars with a bottom orientation

Multiple series

Sample bars with a left orientation

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-lines/latest/d3-rs-lines.umd-es2015.min.js"></script>
<script>
    var chart = d3_rs_lines.html();
    d3.select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);
</script>

ES6

import { html as chart } from "@redsift/d3-rs-lines";
let eml = chart();
...

Require

var chart = require("@redsift/d3-rs-lines");
var eml = chart.html();
...

Datum

  • Simplest form, array of numbers: [1,2,3,4...]. View Datum result on Bricks
  • Datum includes parameters, Index and Value which form the datum [{ "l": 1,"v":1},{"l": 4,"v":6}], "l" represent the Index and "v" the Value. The simple datum generate a line starting at (1,1) and ending at (4,6). View Datum result on Bricks.
  • A set of line charts that can be achieved using different Value creating the datum [{"l":1,"v":[1,2,3]},{"l":2,"v":[3,2,1]},{"l":3,"v":[2,1,3]}], the advantage of using this datum format is that the different line charts can be stacked using the stacked property. View Datum result on Bricks.
  • Else generating each line separately in a datum array [[{"l":1,"v":3},{"l":2,"v":5}],[{"l":1,"v":1},{"l":6,"v":7}]], great for populating distinct chart. View Datum result on Bricks.
  • Datum also supports Unix timestamp (or epoch time) data-set which can be easily converted into specific calendar date using string specifiers. An example of a datum using epoch datum [ { "l" : 1461456000000, "v" : [ 12, 3 ] }, { "l" : 1461542400000, "v" : [ 5, 11 ] }, { "l" : 1461628800000, "v" : [ 8, 7 ]}], in this example the Index is set to epoch format. View Datum result on Bricks, in the example I used labelTime property to convert the Unix timestamp using the smart formatter call 'multi' and using tickCountIndex property to display only 4 ticks.

Parameters

This section gives an overview of all the properties available and how they can be used. Examples provided are linked to Codepens that can be easily edited.

PropertyDescriptionTransitionPreview
classedString Customise SVG by adding, removing and toggling of CSS classes.N
backgroundString, Number Change the background colour of the chart.YPreview of background property
Examples: Bricks / CodePen
themeString Change the chart theme which includes 'light'(default) and 'dark'.YPreview of theme property
Examples: Bricks / CodePen
height, widthInteger Resize the height and width of chart. Default width: 420 pixels.YPreview of height & width properties
Examples: Bricks / CodePen
sizeInteger Resize the chart to a certain size changing both the width and height maintaining the default aspect ratio.YPreview of size property
Examples: Bricks / CodePen
scaleNumber Scale the entire chart by the scaling value. Used to zoom the chart or compensate for high DPI displays when rasterized. Default scale: 1.0.YExamples: Bricks / CodePen
marginNumber Resize the chart margin inside of the SVG container. Default margin: 26 pixels.YPreview of margin property
Examples: Bricks / CodePen
insetNumber Resize the space inside the chart margin for the main chart element. This excludes items like legends.Y
Examples: CodePen
styleString Custom CSS to inject into chartN
trimInteger Trim the datum array, use for slicing the data on the chart.N
Examples: CodePen
minValue,maxValueNumber Sets the minimum and maximum Value range. Note that for log scales, minValue must be > 0.YPreview of minValue & maxValue property
Examples: Bricks / CodePen
minIndex ,maxIndexNumber Sets the minimum and maximum Index range. Note that for log scales, minIndex must be > 0.YPreview of minIndex & maxIndex property
Examples: Bricks / CodePen
tickCountIndex,tickCountValueNumber, String, Interval Function Hints at the number of ticks to set in the corresponding axis. Supports strings for example split time intervals when using Unix timestamp(or epoch time) Index values. Default tickCountIndex: 6NPreview of tickCountIndex & tickCountValue properties
Examples: Bricks / CodePen
tickMinorIndex, tickMinorValueNumber, String, Interval Function Hints at the number of minor ticks to set in the corresponding axis.NPreview of tickMinorIndex & tickMinorValue properties
Examples: Bricks / CodePen
tickFormatIndex, tickFormatValueString, Function Sets the formatting string or function for the ticks.NPreview of tickFormatIndex & tickFormatValue properties
Examples: Bricks / CodePen
tickDisplayIndex, tickDisplayValueString, Integer Customise all tick presentation logic with this function.NPreview of tickDisplayIndex & tickDisplayValue
Examples: Bricks / CodePen
curveString, Function, Interpolation function for the line. Standard functions excluding closed and open curves are usable by name e.g. 'curveStep'. If a function is supplied, it should implement custom curves. Default curve: 'curveCatmullRom'YPreview of curve property
Examples: Bricks / CodePen
symbol(Array of) String, Function Change the points connecting the lines into customised symbols or custom symbol typesNPreview of symbol
Examples: Bricks / CodePen
symbolSizeNumber Resize the symbol to a specific size. Default size: 32YPreview of symbolSize property
Examples: Bricks / CodePen
fillString, Array, Function If function, in addition to usual data, index parameters, a 3rd string parameter indicates the context - one of area, stroke, symbol, legendYPreview of fill property
Examples: Bricks / CodePen
fillAreaOpacityUnit Number Fill the area of the graph to a certain opacityNPreview of fillAreaOpacity
Examples: Bricks / CodePen
fillAreaBoolean, (Array of) Boolean Set the lines fill.NPreview of fillArea property
Examples: Bricks / CodePen
fillStrokeBoolean, (Array of) Boolean Set the lines stroke.NPreview of fillStroke property
Examples: Bricks / CodePen
stackedBoolean Enable stacking. Default value: falseYPreview of stacked property
Examples: Bricks / CodePen
stackOffsetString, Function Shift the baseline of the chart to give more emphasis on the changing values using different offset properties.YPreview of stackOffset property
Examples: Bricks / CodePen
stackOrderString, Function Stack the chart using different stack ordering properties.YPreview of stackOrder property
Examples: Bricks / CodePen
animationString Change the animation interpolating between points. Parameters: reveal, value, default.YCodepen Example
tipHtmlString, Function Add information to the tip of the chart. Parameters of the function are (d, i, s) where d is the data element, i is the index, s is the series of the data.Y
Examples: CodePen
animateAxis, animateLabelsBoolean Set the animation of the axis and label. Default value: true.NCodepen Example
axisDisplayIndex,axisDisplayValueBoolean Set the axes to display. Default axisDisplayIndex: true, axisDisplayValue: false.NPreview of axisDisplayIndex & axisDisplayValue properties
Examples: Bricks / CodePen
axisPaddingValue,axisPaddingIndexNumber Set the padding size of the axis. Default axisPaddingValue: 8, axisPaddingIndex: 8.NPreview of axisPaddingIndex & axisPaddingValue properties
Examples: Bricks / CodePen
axisValueString Changes the axis label of value (on the y-axis) to the left or right. Default value: 'left'.NPreview of axisValue property
Examples: Bricks / CodePen
highlightIndex(Array of)Number, Function Highlight a particular or an array of IndexYPreview of highlightIndex property
Examples: Bricks / CodePen
legend(Array of)String, Number Add a legend for the lines in the chart.NPreview of legend property
Examples: Bricks / CodePen
legendOrientationString Position the legend, positions include top, bottom, left, right or voronoi. Default orientation: 'bottom'YPreview of legendOrientation property
Examples: Bricks / CodePen
legendOrientation('voronoi')String Position the legend in an area containing the least number of intersecting lines.NPreview of legendOrientation property using the voronoi argument
Examples: Bricks / CodePen
voronoiAttractionNumber -1...0...1 Use when legendOrientation set to voronoi. Specifies the attraction of the label to the data line. 0 implies no dragging, -1 pushes the labels away. Default value: 0.33YPreview of the voronoiAttraction property
Examples: Bricks / CodePen
gridIndex, gridValueBoolean Add guidelines for Index or Value. Default gridIndex: false, gridValue: true.NPreview of gridIndex & gridValue property Examples: Bricks / CodePen
labelTimeString, Function Interpret the Index value from timestamp and format it using string specifiers or the supplied function. 'multi' (string specifier) smartly displays the time and use the UTC format.NPreview of labelTime property Examples: Bricks / CodePen
languageString Change the language format of the chart affecting digit, currency and time formats.NExamples: Bricks/ CodePen
onClickFunction Handler for a click event on a data series.NExamples: CodePen

Time

The two main time formatter available in UTC or Local Time. UTC uses the time standard applied across the world which is unaffected by Daylight Saving Time whereas Local Time is set to your local timezone. To use any of the formatter a function is parsed to labelTime function. To apply UTC format, d3.utcFormat(specifier) is used, argument being the string specifiers and when using Local Time, only the string specifiers can be supply since by default the time format is set to Local Time.

timeMultiFormat is a smart formatter that displays the time in UTC using 'multi' as an argument which is parsed to the labelTime function. Use 'multi-local' to enable local timezone ticks. The tick display can be customised using the tickCountIndex function displaying the number of ticks for the Index. Bricks Example

Additional information about Time format for D3 can be found here.

Keywords

FAQs

Package last updated on 20 Jun 2018

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