Articles

Creating visualization styles

Posted on: Mon, 11/12/2018 - 10:55 By: avasiliev

Visualization styles are configuration entities that store a reference to a drawer plugin (its Id) and a set of configuration defaults. These styles are used to create drawings. As VisualN defines it, a drawing is a ready, self-contained piece of markup (or render array) with possibly styles and scripts attached. Almost anything can be a drawing: a chart, an image gallery or even a web app.

In a sense, they are similar to image styles which are applied to an original image in order to get a styled one. In the case of visualization styles, they are applied to sets of data to get a drawing as a result. Though some drawers don't even need data to create a drawing.

Visualization style to drawing

Visualization styles can be created either using Available drawers preview UI or directly using VisualN > Visualization Styles administration page. Once created, they can be used anywhere on the site to create drawings: views, fields, blocks, embedded into content via ckeditor, tokens etc. Multiple styles can be created for the same drawer.

On the screenshot below a style is created for the Linechart Basic drawer provided with VisualN module.

Visualization style configuration form

To create a visualization style, its label must be set and drawer plugin selected. If selected drawer plugin configuration form provides required fields, those must be set up too.

Using available drawers preview

Posted on: Tue, 11/06/2018 - 13:40 By: avasiliev

VisualN provides an interface to check "how it works" for any available drawer on the site. To see the list of drawers go to VisualN -> Available Drawers Preview menu item.

Available drawers list

Though VisualN allows you to use any resource type as data source (e.g. csv, xls files or views), for demo purposes it is enough to have some dummy data. Such data can be obtained from data generators. Data generators are simple plugins returning an array of data (which is just another resource type) of a given structure that can be used by certain drawers (e.g. Leaflet uses lat, lon and title data fields).

Available drawers list

Data generators may also provide info about drawer or drawers that can use generated data. Those drawers and data generators are considered compatible. Drawers highlighted green have compatible data generators.

There are a couple of use cases when you may want to use the Available drawers preview UI:

  • check drawer in action, examine configuration form settings
  • set configuration values to create a visualization style
  • use the preview UI to help drawer development and to test changes
  • check data format used by drawers (e.g. using table drawer)

Sharing embedded drawings across sites (Video)

Posted on: Tue, 10/30/2018 - 11:36 By: kpv

The article continues the series started with Creating interactive content in CKEditor with VisualN Embed article.

It shows how to use IFrames toolkit provided with VisualN module to share embedded drawings across sites.

For our example we use a Drupal 8 site as drawings origin and a Wordpress site as a target resource exposing those drawings. The Wordpress site can be located at any domain and/or server and doesn't depend on the origin in any way.

1. Go to the Edit page, open embedded drawing Context menu

ckeditor embedded drawing menu

2. Open Drawing Properties dialog, enable sharing, configure properties

ckeditor embedded drawing properties

3. Save changes, copy embed code from the Sharing box

demo chart sharing box

4. Insert embed code into another site content and save

wordpress demo chart

There are a couple of use cases when you might want to share drawings:

  • to share content with you audience to promote your brand, attract new users (generate quality traffic) or spread your data / knowledge across the Internet
  • to create SaaS-like solutions when users use your site to create content and reuse on their sites (e.g. Flickr)
  • to use it as a backend platform for your other resource (as in the video above, Drupal 8 can be used as a backend for Wordpress)

Creating interactive content in CKEditor with VisualN Embed (Video)

Posted on: Tue, 10/23/2018 - 10:47 By: kpv

In the video below we will show you how to create an interactive and informative content based on a couple of xls files and a handful of images using just CKEditor wysiwyg.

It takes just 4 and a half minutes to create the page. Using generic development workflow it would take hours.

ckeditor to content screenshot

Our goal is to create a demo article with info on emperor pinguins, containing an interactive chart, a map and a gallery. For that we are using just functionality provided by VisualN modules pack (with a couple of generic dependencies).

Communicate with your audience, make your content visual and interactive

Posted on: Tue, 12/26/2017 - 00:18 By: kpv

For content managers as well as developers Drupal provides a lot of tools and approaches to create content of different types and flavours, from simple text to structured layouts with much of graphics and media. Though still there is enough uncertainty and complexities with authoring experience. Some tasks are even hardly accomplishable without coding or require a sensible effort to. Here to the rescue comes VisualN. The VisualN module brings a generic approach to carry out many of those "painful" and daunting tasks with ease and fun. What is important, it hides the complexities from user to make interaction intuitive and joyful.

The drawing above as any other drawing in the article is fully created and configured via UI with no single line of code or extra modules. To embed drawings into content VisualN provides a rich set of approaches and their combinations so that user wouldn't be limited in his content structuring strategies and could stick to the preferred ones. For the examples in the article we've chosen to use visualn token functionality to embed drawings via simple tokens of [visualn:embed:drawing:id] format. Though you can choose to use Paragraphs or even embed drawings via iframes (which generally is more suitable to embed drawings into third-party sites content).

The information itself is useless

Posted on: Thu, 12/14/2017 - 18:58 By: avasiliev

The information itself is useless.

 

Quite original start for a web-published text, isn't it? Still the confirmation is true. Solutions don't demand information, solutions demand clearly organized data. No matter what is the domain – in every situation people tend to organize data in a readable well-understandable formats.

 

Multiple mechanisms of collecting and storing the data are developed, and technologies continue to progress. But the key question of data presentation often remains ignored.

Creating a basic Slick alternative in 8 minutes with VisualN from scratch (Video)

Posted on: Thu, 11/16/2017 - 15:09 By: kpv

In the screencast we show how easily a custom VisualN Drawer can be created and how versatile even such a basic drawer can be.

VisualN is a Drupal 8 module used to visualize any data from any source in practically any way. The example here demonstrates how to create a Slick gallery using VisualN toolkit.

Charts, maps, dashboard etc. drawers can be created in a similar way. You can read more on creating drawers strategies in this article.

Strategies of creating VisualN Drawers

Posted on: Wed, 10/25/2017 - 10:10 By: kpv

The listed below are some major approaches to creating VisualN drawers. Some of them need coding, some don't, some need just a couple of lines of code. Choose the ones that fit you and your case best. You may even find a drawer ready for you when the package registry at visualn.org is ready.

Base drawers

Base drawers are the basis of the whole system. They are those very mechanisms that draw visualizations. Everything else is build around base drawers.

VisualN Highcharts Drawer basic usage (Video)

Posted on: Mon, 10/09/2017 - 17:01 By: kpv

The article and the screencast are not finished, revisit for updates.

The screencast demonstrates basic usage example of the Highcharts drawer provided with the VisualN module. Highcarts drawer allows to render any type of chart that highcharts.js library allows. Here we just show three use cases:

  • Create a visualization based on data file
  • Create a visualization based on external data resource
  • Sharing visualization, embedding into third-party site content