search

VALIDproject / mtdb2

Visual exploration of media transparency data
BSD 2-Clause "Simplified" License
3 stars 1 forks source link

readme

Media Transparency Database Visualization

188.943 Praktikum aus Visual Computing

Abstract

The "media transparency database" contains the accumulated amount of money spent by governmental organizations on media companies. This data can be explored as a multimodal dynamic network. Existing web projects already present solutions to visualize the dataset, but to analyse the data further a user needs more interaction methods. This project implements a task-tailored dashboard with multiple connected views, which implements brushing and linking to enable the user to analyse the dataset in an easy to use matter.

Related Work

The "media transparency database" is available since the third quarter of 2012. Since then several visualizations got presented:

The first two visualizations are presentations of an analysis of the data. But the last two approaches are visualizations that support the user to analyze and investigate into the data. The force directed node link diagram has the problem that it is too slow to render a nice overview of the dynamic network. Additionally it is hard to interpret the payment flow, because it is visually encoded in the size of the nodes of the diagram.

The visualization of [P. Salhofer et. al] is stable, easy and fast to interact. But the visualizations are distributed onto 4 different web pages, which makes it hard to combine the insight of the user from one visualization with the others. Additionally the payment flow visualization is restricted to only 800 relations.

Technologies

The following technologies are used:

Problem Description

Governmental advertisement in media and sponsorships are a possible way to influence press opinion. Therefore, the Austrian parliament passed a law that made it mandatory for governmental organizations to disclose their expenses for advertisements in different media (TV, radio, print, as well as online).

This so-called "media transparency database" is made publicly available by the Austrian Regulatory Authority for Broadcasting and Telecommunications (RTR) via the Austrian open government data portal.

It contains the accumulated amount of money transferred in a certain quarter of the year for each governmental organization and media company. This database can be explored as a multimodal dynamic network.

Data Structure

The media transparency database is structured as a Table with each row containing a relation from one governmental organization (Rechtsträger) to one media company (Medium). This relation contains the amount of transfered money (Euro), the quarter of the year (Jahr Quartal) and the law of the reason of the payment (Gesetz).

The table contains over 145000 entries over 12 quarters. So that one quarter contains 13000 data entries. There are over 1000 governmental organizations and media companies.

The data quality of the database is not sufficient enough for some data entries. These entries include spelling mistakes or are just differently formated.

Examples

Dashboard

(Click on the image to go the the video)

Click on the image to go the the video

Filters

Flow Visualization

Details

Source Code Documentation

Install

The release build from the last tag is in the subfolder public. Copy it onto a webserver and it should work. Or visit my server

This project depends on Brunch. Install it with for example node.js. All depending libraries should be managed by brunch. If something is missing you have to install it manually with node.js.

  1. install node.js
  2. install brunch globally:

npm install -g brunch

  1. install local packages (if necessary):

npm install --save-dev brunch javascript-brunch css-brunch sass-brunch queue-async

Run

develop standard run

brunch build

develop run with server

brunch watch --server

The standard port for the brunch server is 3333 (localhost:3333)

release build

brunch build --production

Documentation of global variables

The source code documentation of global variables is in a seperate file: application.js I created a documentation file with jsdoc it is in documentation/jsdoc or online on my server: https://pfahler.at/mtdb2/doc/

Structure

The source code of this project is in the subfolder app this folder is structured as follow:

Tutorials

How to add a new Chart

  1. Add a new dimension and group for a chart:

    This is done in the file dimensions.js:

      treeSourceDim = ndxLinks.dimension(function(d) {return +d.source});
  groupedTreeDim = removeEmptyBins(treeSourceDim.group().reduce(addTotal,removeTotal,initTotal),filterOutEmptyTotal);

    Look at the crossfilter documentation for details.

  2. Define where the chart should be:

    In the subfolder views the structure of the dashboard is defined. Add the name of the new chart to the desired position. For example: filters.jade

      .row#my-treeMaps
    include treeMaps.jade

    To add a new row to the dashboard which includes a new jade file which defines a new chart. For example a tree map:

      .col-sm-6
    strong Rechtsträger
    a(href="https://github.com/VALIDproject/mtdb2/blob/master/javascript:legalTreeMap.filterAll();updateAll();",style="display: none;").reset reset
    .clearfix
    #legal-tree-map

  3. Initialize the chart:

    It does not matter where you initialize it. For example in charts.js after the initialization of the dimensions. If it is not a DC chart, dont forget to define an update method and a resize method in application.js.

  4. Calls on update:

    If it is not a dc chart add the update call to the function updateAllNonDC in globalFunction.js. In every case add the rescale call to rescaleAll in globalFunction.js.