Exploring Investigative Journalism data with Vue.js and Google charts.

This project developed as part of the RSE team’s work providing software engineering services to the HASS faculty and specifically working with Dr Murray Dick in the School of Arts and Cultures.

The main aim of the project was to build a pilot piece of software that would allow the user to experience data in the field of Investigative Journalism in a different way than traditional text-based records. A framework was created that classified metadata in the following aspects:

• pragmatics, or sphere of impact (scaled 1–5, from public to private)
• methods used (scaled 1–5, from transparent to opaque)
• aesthetics, or language/visuals used (scaled 1–5, from impartial to sensational)
• audience size
• gatekeeping, concerned with whether or not an investigation won an award (1 or 0 )

Firstly, three main JavaScript chart libraries were evaluated for suitability; namely Google Charts, Knight Lab’s Timeline JS and D3.js.

Timeline JS creates an interactive slide show based on a timeline of events with embedded media and can be easily created with the use of an online Google spreadsheet. While it was straightforward to create an attractive multimedia application, integrating the metadata was less successful and this idea was abandoned relatively early in the project.

While D3.js is a powerful tool to create data visualisations, it is more complex than Google charts, so the early focus was shifted to making use of the latter library.

Google Charts has an extensive range of chart types at: https://developers.google.com/chart. The main charts chosen to display the data were bubble, bar and line charts. In the case of the bubble charts, the data was shown as discrete items on a timeline. The variables pragmatics, methods and aesthetics were given magenta, yellow and cyan colours respectively (from the CYMK colour set) and shown as separate graphs.

A blended version was also created using the 3 separate variable bubble charts layered over each other, utilising absolute CSS positioning and reduced opacity on each chart. The bubble size directly relates to the value for the audience size for each item.

In the case of the line charts, data was shown as ‘by year’ or ‘by month’ aggregates.

Technically, the first proof of concept charts were created as stand-alone HTML pages with embedded JavaScript and hard-coded data. As the project progressed, it became more important that these pages could be tied into a cohesive website and accept data from an external file source. Vue.js was chosen as the framework to handle the functionality of the site, but as Google chart code doesn’t translate easily into Vue components, a Vue plugin vue-google-charts was needed to act as a wrapper.

The website has a main home page (AppHome.vue) in which the charts exist within hidden div sections. These divs contain child components for each chart section, some also having further nested child components. Clicking on links within the page reveals the charts. JSON formatted data is imported into the AppHome component and passed into the child components as props using the v-bind shorthand :mydata.

<BubbleChartPragmatics :mydata="itemsByYear"></BubbleChartPragmatics>

Within the child components, props is defined as mydata[], which is assigned immediately to chartData in the main data declaration. The values in chartData are then used to create the rows for the chart.

All Google charts are imported as a generic GChart and the can be configured as the correct chart type through the GChart typesetting. e.g. type=”BubbleChart”. The chart options are set through the component data chartOptions settings. In the main methods body, a variable var data is declared as a new google.visualization.DataTable. The content for the bubble chart is built up in the form of a multi-dimensional array that is then passed to the data.addRows() function.

var data = new google.visualization.DataTable();

In some of the charts, the data was aggregated and this was done through calling a function aggregateData in a JavaScript class defined in a services directory. The class must be exported as in the example below.

export const dataService = {
  aggregateData
};

The data.service.js file is imported into components as and when needed.

import  { dataService } from "../services/data.service";

While most of the charts created were based upon Google Charts, over time other libraries were explored; namely Plotly.js and D3.js. The Plotly library was used to create a scatter chart, while D3 was used to create both a word tree/dendrogram chart and a link (force) node diagram. These charts were not able to be integrated into the Vue component structure, but existed in a separate section of the website, experimental charts.

The wordtree/dendrogram diagram featured the hierarchy of media publications through media type.

Word Tree Diagram / Dendrogram

While the link node diagram highlighted the relationship between journalists and their media institutions.

Both the D3 charts required differently formatted data sources. The wordtree data source was a CSV file, while a separately formatted JSON file consisting of defined links and nodes was needed for the link node chart to function correctly.

In the future, it’s hoped that this work will be taken further and act as a tool for others to explore their own data sets, in an innovative way.