Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@redsift/d3-rs-lines
Advanced tools
d3-rs-lines
generate a range of line charts via the D3 reusable chart convention. Supports area fills, hovers and highlights.
View @redsift/d3-rs-lines on Codepen
<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>
import { html as chart } from "@redsift/d3-rs-lines";
let eml = chart();
...
var chart = require("@redsift/d3-rs-lines");
var eml = chart.html();
...
[1,2,3,4...]
. View Datum result on Bricks[{ "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.[{"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.[[{"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.[ { "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.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.
Property | Description | Transition | Preview |
---|---|---|---|
classed | String Customise SVG by adding, removing and toggling of CSS classes. | N | |
background | String, Number Change the background colour of the chart. | Y | Examples: Bricks / CodePen |
theme | String Change the chart theme which includes 'light' (default) and 'dark' . | Y | Examples: Bricks / CodePen |
height , width | Integer Resize the height and width of chart. Default width: 420 pixels . | Y | Examples: Bricks / CodePen |
size | Integer Resize the chart to a certain size changing both the width and height maintaining the default aspect ratio. | Y | Examples: Bricks / CodePen |
scale | Number 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 . | Y | Examples: Bricks / CodePen |
margin | Number Resize the chart margin inside of the SVG container. Default margin: 26 pixels . | Y | Examples: Bricks / CodePen |
inset | Number Resize the space inside the chart margin for the main chart element. This excludes items like legends. | Y | Examples: CodePen |
style | String Custom CSS to inject into chart | N | |
trim | Integer Trim the datum array, use for slicing the data on the chart. | N | Examples: CodePen |
minValue ,maxValue | Number Sets the minimum and maximum Value range. Note that for log scales, minValue must be > 0. | Y | Examples: Bricks / CodePen |
minIndex ,maxIndex | Number Sets the minimum and maximum Index range. Note that for log scales, minIndex must be > 0. | Y | Examples: Bricks / CodePen |
tickCountIndex ,tickCountValue | Number, 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: 6 | N | Examples: Bricks / CodePen |
tickMinorIndex , tickMinorValue | Number, String, Interval Function Hints at the number of minor ticks to set in the corresponding axis. | N | Examples: Bricks / CodePen |
tickFormatIndex , tickFormatValue | String, Function Sets the formatting string or function for the ticks. | N | Examples: Bricks / CodePen |
tickDisplayIndex , tickDisplayValue | String, Integer Customise all tick presentation logic with this function. | N | Examples: Bricks / CodePen |
curve | String, 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' | Y | Examples: Bricks / CodePen |
symbol | (Array of) String, Function Change the points connecting the lines into customised symbols or custom symbol types | N | Examples: Bricks / CodePen |
symbolSize | Number Resize the symbol to a specific size. Default size: 32 | Y | Examples: Bricks / CodePen |
fill | String, Array, Function If function, in addition to usual data, index parameters, a 3rd string parameter indicates the context - one of area , stroke , symbol , legend | Y | Examples: Bricks / CodePen |
fillAreaOpacity | Unit Number Fill the area of the graph to a certain opacity | N | Examples: Bricks / CodePen |
fillArea | Boolean, (Array of) Boolean Set the lines fill. | N | Examples: Bricks / CodePen |
fillStroke | Boolean, (Array of) Boolean Set the lines stroke. | N | Examples: Bricks / CodePen |
stacked | Boolean Enable stacking. Default value: false | Y | Examples: Bricks / CodePen |
stackOffset | String, Function Shift the baseline of the chart to give more emphasis on the changing values using different offset properties. | Y | Examples: Bricks / CodePen |
stackOrder | String, Function Stack the chart using different stack ordering properties. | Y | Examples: Bricks / CodePen |
animation | String Change the animation interpolating between points. Parameters: reveal , value , default . | Y | Codepen Example |
tipHtml | String, 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 , animateLabels | Boolean Set the animation of the axis and label. Default value: true . | N | Codepen Example |
axisDisplayIndex ,axisDisplayValue | Boolean Set the axes to display. Default axisDisplayIndex: true , axisDisplayValue: false . | N | Examples: Bricks / CodePen |
axisPaddingValue ,axisPaddingIndex | Number Set the padding size of the axis. Default axisPaddingValue: 8 , axisPaddingIndex: 8 . | N | Examples: Bricks / CodePen |
axisValue | String Changes the axis label of value (on the y-axis) to the left or right. Default value: 'left' . | N | Examples: Bricks / CodePen |
highlightIndex | (Array of)Number, Function Highlight a particular or an array of Index | Y | Examples: Bricks / CodePen |
legend | (Array of)String, Number Add a legend for the lines in the chart. | N | Examples: Bricks / CodePen |
legendOrientation | String Position the legend, positions include top, bottom, left, right or voronoi. Default orientation: 'bottom' | Y | Examples: Bricks / CodePen |
legendOrientation('voronoi') | String Position the legend in an area containing the least number of intersecting lines. | N | Examples: Bricks / CodePen |
voronoiAttraction | Number -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.33 | Y | Examples: Bricks / CodePen |
gridIndex , gridValue | Boolean Add guidelines for Index or Value. Default gridIndex: false , gridValue: true . | N | Examples: Bricks / CodePen |
labelTime | String, 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. | N | Examples: Bricks / CodePen |
language | String Change the language format of the chart affecting digit, currency and time formats. | N | Examples: Bricks/ CodePen |
onClick | Function Handler for a click event on a data series. | N | Examples: CodePen |
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.
FAQs
Generates line charts using D3v4.
The npm package @redsift/d3-rs-lines receives a total of 211 weekly downloads. As such, @redsift/d3-rs-lines popularity was classified as not popular.
We found that @redsift/d3-rs-lines demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 23 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
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.