Skip to content
React components for d3plus visualizations.
Branch: master
Clone or download
Latest commit 3478464 Jul 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github updates environment Jul 9, 2019
bin removes deprecated github auth Jul 9, 2019
src updates logic for new formatter methods Jul 9, 2019
.eslintrc fixes linter Sep 28, 2018
.gitignore updates environment Dec 21, 2017
.travis.yml updates env Sep 28, 2018
LICENSE updates environment Jul 9, 2019
README.md compiles v0.5.6 Jul 11, 2019
index.js adds Radar component Oct 25, 2018
package-lock.json updates d3plus dependencies Jul 11, 2019
package.json compiles v0.5.6 Jul 11, 2019

README.md

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. And then use the components in your React project like this:

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 file named .d3plus.js needs to exist in the root path of your project. This file should contain all global styles to be applied to the visualizations (passed to the .config( ) method). Here is an example that makes all of your visualizations use the best font ever created:

export default {
  shapeConfig: {
    fontFamily: "Comic Sans MS"
  }
};

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.


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.


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.


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 Thu, 11 Jul 2019 13:30:05 GMT
You can’t perform that action at this time.