Reactive data visualization components

CircleCI Dependency Status devDependency Status


This is a d3 plugin containing reactive data visualization components.



If you use NPM, npm install d3-fluid. Otherwise, download the latest release. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported. Try d3-fluid in your browser.

<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://giottojs.org/latest/d3-let.min.js"></script>
<script src="https://giottojs.org/latest/d3-view.min.js"></script>
<script src="https://giottojs.org/latest/d3-fluid.min.js"></script>



A row is a layout component and it is only used to store information about the dashboard layout.


A row is composed by one or more columns.


The paper is another name for a container of data visualizations. The following components make up a paper:

  • A default data serie name from the dataStore container
  • One background layer for plot annotation such as background and grid
  • One or more layers
  • One foreground layer for user interactions (canvas paper only)


A layer is defined by:

  • Data, specifically the name of the serie in the dataStore container
  • Marks (aestetics) - data mapping

API Reference



The datastore object is at the core of the data retrieval and manipulation:

var ds = d3.dataStore();

It contains a mapping of data provided by one or more data providers.

# dataStore.size()

Number of data providers registered with this data store.

# dataStore.provider(name, [provider])

If provider is specified, sets a new provider for the specified name and return this dataStore. If a provider was already registered for the same name, the existing provider is removed. If provider is null, removes the current provider for the specified name, if any. If provider is not specified, returns the provider registered with name if any.

# dataStore.getlist(name, [params])

Fetch data from a registered data provider at name and return a Promise. If no data provider is registered for the given name, the promise resolve in an empty list.