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).

So what a drawing is and how it works

There is practically no limit on what a drawing can be. For purposes of the article though we can say that a drawing is basically a piece of content or markup with styles, scripts and settings attached generated by a drawer plugin or fetched by a fetcher plugin (which commonly relies on a drawer). Drawer may also need some data to generate drawings, e.g. maps need a list of points with geodata, charts may need some kind of statistics in which case data can be provided for it. Data can be provided as files or retrieved from many other types of sources, even generated on the fly - VisualN provides all required tooling and infrastructure.



The gallery above is considered to be a single drawing, there is no difference for VisualN what kind of drawing it is: map, chart, video, gallery or anything else.

The spectrum of use cases

As with any other technology there is always a question on where and how to use it. A short answer would be to use drawings as you would use images. Just configure a drawing entity and insert it where you need it. Though you can also create a drawing block or add one of VisualN field types to a content entity and create a drawing directly when editing it. For example, you can create a node type with a VisualN File field to upload data file (e.g. of JSON or some other supported format). After uploading a file you can configure a drawing that consumes the data just as any other field.

You can even create a view-based drawing - thanks to VisualN views display style provided by VisualN.

Examples always speak better so lets give some:

  • Place a map somewhere in an article. The map itself would take data from some arbitrary source of a mixed format
  • Create two charts (one as a block, another as a node field) of two different types but using one set of data uploaded to a Data Set entity. When updating the file in one place, all charts using it change accordingly
  • Generate some static markup clientside and insert it into content
  • Create a set of paragraphs each of which would generate content incorporating different types of visualizations or media
  • Embed a locally created gallery or a chart into a third-party site content
  • Create a graph showing Drupal Commerce sales
  • Output an always up-to-date chart using data from an external url resource



Hopefully you have already grasped the idea for now.

Drawer and Drawing are the base concepts for VisualN, everything else is build around them to make it possible to use drawings in different contexts, provide data, handy configuration UI etc.

It is worth to mention that Drawer always comes together with another structural element, Visualization style, which is basically a wrapper around a drawer that stores some default configuration for it and can be used directly without the need to fill in the config every time you want it. Of course there can be created multiple styles for a given drawer.

Where to get those drawers

If you are a programmer you can easily create a drawer for whatever you need and share it with community. We are working on a visualizations open registry at so that you could use it to let people know about your work.

If you are not a programmer and you don't find a drawer that supplies your needs, you can make a description of what you need and share it with community. If they find it interesting and useful you can expect someone to make it - creating drawers is really easy and entertaining.

In some cases you don't even need to look for a drawer - it's enough to find a configuration.

As the approaches get more mature and more drawers appear out there, the more ways to solve the same task will appear. There is a concept of "generic drawer" - a highly flexible drawer configured with a set of rules set in JSON format. Such drawers are able to create a rich set of different drawings though may be a bit more complex to configure (actually depends on every single drawer). Both charts in the given article are created using just one single "generic" drawer.

Thus, to get a specific drawing you can choose a suitable configuration set, shared by other users or just read specs and make yours.

Let user explore the context and look beyond the text

There is no reason to treat users just as passive observers or readers.

You should motivate them to think and to explore. That will help to create grateful audience and you will gain real adepts that come to your site consciously, not just clicking search results links.

The yearning for exploration is a natural one for human beings, so why not benefit of that?


Often a good visualization can better express the idea then a ton of text. Also visually attractive and interactive content keeps visitors longer on your site or even brings new ones.

Surely, content should be also informative and meaningful or it doesn't work.

Why it really matters

The Wild Wild Web...

Content defines the success. Without quality content there is a strong chance to become just another cactus to stay alone in the desert not worth of any special attention.




Technology won't make outstanding content for you but when you have something to say or to share it can help to communicate the message to the audience effectively.

Drawings have been a universal language for centuries and still they are. Technology in its turn brings extensive ways and tools to "draw" those drawings and make them interactive. What is true, it can make really great things in right hands.


Excellent run-down. If VisualN can really fulfill it's potential, it will undoubtedly go a long way in the world of Drupal!

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.