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

@vannizhang/react-d3-charts

v1.0.34

Published

A collection of simple and reusable charts with D3, React and TypeScript.

Downloads

218

Readme

React D3 Charts

React D3 Charts is a library that offers a collection of simple and reusable charts with D3, React and TypeScript.

Table of Conetnt

Installation

To use React D3 Charts in your project, install it via npm:

npm install @vannizhang/react-d3-charts

Docs

Basic Bar Chart

A basic bar chart, or bar graph, is a graph that displays different categories of data with rectangular bars. The lengths of the bars are proportional to the size of the data category they represent.

See examples.

import { BarChartBasic } from '@vannizhang/react-d3-charts'

<BarChartBasic
  data={[
    {
      x: '12/1', // A string or numerical value that determines the x position of this item.
      y: 26, // A numerical value that determines the height of this item in Bar chart.
      tooltip: 'this is a tooltip',
    },
    {
      x: '12/2',
      y: 38,
      tooltip: 'this is a tooltip',
    },
    //...
  ]}
/>

Basic Line Chart

A basic line chart is a simple, two-dimensional chart with an X and Y axis. Each point represents a single value, and the data points are joined by a line to depict a trend, usually over time.

See examples.

import { LineChartBasic } from '@vannizhang/react-d3-charts'

<LineChartBasic
  data={[
    {
      x: 2013,
      y: 26,
      tooltip: 'this is a tooltip',
    },
    {
      x: 2014,
      y: 38,
      tooltip: 'this is a tooltip',
    },
    //...
  ]}
/>

Bar and Line Combo Chart

The Bar and Line Combo Chart is a type of graph that combines two different types of visualization: bar chart and line chart. It is used to display and compare different data series that have different scales or units of measurement.

See examples.

import { BarLineComboChart } from '@vannizhang/react-d3-charts'

<BarLineComboChart
  data={[
    {
        x: '12/1',
        yBar: 26,
        yLine: 10,
        tooltip: 'this is a tooltip',
    },
    {
        x: '12/2',
        yBar: 38,
        yLine: 36,
        tooltip: 'this is a tooltip',
    },
    //...
  ]}
/>

Diverging Bar Chart

A diverging bar chart is a type of bar chart that can be used to visualize the spread between values, generally positive and negative.

See examples.

import { DivergingBarChart } from '@vannizhang/react-d3-charts'

<DivergingBarChart
  data={[
    {
        x: 'Trees',
        y: -40,
        tooltip: 'this is a tooltip',
        fill: 'green',
    },
    {
        x: 'Water',
        y: -10,
        tooltip: 'this is a tooltip',
        fill: 'dodgerblue',
    },
    //...
  ]}
/>

Horizontal Bar Chart

A horizontal bar chart is a type of graph that uses rectangular bars to present data. The length of the bars is proportional to the values they represent. Horizontal bar charts are used to display comparisons between categories of data.

See examples.

import { HorizontalBarChart } from '@vannizhang/react-d3-charts'

<HorizontalBarChart
  data={[
    {
        y: 'California',
        x: 50,
        tooltip: 'this is a tooltip',
    },
    {
        y: 'Colorado',
        x: 45,
        tooltip: 'this is a tooltip',
    },
    //...
  ]}
/>

Grouped Bar Chart

A grouped bar chart is a type of bar chart that displays data in rectangular bars grouped together, with each group representing a category, and each bar within the group representing a subcategory or a different variable.

Grouped bar charts are particularly useful for comparing the values of multiple subcategories across different categories. They allow for easy visual comparison of values within each category and between different categories.

See examples.

import { GroupedBarChart } from '@vannizhang/react-d3-charts'

<GroupedBarChart
  data={[
    {
        title: 'California',
        data: [
            {
                x: 'Jan',
                y: 26,
                fill: 'steelblue',
                label: '26',
                labelOnTop: 'Jan',
            },
            {
                x: 'Feb',
                y: 38,
                fill: 'cornflowerblue',
                label: '38',
                labelOnTop: 'Feb',
            },
            {
                x: 'Mar',
                y: 10,
                fill: 'lightblue',
                label: '10',
                labelOnTop: 'Mar',
            },
        ],
    },
    //...
  ]}
/>

Area Chart

An area chart, also known as a mountain chart, is a data visualization that combines the appearance of a line chart and a bar chart. It's similar to a line graph in that data points are plotted and connected by line segments. However, the area below the line is colored in or shaded.

See examples.

import { AreaChart } from '@vannizhang/react-d3-charts'

<AreaChart
  data={[
    {
      x: 2013,
      y: 26,
      tooltip: 'this is a tooltip',
    },
    {
      x: 2014,
      y: 38,
      tooltip: 'this is a tooltip',
    },
    //...
  ]}
/>

Multiple Lines Chart

A multi-line chart is a basic line chart with one or more additional lines that represent comparison trends. You can use a line graph with multiple lines to display the trend of key data points over time.

See examples.

import { MultipleLinesChart } from '@vannizhang/react-d3-charts'

<MultipleLinesChart
  data={[
    {
      fill: '#3b5998',
      key: 'Meta',  
      values: [
        {
          x: 1,
          y: 313.26001
        },
        {
          x: 2,
          y: 211.029999
        },
        {
          x: 3,
          y: 222.360001
        },
        //...
      ]
    },
    {
      fill: '#7FBA00',
      key: 'Microsoft',
      values: [
        {
          x: 1,
          y: 310.980011
        },
        {
          x: 2,
          y: 298.790009
        },
        {
          x: 3,
          y: 308.309998
        },
        //...
      ]
    }
  ]}
/>

Pie Chart

Pie charts can be used to summarize a set of nominal data or display the different values of a given variable, such as a percentage distribution.

See examples.

import { PieChart } from '@vannizhang/react-d3-charts'

<PieChart
  data={[
    {
      key: 'CA',
      value: 2,
      tooltip: 'this is a tooltip',
    },
    {
      key: 'CO',
      value: 4,
      tooltip: 'this is a tooltip',
    },
    {
      key: 'CT',
      value: 3,
      tooltip: 'this is a tooltip',
    }
  ]}
  height={120}
  width={120}
/>

Sparkline Chart

The Sparkline chart renders a tiny line chart using an array of numbers as input data.

See examples.

import { Sparkline } from '@vannizhang/react-d3-charts'

<Sparkline
  data={[5, 16, 26 ,31, 7, 9, 14, 38]}
/>

Customizing Common Chart Styles with CSS Variables

You have the ability to customize the styles of common chart elements by providing your own values for CSS variables. These variables are defined in the variables.css file and control the appearance of specific elements within the components.

Here's an example of the variables.css file:

:root {
    /*
     * variables that control the style of the axis tick line and text
     */
    --axis-tick-line-color: rgba(0,0,0,.5);
    --axis-tick-text-color: #303030;
    --axis-tick-text-font-size: 10px;

    /*
     * this variable will be used to adjust the position of 
     * bar-label-text-group text element along the y axis.
     */
    --bar-label-text-translate-y-position: -8px;

    /*
     * variables that control the style of the chart tooltip
     */
    --tooltip-background-color: rgba(255,255,255,1);
    --tooltip-text-color: #303030;
    --tooltip-text-font-size: .8rem;
    --tooltip-max-width: 200px;
    --tooltip-border-color: transparent;
    --tooltip-dropshadow-color: rgba(0,0,0,.2);

    /*
     * variables that control the style of crosshair reference line
     */
    --crosshair-reference-line-color: rgba(0,0,0,.5);
    --crosshair-reference-line-width: 1px;
    --crosshair-reference-line-stroke-dasharray: 1 1;

    /*
     * variables that control the style of user provided vertical reference line
     */
    --vertical-reference-line-color: rgba(50, 50, 50, .5);
    --vertical-reference-line-width: 1px;
    --vertical-reference-line-stroke-dasharray: none;

    /*
     * variables that control the style of user provided horizontal reference line
     */
    --horizontal-reference-line-color: rgba(50, 50, 50, .5);
    --horizontal-reference-line-width: 1px;
    --horizontal-reference-line-stroke-dasharray: none;
    --horizontal-reference-line-label-text-color: rgba(30, 30, 30, .9);
    --horizontal-reference-line-label-text-size: .8rem;

    /*
     * variables that control the style of user provided reference rectangle box
     */
    --reference-rectangle-fill: rgba(0,0,0,.05);
    --reference-rectangle-stroke-color: rgba(0,0,0, .25);
    --reference-rectangle-stroke-width: 1px;

    /*
     * variables that control the style of divider line that is used in Diverging Bar Chart and similar
     */
    --divider-line-color: rgba(0,0,0,.5);
    --divider-line-width: 1px;
}

To customize the styles, you can simply override these variables with your own values. Here's an example of how you can override the --axis-tick-line-color and --axis-tick-text-color variables:

<div
  style={{
    '--axis-tick-line-color': 'lightslategray',
    '--axis-tick-text-color': 'lightslategray',
  } as React.CSSProperties}
>
  <BarChartBasic
    data={[
      {
        x: '12/1', // A string or numerical value that determines the x position of this item.
        y: 26, // A numerical value that determines the height of this item in Bar chart.
        tooltip: 'this is a tooltip',
      },
      {
        x: '12/2',
        y: 38,
        tooltip: 'this is a tooltip',
      },
      //...
    ]}
  />
</div>

Dependencies

  • React (version 18)
  • D3.js (version 7)

Storybook

Storybook provides a sandbox environment where you can interactively develop and test the components in isolation.

To test the components locally, run the following command:

npm run storybook

You can also generate static output (saved in the /docs folder) of the Storybook using:

npm run build-storybook

License

This library is licensed under the Apache License