How to display a visualization created with CartoDB in a Joomla article?

The code in the article is:


but when I load the web page of the article I get these errors with Firebug:

creating a layer without type… "geo/gmaps/gmaps_cartodb_layer.js","geo/gmaps/gmaps.js","ui/common/dialog.js","u… cartodb.js (riga 15)

TypeError: e is undefined… &")+r.join("&")},template:function(e,t){return e.replace(/{ *([w_]+) *}/g,fun… cartodb.js (linea 7, col 30868)

TypeError: n.remove is not a function… ed[e]=t;if(!t)n=this.interaction[e],n&&(n.remove(),this.interaction[e]=null);els… cartodb.js (linea 18, col 18443)

I don't understand…

Please someone help me!

This is the link of the page. Can you help me with the errors?

There was a bug in cartodb.js related to Array prototype modification by mootools. I fixed it, you can see it here:

It will be released soon, in the meantime you can use the development version:

Information Visualization

Information visualization is the process of representing data in a visual and meaningful way so that a user can better understand it. Dashboards and scatter plots are common examples of information visualization. Via its depicting an overview and showing relevant connections, information visualization allows users to draw insights from abstract data in an efficient and effective manner.

Information visualization plays an important role in making data digestible and turning raw information into actionable insights. It draws from the fields of human-computer interaction, visual design, computer science, and cognitive science, among others. Examples include world map-style representations, line graphs, and 3-D virtual building or town plan designs.

The process of creating information visualization typically starts with understanding the information needs of the target user group. Qualitative research (e.g., user interviews) can reveal how, when, and where the visualization will be used. Taking these insights, a designer can determine which form of data organization is needed for achieving the users’ goals. Once information is organized in a way that helps users understand it better—and helps them apply it so as to reach their goals—visualization techniques are the next tools a designer brings out to use. Visual elements (e.g., maps and graphs) are created, along with appropriate labels, and visual parameters such as color, contrast, distance, and size are used to create an appropriate visual hierarchy and a visual path through the information.

Information visualization is becoming increasingly interactive, especially when used in a website or application. Being interactive allows for manipulation of the visualization by users, making it highly effective in catering to their needs. With interactive information visualization, users are able to view topics from different perspectives, and manipulate their visualizations of these until they reach the desired insights. This is especially useful if users require an explorative experience.

Information Visualization

Data visualization, defined

Data visualization is the creation of visual representations of data. These representations clearly communicate insights from data through charts and graphs. In terms of business intelligence (BI), these visualizations help users make better data-based decisions.

“To create architecture is to put in order. Put what in order? Function and objects.”

– Le Corbusier

Le Corbusier was one of the greatest architects of the 20th Century. He intuitively understood how to reduce everything to its simplest and most elegant form without ever sacrificing what mattered most: the purpose of each creation and how people interact with the space around them.

Data visualization is a lot like architecture. When figuring out how to display data, you need to start with the function (the trend, pattern, or vital piece of information you’re trying to impart at a glance), then consider the user (how they navigate and interact with the data), and only then do we reach the final step: making it as clean and beautiful as possible.

See Sisense visualizations in action:

Many people tackle these steps in the wrong order. Instead of saying, “This is the information I need to present let’s find the best possible way of showing that idea,” they think to themselves: “We need a bar chart/pie chart/indicator here.” Or worse: “Scatter maps are kind of cool. Let’s put one in here?”

This is how people end up with confusing or even misleading visualizations that, while attractive, do little to aid smart decision making or enlighten users about the true performance of their businesses.

In this article, we’ll run through 13 types of data visualization examples (plus one bonus!), ranging from the simple to the complex, explaining their unique features as well as how and when to use them for maximum impact.

Find the most effective data visualization for your dashboards:

Society for Information Display

The Society for Information Display (SID) is an industry organization for displays, generally electronic displays such as television s and computer monitors. SID was founded in 1962 . Its main activities are publishing journals and running Display Week, its main conference, held in May each year.

* [ About SID]

Wikimedia Foundation . 2010 .

Look at other dictionaries:

Society for Conservation GIS — The Society for Conservation Geographic Information Systems (SCGIS) is an international non profit society with around 1000 members in 80 countries. It originated in the USA in 1997 and at first grew to around 300 US members drawn from many of… … Wikipedia

Display device — Nixie tubes, LED display and VF display, top to bottom. A display device is an output device for presentation of information in visual or tactile form (the latter used for example in tactile electronic displays for blind people). When the input… … Wikipedia

Display Data Channel — The Display Data Channel or DDC is a collection of digital communication protocols between a computer display and a graphics adapter that enables the display to communicate its supported display modes to the adapter and to enable the computer… … Wikipedia

Information visualization — the interdisciplinary study of the visual representation of large scale collections of non numerical information, such as files and lines of code in software systems [S.G. Eick (1994). Graphically displaying text . In: Journal of Computational… … Wikipedia

Information graphics — or infographics are visual representations of information, data or knowledge. These graphics are used where complex information needs to be explained quickly and clearly Doug Newsom and Jim Haynes (2004). Public Relations Writing: Form and Style … Wikipedia

Information for Social Change — (ISC) is an international, volunteer based association, whose primary mission is to debate and comment on issues of social justice, censorship, freedom and ethics in the library and information context. Information for Social Change can be… … Wikipedia

Information design — has been defined as the art and science of preparing information so that it can be used by human beings with efficiency and effectiveness.Information design has its origins as a subset of, or synonym for graphic design and it is often taught as… … Wikipedia

information processing — Acquisition, recording, organization, retrieval, display, and dissemination of information. Today the term usually refers to computer based operations. Information processing consists of locating and capturing information, using software to… … Universalium

Information and communication technologies for development — An OLPC class in Ulaanbaatar, Mongolia … Wikipedia

Which types of data are used in Location Intelligence?

Location data can be anything from addresses & latitude/longitude coordinates, to points, lines & polygons. You can also create spatial data with place names & administrative units such as countries and states.

However, as well as using internal data from their organizations (such as CRM, loyalty card, ecommerce), organizations also regularly gather publically available Open Data to enrich their analysis.

More & more premium spatial data streams such as Financial, Human Mobility, Road Traffic, Points of Interest, Weather, Climate & Housing are also being used.

Blog layout - responsive image grid positioning

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

Thanks for the solutions. (I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php . I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

1) I could not change the spacing between the images, because i want to make it a bit smaller.

2) If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Residency Overview

The program includes a unique three-day residency on MICA&rsquos campus in Baltimore to build a network of colleagues, interact with industry professionals, and learn the most current ideas and best information visualization practices. The residency is designed to discuss emerging ideas in visualization, learn project management practices and strategies, and develop skills in applications and the production of information visualizations. This essential component of your graduate experience is not found in other programs.

Visualization and analytics tools for infectious disease epidemiology: a systematic review

Background: A myriad of new tools and algorithms have been developed to help public health professionals analyze and visualize the complex data used in infectious disease control. To better understand approaches to meet these users' information needs, we conducted a systematic literature review focused on the landscape of infectious disease visualization tools for public health professionals, with a special emphasis on geographic information systems (GIS), molecular epidemiology, and social network analysis. The objectives of this review are to: (1) identify public health user needs and preferences for infectious disease information visualization tools (2) identify existing infectious disease information visualization tools and characterize their architecture and features (3) identify commonalities among approaches applied to different data types and (4) describe tool usability evaluation efforts and barriers to the adoption of such tools.

Methods: We identified articles published in English from January 1, 1980 to June 30, 2013 from five bibliographic databases. Articles with a primary focus on infectious disease visualization tools, needs of public health users, or usability of information visualizations were included in the review.

Results: A total of 88 articles met our inclusion criteria. Users were found to have diverse needs, preferences and uses for infectious disease visualization tools, and the existing tools are correspondingly diverse. The architecture of the tools was inconsistently described, and few tools in the review discussed the incorporation of usability studies or plans for dissemination. Many studies identified concerns regarding data sharing, confidentiality and quality. Existing tools offer a range of features and functions that allow users to explore, analyze, and visualize their data, but the tools are often for siloed applications. Commonly cited barriers to widespread adoption included lack of organizational support, access issues, and misconceptions about tool use.

Discussion and conclusion: As the volume and complexity of infectious disease data increases, public health professionals must synthesize highly disparate data to facilitate communication with the public and inform decisions regarding measures to protect the public's health. Our review identified several themes: consideration of users' needs, preferences, and computer literacy integration of tools into routine workflow complications associated with understanding and use of visualizations and the role of user trust and organizational support in the adoption of these tools. Interoperability also emerged as a prominent theme, highlighting challenges associated with the increasingly collaborative and interdisciplinary nature of infectious disease control and prevention. Future work should address methods for representing uncertainty and missing data to avoid misleading users as well as strategies to minimize cognitive overload.

Keywords: Disease surveillance GIS Infectious disease Public health Social network analysis Visualization.

Copyright © 2014 The Authors. Published by Elsevier Inc. All rights reserved.

Through your journalism work, teaching, workshops and books – and now Massively Open Online Courses, you've done as much as anyone I can think of to popularize data visualization and infographics. Why do you think your message has drawn so much interest? You have had thousands of students in your online classes, for example.

Alberto Cairo: Today you have confluence of factors. The first is that more people are buying the idea that words alone are not powerful enough to communicate effectively, that you also need visuals. The second factor is that the tools of the trade are becoming cheaper, and in some cases they are free and easier to use than ever. I am amazed that I can code a complex data visualization in R, for example, with just three lines of code. My favorite tool at the moment is Quadrigram – it does a lot of what Tableau can do, and it's free. It's web-based, and it lets you download the code you have generated with it. Imagine that tool 15 years ago, it would be thousands of dollars. So tools like CartoDB, Quadrigram, Tableau Public, all these tools are enabling more and more people to jump in and start doing visualization.

The third factor is the popularization of visualization, through the popularization of the principles behind creating effective and truthful data visualizations. You have a new batch of books written in a style that is friendlier, much less technical, and much more accessible for the general public. They are easier to read and less technical without being shallower.

Web-Based Visualization Tool

3D Visualization of Manhattan using QGIS Plugin

GIS Blogger Anita Graser, aka Underdark, has created a nice visualization using the QGIS2threejs plugin, including an interactive web-based version. I won't repeat the instructions listed on her blog, but I will make a few suggestions as I go along. Her eloquent map features buildings extruded (constant height), trees, and some elevation changes. Feeling inspired, I thought I would give it a quick try.

Note: You will need Firefox, Chrome, or Internet Explorer 11--basically a Web-GL capable browser to view the visualizations.

WebGL is an API that allows for 3D visualizations to be displayed in a web browser without additional plugins. So, users won't need to install anything to view your product. The threejs plugin is a JavaScript library that helps to keep everything neat and tidy. For examples of threejs projects, check out this website: which is filled with examples of featured projects. Believe it or not, the projects you will see below consist of five files that take up less than 5 megabytes of storage.

Tip #1: Using a shapefile or digitizing a boundary for an extent can help to speed the project along and keep the look of your map consistent. In QGIS, you can do this using the AutoTrace plugin.

For the project, I focused on Manhattan from Central Park down to just below times square.

Below is what the project looks like in QGIS. I left the bound on to show the project area. I used a building footprint shapefile that contained height from New York City's Open Data Portal. Please note: This file is large

180 MB. In addition, there is a basemap from Open Street Map using the QGIS plugin, and a DEM. You can also add other point, polygon, or line features to your 3D map. I have chosen to stay with just buildings. I color-coded the buildings based on height for effect (redder is taller). Click on any of the screenshots to magnify them.

Running the plugin is rather quick. The result is five files exported to a folder of your choosing. The contents of the folder can be placed into the root or public directory of web hosting service to publish to the web! Of course, you can also double-click the resulting *.html file to open it on your desktop--please note some broswers may try to block you from opening it. So right-click, and choose open with a friendly browser like Chrome or Firefox.

Tip #2: I created a new variable to half the building heights. Otherwise, the tall buildings of NYC barely fit in the web browser and makes viewing awkward and challenging.

When you first open the html file, the view will be oriented the same way you have the files in QGIS. If you have not used 3D viewers before, you can navigate using the left and right mouse buttons and wheel to pan, rotate, and zoom. Try not to make sudden moves with the mouse because it is easy to get disoriented. Refreshing the web page will send you back to the starting view.

3D Visualization of Manhattan. Redder buildings are taller.
As you zoom and pan, you can bring areas into closer view. Here looking down 7th Avenue in NYC.

A closer look: From Central Park down 7th Avenue
Lastly, an overhead view of Times Square.
Can you see where the ball is dropped on New Year's. One Times Square?
Overall, the plugin was fast and easy to use. Not only can it be used for creating cityscapes. You could also visualize chloropleth maps in 3D, for example. Performance in browser was smooth. I saw memory usage similar to what Underdark reported, around 1.6 GB of RAM. This is reduced if you do not constantly hold down any of the mouse buttons--occasionally releasing as you view.

Update #1: If the basemap is not loading, and you see a black rectangle, reload/refresh your browser once or twice and it should appear!

Update #2: Forgot to mention: Since almost 2 GB of RAM is used--this prevents viewing the maps on a mobile device, since most mobile devices don't have or max out at 2 GB. I have gotten them to load in Android after a long time, but you won't be able to manipulate them (zoom, pan, rotate,etc.)