Data visualization, part 1th: Using SVG and D3 visual browsing metrics

This two-part article series will demonstrate a visualization technique that helps extract information from the data that has business value, and this article is the first part of the series. You'll see how to use Scalable Vector Graphics (SVG) and open source D3 JavaScript libraries to create visual representations that can be viewed through the browser, conveying information through shapes and colors. I'll demonstrate these techniques with some examples of visual browsing metrics (related to social media usage). Part 1th outlines how SVG and D3 work together, and provides some basic examples. The 2nd part will delve deeper into the visualization of this powerful combination of open standard technologies.

Analyzing social media metrics

Social media Big Data Challenge

Social media sites, such as Twitter, Facebook, and YouTube, provide a comprehensive WEB service interface to expose their functionality. For example, the YouTube Data API enables applications to upload video to YouTube or to play an existing YouTube video on a website. Now these sites are also developing the profiling API. For example, the YouTube Analytics API provides programming clients with statistics such as the number of views and favorite times (number of likes). As a result, more business applications can interact with social media through visual and programmatic interfaces. For companies of all sizes, the next challenge is to apply large numbers of social data to the business most effectively through big data analysis. Data visualization (an integral part of the entire analysis scenario) is the focus of this article series. You can learn about IBM Infosphere streams IBM large data platform and IBM Infosphere biginsights product comprehensive analysis capabilities.

A creative way for companies to understand customer behavior is through social media to present ideas and involve potential customers in interactive discussions. Social media interactions reflect two-way interpersonal interaction: To understand people's likes and dislikes, you have to listen to what they are saying, just as you would like to interact with active people.

Taking a home decorating company as a hypothetical scenario, the company publishes content in blogs, videos, Facebook pages and forums. This content shows the company's ideas through social media resources and attempts to initiate discussions and other forms of user interaction. These content cater to each customer's tastes and preferences, helping them navigate from one social resource to another. In order to judge changing customer trends and propose new methods and new designs, the company wants to analyze the data from three aspects:

Popularity, represented by the number of views per social resource

Number of users participating in the interaction on this resource

The direction in which a user navigates from one resource to another

Tables 1, 2, and 3 show the number of user views, user interactions, and navigation times within three weeks. Note that these tables use colored names to represent the types of social media resources that the company uses (such as blogs and Facebook pages).

Table 1 shows the number of user views per resource:

As you can see from table 3, 3,057 users in week 1th have navigated to the golden resource after accessing the blue resource, and the red resource has received the largest audience from the blue resource.

Visualization of browsing data

Visual content provides an easier and quicker way to interpret large amounts of data than a numeric table. The data in tables 1, 2, and 3 can be graphically represented in a number of ways. For example, Figure 1 is a simple way to display the 1th week of data in table 1:

Figure 1. Number of views per social resource in the 1th week in a circle

Figure 1 shows the number of views per resource as a circle. The relative size of the circles is proportional to the number of times they are represented, so the most viewed resource (gold) is represented by the largest circle. Each circle also shows the actual number of views obtained for the first 1 weeks of each resource.