npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

replot-scatter

v0.3.0

Published

SVG linechart react component

Downloads

2

Readme

replot-scatter: Scatter charts for react

Intelligent and customizable scatter plot components for react.

Installation

Only works with React projects. React must be installed separately.

npm install replot-scatter

Then with a module bundler like webpack/browserify that supports CommonJS/ES2015 modules, use as you would anything else.

import ScatterPlot from 'replot-scatter'

API

replot-scatter is designed to easily create ScatterPlots. The only required input is proper JSON formatted data.

Basic Usage

In the simplest case, just supply data (as a Javascript array) and specify the keys associated with the values:

render() {
  let data = [
    {height: 70, weight: 155},
    {height: 72, weight: 144},
    {height: 73, weight: 158},
    {height: 72, weight: 160},
    {height: 77, weight: 186},
    {height: 68, weight: 153},
    {height: 69, weight: 160},
    {height: 67, weight: 166},
    {height: 60, weight: 90},
    {height: 63.5, weight: 100},
    {height: 62, weight: 102},
    {height: 65, weight: 112},
    {height: 59, weight: 90},
    {height: 58.5, weight: 95},
    {height: 61.5, weight: 115},
    {height: 69, weight: 125},
    {height: 70, weight: 135},
  ],

  return(
    <ScatterPlot data={data}
        xKey="height"
        yKey="weight" />
  )
}
  • data is the only required prop
  • xKey defaults to "x"
  • yKey defaults to "y"

ScreenshotScatterBasic

Advanced Usage - Groups and Weights

Replot ScatterPlots support displaying multiple distibutions of points. If a groupKey prop is included, the points on the ScatterPlot will be colored according to their groups.

Replot ScatterPlots also support variable size points according to a weight. If a weightKey prop is included, the points will be sized according to their weight. The user can also specify minRadius and maxRadius props to alter the range in sizes of the circles. If no weightKey is specified, all circles will assume a size of minRadius.

render() {
  let data = [
    {gender: "male", height: 70, weight: 155, shoeSize: 10},
    {gender: "male", height: 72, weight: 144, shoeSize: 12},
    {gender: "male", height: 73, weight: 158, shoeSize: 11.5},
    {gender: "male", height: 72, weight: 160, shoeSize: 11},
    {gender: "male", height: 77, weight: 186, shoeSize: 13},
    {gender: "male", height: 68, weight: 153, shoeSize: 10},
    {gender: "male", height: 69, weight: 160, shoeSize: 9},
    {gender: "male", height: 67, weight: 166, shoeSize: 9.5}
    {gender: "female", height: 60, weight: 90, shoeSize: 6},
    {gender: "female", height: 63.5, weight: 100, shoeSize: 6.5},
    {gender: "female", height: 62, weight: 102, shoeSize: 6.5},
    {gender: "female", height: 65, weight: 112, shoeSize: 7},
    {gender: "female", height: 59, weight: 90, shoeSize: 6},
    {gender: "female", height: 58.5, weight: 95, shoeSize: 5.5},
    {gender: "female", height: 61.5, weight: 115, shoeSize: 6},
    {gender: "female", height: 69, weight: 125, shoeSize: 8},
    {gender: "female", height: 70, weight: 135, shoeSize: 8.5}
  ]

  return(
    <ScatterPlot data={data}
        xKey="height"
        yKey="weight"
        groupKey="gender"
        weightKey="shoeSize"/>
  )
}

ScreenshotScatterDefault

Dimensions

Dimensions may be specified by passing in width and height props with numbers in the unit of pixels.

render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
    	width={600}
      	height={450}
    />
  )
}
  • width defaults to 800
  • height defaults to 600

The Scatter Plot will not function with a width that is less than 60 pixels, or with a height that is less than 100 pixels.

Width dimensions may also be specified with a string, as a percentage. The width will then be calculated as a proportion of the parent container.

render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
        width="50%"
        height={450}
    />
  )
}

Default | width={600} height={450} | width="50%" height={450}
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotDefaultDimensions | ScreenshotWidth600pxHeight450px | ScreenshotWidth50%Height450px

Colors

Colors may be specified through 2 different mechanisms, both through a color prop. If none of the mechanisms are specified, ScatterPlot defaults to a built in color palette.

User-provided Color Palette

Users can specify a list of colors to use as a palette, passed to the color prop.

render() {
  let colors = ["#ff3232", "#ff7f7f", "#ffcccc"]

  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
    	color={colors}
    />
  )
}

User-provided Color function

The user can specify the color for various lines by providing a function as well. Expected arguments to the function are the index of the data series (from 0) and the group associated with the line (if it exists).

let colorMe = (i, group) => {
  if (group === "male") {
    return "blue"
  } else {
    return "pink"
  }
}

render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
    	color={colorMe}
    />
  )
}

color={colors} | color={colorMe}
:-------------------------:|:-------------------------: ScreenshotColorArray | ScreenshotColorFunction

Graph Style

Users can customize the style of graph elements by passing in the prop(s) below:

  • showTrendline: defaults to false, controls display of the trendline
  • trendlineColor
    • Determines the color of the drawn trendline
    • Defaults to #AAA
    • Accepts any color string
  • trendlineWidth
    • Determines the width of the drawn trendline
    • Defaults to 1.5
    • Accepts any number
  • trendlineOpacity
    • Determines the opacity of the drawn trendline
    • Defaults to 1
    • Accepts any number
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
    	showTrendline={true}
	trendlineColor="#ff0000"
	trendlineWidth={3}
	trendlineOpacity={0.5}
    />
  )
}

Default | showTrendline={true} | Custom Trendline :-------------------------:|:-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotShowTrendline | ScreenshotCustomTrendline

Axis Customization

Replot ScatterPlots allow for incredible customization of the graph axis. A complete explanation of axis customization can be found below:

Titles

Title props accept strings to display in the appropriate location on the graph. To compensate for the inclusion of a title, graph content will be condensed, but the overall size of the component will stay constant.

  • graphTitle: string displayed above the graph
  • xTitle: string displayed left of the x-axis
  • yTitle: string displayed under the y-axis
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
      graphTitle="Shoe Size by Height and Weight"
      xTitle="Height"
      yTitle="Weight"
    />
  )
}

Default | Custom titles :-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotGraphTitles

Displaying Axis Elements

Users can customize the display of the lines, labels, and gridlines of the axes.

  • showXAxisLine: defaults to true, controls display of the x-axis line
  • showYAxisLine: defaults to true, controls display of the y-axis line
  • showXLabels: defaults to true, controls display of labels on the x-axis
  • showYLabels: defaults to true, controls display of labels on the y-axis
  • showGrid: defaults to true, controls display of gridlines
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
      	showXAxisLine={false}
	showYAxisLine={false}
	showXLabels={false}
	showYLabels={false}
	showGrid={false}
    />
  )
}

Lines hidden | Labels hidden :-------------------------:|:-------------------------: ScreenshotLinesHidden | ScreenshotLabelsHidden

Axis Scale

Users can control the x and y scales of the graph, linear or logarithmic.

  • xScale: defaults to "lin" for linear scale, can be "log" for logarithmic scale
  • yScale: defaults to "lin" for linear scale, can be "log" for logarithmic scale
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
    	xScale="log"
      	yScale="log"
    />
  )
}

Default | xScale="log" yScale="log" :-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotScaleLog

Axis Style

Users can customize the axis style by passing in the prop(s) below:

  • axisColor
    • modifies the color of axis lines
    • defaults to "#AAA"
    • accepts any color string
  • tickColor
    • modifies the color of axis ticks
    • defaults to "#AAA"
    • accepts any color string
  • gridColor
    • modifies the color of axis gridlines
    • defaults to "#AAA"
    • accepts any color string
  • labelColor
    • modifies the color of both axis labels
    • defaults to "#AAA"
    • accepts any color string
  • graphTitleColor
    • modifies the color of all graph titles
    • defaults to "#AAA"
    • accepts any color string
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
      	axisColor="#ff0000"
	tickColor="#ff0000"
	gridColor="#ff0000"
	labelColor="#ff0000"
	graphTitleColor="#ff0000"
    />
  )
}
  • axisWidth
    • modifies the thickness of axis lines
    • defaults to 1.5
    • accepts any number
  • tickWidth
    • modifies the thickness of axis ticks
    • defaults to 1.5
    • accepts any number
  • gridWidth
    • modifies the thickness of axis gridlines
    • defaults to 1
    • accepts any number
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
      	axisWidth={5}
	tickWidth={5}
	gridWidth={5}
    />
  )
}
  • axisOpacity
    • modifies the opacity of axis lines
    • defaults to 1
    • accepts any number
  • tickOpacity
    • modifies the opacity of axis ticks
    • defaults to 1
    • accepts any number
  • gridOpacity
    • modifies the opacity of axis gridlines
    • defaults to 0.5
    • accepts any number
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
      	axisOpacity={0.2}
	tickOpacity={0.2}
	gridOpacity={0.2}
    />
  )
}

Custom colors | Custom widths | Custom opacities
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotAxisColors | ScreenshotAxisWidths | ScreenshotAxisOpacities

  • labelFontSize
    • sets the font size of both axis labels
    • automatically calculated when unspecified
    • accepts any number
  • graphTitleFontSize
    • sets the font size of all graph titles
    • automatically calculated when unspecified
    • accepts any number
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
        labelFontSize={8}
    	graphTitleFontSize={10}
    />
  )
}
  • labelFontFamily
    • sets the font family of both axis labels
    • inherits when unspecified
    • accepts any font family name string
  • graphTitleFontFamily
    • sets the font family of all graph titles
    • inherits when unspecified
    • accepts any font family name string
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
	labelFontFamily="Courier"
	graphTitleFontFamily="Courier"
    />
  )
}

Custom font sizes | Custom font families :-------------------------:|:-------------------------: ScreenshotAxisFontSizes | ScreenshotAxisFontFamilies

Legend Customization

Users can customize the graph legend in several ways.

  • showLegend: defaults to true, controls display of the legend
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
	showLegend={false}
    />
  )
}

Default | showLegend={false} :-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotLegendHidden

Legend Style

Users can customize the legend style by passing in the prop(s) below:

  • legendFontColor
    • Modifies the color of the font used in the legend
    • Defaults to "#AAA"
    • Accepts any color string
  • legendBackground
    • Modifies the background color of the legend
    • Defaults to "none"
    • Accepts any color string
  • legendShowBorder
    • Determines whether a border will be drawn around the legend
    • Defaults to false
    • Accepts true or false
  • legendBorderColor
    • Modifies the color of the border of the legend
    • Defaults to "#AAA"
    • Accepts any color string
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
	legendFontColor="#ff0000"
	legendBackground="#ffffff"
	legendShowBorder={true}
	legendBorderColor="#ff0000"
    />
  )
}

Default | Custom Style :-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotLegendStyle

  • legendFontSize
    • sets the font size of legend texts
    • automatically calculated when unspecified
    • accepts any number
  • legendFontFamily
    • sets the font family of legend texts
    • inherits when unspecified
    • accepts any font family name string
render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
  legendFontSize={10}
  legendFontFamily="Courier"
    />
  )
}

Default | legendFontSize={10} | legendFontFamily="Courier" :-------------------------:|:-------------------------:|:-------------------------: ScreenshotScatterDefault | ScreenshotLegendFontSize | ScreenshotLegendFontFamily

Tooltip

Tooltips can display more specific information about a data series.

render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
	tooltip={false}
	tooltipColor="light"
    />
  )
}
  • tooltip defaults to true, false turns the tooltip off
  • tooltipColor defaults to dark, it can be set to light or dark

Default tooltip | tooltipColor="light" | tooltip={false}
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotTooltipDefault | ScreenshotTooltipLight | ScreenshotTooltipHidden

Customizing Tooltip contents

Users can customize what is displayed inside the tooltip with a function. Expected arguments to the function are the data for the specific point hovered over. The function should return JSX.

let fillTooltip = (pointData) => {
  return(
    <span>The gender for this point is {pointData.gender}</span>
  )
}

render() {
  return(
    <ScatterPlot data={data} xKey="height" yKey="weight" groupKey="gender" weightKey="shoeSize"
	tooltipContents={fillTooltip}
    />
  )
}

ScreenshotTooltipCustom

Animation Customization

Users can control the initial animation of the graph, points growing out from the trendline.

  • initialAnimation: defaults to true, controls the animation