d3plus-react

    1.1.1 • Public • Published

    d3plus-react

    NPM Release Build Status Dependency Status Gitter

    React components for d3plus visualizations.

    Installing

    Use npm install d3plus-react -S to install the package as a dependency.

    Configuration

    A valid d3plus config Object needs to be provided to the config prop of every visualization.

    import {Treemap} from "d3plus-react";
    
    const methods = {
      groupBy: "id",
      data: [
        {id: "alpha", value: 29},
        {id: "beta",  value: 10}
      ],
      size: d => d.value
    };
    
    <Treemap config={methods} />

    Additionally, a global set of styles can be provided using the "d3plus" React context key. This allows you to set base styles on all of your visualizations in one place, often in an external file. A component's config set by props will override global defaults key-by-key using a deep cloning function.

    import React, {Component} from "react";
    
    export default class MyApp extends Component {
    
      getChildContext() {
    
        return {
          d3plus: {
            shapeConfig: {
              fontFamily: "Comic Sans MS"
            }
          }
        };
    
      }
    
      render() {
    
        return (
          <main>
            {/* child components containing visualizations */}
          </main>
        );
    
      }
    
    }
    
    MyApp.childContextTypes = {
      d3plus: PropTypes.object
    };

    Update Cycle

    In order to detect whether a component should udpate in React, each component does a rudimentary check between the current config object and the incoming new config object. This is done via a simple equality check on the stringified versions of each object. This can also be overridded using the forceUpdate prop:

    const shouldUpdate = this.props.forceUpdate ? false : JSON.stringify(oldConfig) === JSON.stringify(newConfig);

    This works in most cases, but may not update your visualizations if using an accessor function that references an external variable. For example, if your x accessor is:

    const config = {
      ...,
      x: d => d[xVar]
    };

    ...and xVar changes, the visualization will not update. The quick "hack" for this is add xVar to the config object so that it triggers the update via stringify:

    const config = {
      ...,
      x: d => d[xVar],
      xVar
    };

    API Reference


    AreaPlot <>

    This is a global class, and extends all of the methods and functionality of Viz.


    BarChart <>

    This is a global class, and extends all of the methods and functionality of Viz.


    BoxWhisker <>

    This is a global class, and extends all of the methods and functionality of Viz.


    BumpChart <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Donut <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Geomap <>

    This is a global class, and extends all of the methods and functionality of Viz.


    LinePlot <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Matrix <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Network <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Pack <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Pie <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Plot <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Priestley <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Radar <>

    This is a global class, and extends all of the methods and functionality of Viz.


    RadialMatrix <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Rings <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Sankey <>

    This is a global class, and extends all of the methods and functionality of Viz.


    StackedArea <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Tree <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Treemap <>

    This is a global class, and extends all of the methods and functionality of Viz.


    Viz <>

    This is a global class, and extends all of the methods and functionality of React.Component.

    # new Viz()

    Creates SVG paths and coordinate points based on an array of data. See this example for help getting started using the geomap generator.

    # Viz.module.exports <>

    This is a static property of Viz.

    Param Type Default Description
    [config] Object {} An object containing method/value pairs to be passed to the visualization's .config( ) method.
    [dataFormat] function d3plus.dataFold A custom formatting function to be used when formatting data from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the data method.
    [linksFormat] function d3plus.links(path, formatter) A custom formatting function to be used when formatting links from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the links method.
    [nodesFormat] function d3plus.nodes(path, formatter) A custom formatting function to be used when formatting nodes from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the nodes method.
    [topojsonFormat] function d3plus.topojson(path, formatter) A custom formatting function to be used when formatting topojson from an AJAX request. The function will be passed the raw data returned from the request, and is expected to return an array of values used for the topojson method.

    Documentation generated on Wed, 12 Jan 2022 20:00:19 GMT

    Install

    npm i d3plus-react

    Homepage

    d3plus.org

    DownloadsWeekly Downloads

    182

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    102 kB

    Total Files

    28

    Last publish

    Collaborators

    • davelandry