This project is not covered by Drupal’s security advisory policy.

line chart
dashboard
leaflet map
heatmap

VisualN aims to be a swiss army knife of visualization.

The module is build around the concept of Drawer which basically is a Drupal plugin. Once created it can be used with any supported data source, plugged via fields, iframes, tokens into content to create Drawings (visualizations) and many more.

Thus VisualN turns Drupal into a visualization platform that can also be used by third-party sites to prepare and embed visualizations into their content. Along with such features as Decoupled Drupal, it can become a new major scope of Drupal implementation and make its audience cover almost all web developers and site owners on the internet.

Read: Communicate with your audience, make your content visual and interactive

Screencast: Creating a basic Slick alternative in 8 minutes

Features

  • Embed visualizations via iframes (currently available for VisualN Block) into third-party sites content
  • Create user-defined drawers (subdrawers) via UI without coding based on drawer plugins (base drawers)
  • Apply modifiers to user-defined drawers via UI to modify drawer configuration forms and their behaviour
  • Use files, external/internal resources (urls), views as data sources
  • Manage visualizations in one place, Library of Drawings (in work)
  • Embed visualizations form the Library of Drawings into content using tokens (needs Token Filter)
  • Use Data Sources, Data Sets and Resource Providers to store and retrieve data or even to generate it on the fly

TBD.

Motivation

Drupal 8 contains many ways of storing and providing data (fields, files, views, links, RESTful api, JSON, XML, CSV etc.) but there is no generic way to handle and visualize that data in a common manner independently of the resource type. Currenlty it is covered by a plethora of modules each with its own approach.

For stakeholders: reduce development costs and time
For marketing specialists: use visualization to make your data talk
For site builders: visualize data from multiple sources without need of writing code
For developers: no need to dig into Drupal APIs every time you need to visualize data from one of standard sources; "do once use anywhere" approach; integrate with other modules to visualize data (activity, reports etc.)
For data scientists: demonstrate and share your results

Overview

VisualN is a general purpose visualization tool that tries to visualize any data from any source in any way - from charts and interactive dashboards to maps, math formulas and logical diagrams (even image galleries).

Moreover, it can even be used for server-side drawing (using php graphic libraries such as GD, ImageMagick, LaTeX etc.)

Out of the box it ships a handful of visualization types (called Drawers) and provides a flexible architecture to integrate custom ones (which is the main value of the module).

The main idea is "do once, use anywhere". Which means that having a visualization plugin implemented once, you can apply it to any type of source: internal site data (via views), uploaded files, external resources etc. Visualization plugins themselves (called drawers) can be created with ease.

From a conceptual point of view VisualN works much like the core Image module: chunks of data can be compared to images, whereas Visualization styles work much like Image styles. Drawers stand there for image effects. If Image styles can be thought as image wrappers that provide required result, then Visualization styles can be thought as data wrappers.

Check documentation on how to use VisualN module.

Related projects:
VisualN Commerce

Current status

The module can be tested and extended though some API changes may (and probably will) occur.

Drawers included are:

  • Highcharts (generic drawer) (info)
  • Highcharts WSS (with setup select) (info)
  • Highcharts Bar (info)
  • Slick gallery (generic drawer) (info)
  • Slick gallery WSS (info)
  • Leaflet map (info)
  • Youtube (standalone) (info)
  • Vimeo (standalone) (info)

Demo drawers:

  • line chart
  • bar chart
  • heatmap
  • stacked grouped bars
  • dashboard

* enable VisualN Styles submodule

See also #2896129: Add some more sample drawers on the plans regaring new drawers.

You can check demo examples for the drawers provided.

If you don't find a drawer that suits your needs, you can contribute one ) Read How-to on how to create drawers.

Installation instructions

  • copy d3.min.js (4th version) to libraries/d3/d3.min.js
  • for Highchart drawers to work copy highcharts.js to libraries/highcharts/js/highcharts.js
  • for leaflet to work you'll also need to copy Leaflet.js library contents to libraries/leaflet directory so that the path to the script would be libraries/leaflet/leaflet.js

Architecture overview

Drawer is the central part where visualization occurs. It consists of a drupal plugin and a js script. Each drawer can provide drawer-specific settings and other useful data. Some examples of settings are: chart colors, labels etc.

Drawer is a required component to create a drawing. There are also two other types of components which are used to make drawers independent of resource type and structure: adapters and mappers.

Adapters are compatibility layers that take data from a given source and convert it into a generic js object to be used by drawers.
Mappers are used between adapters and drawers when some remapping or restructuring is required. Remapping is used when data keys provided by the source are different from those used by the drawer (for eaxample column names). Restructuring is used when source data structure must be changed (i.e. from table rows to a nested tree).

You can think of the process as an assembly line where source data is transfered from adapter to mapper and finally to drawer. But there may be no need in adapter and mapper if drawer handles the resource by itself.

Since the number and types of possible visualizations is almost unlimited, there is a plan to use some kind of distribution system for the components. Check the issue (#2884310: Add *components* directory along with *vendor* for drupal-specific packages (with corresponding changes to composer.json installer-paths, drupal installer and autoloader)) for details.

Supporting organizations: 
development and maintenance

Project information

Downloads