Structure of Visualization

Narrative Visualization

Messaging

After analyzing dataset for crimes reported from 2015 - 2018 in Boston, it can be summarized:

Visual Structure

This narrative visualization follows a "martini glass" structure consisting of four author-driven scenes followed by the last scene in which the reader can explore the dataset.

This narrative visualization uses a hybrid structure and consists of scenes, annotations, parameters, and triggers.

Scenes

Four author-driven scenes follow an identical layout. The intention is to draw the reader's attention to the chart and maintain through the transition between scenes. The position of elements is maintained across all scenes consistent to keep the reader oriented on the chart. Transitions are used between scenes to make the connection between scenes.

Scenes can be navigated with page buttons at the top of the display which shows the current scene number highlighted and allows the reader to move to a different scene in the story:

Scenes are organized in a way that reader can make sense out of it. Showing the first scene as a graph with category of crimes and its frequency. This information sets up the stage about the story. Then comes, crimes happening over the months to show how likely a crime can happen over the year. Then, frequency of crime over days of the week and over hours of a day. In the last scene, the story of frequency over hours of a day continues but it allows users to filter data based on type of a crime to visualize the data better and the reader can sort the data to see when a crime is most likely to occur in a day.

Annotations

Annotations are added with the data point in the story to explain the significance of the data. It helps the reader to explain key points from the chart.

Annotations for each scene are added at the start of the scene and removed during transitions so that the reader is drawn to the new annotation and data point in the story.

Annotations use the same template - light gray rectangle with black text and a line directed near to data point on the chart.

Parameters

The common parameters for all scenes are as follows: Parameters specific to the author-driven scenes (1 - 4) are: Parameters specific to the reader-drive scene (5th) are:

The scene number drives many of the other parameters such as charts, annotations and explanation text with every chart.

The reader uses scene numbers to navigate between different scenes and transitions are implemented throughout the visualization.

For the reader-driven scene, there are two parameters: selection and checkbox. The visualization must track what is selected and whether the checkbox is checked or not to show appropriate data to the reader.

Triggers

The first trigger is the at the completion of the HTML page load, which invokes the functions to initialize the visualization and introduction scene.

This is followed by preparing data for different charts from the CSV file.

The user navigates through the presentation by clicking scene numbers shown in the top left corner.

On the reader-driven scene, selecting an offense type triggers chart to be updated with relevant data and selection of sorted data checkbox, sorts the data in descending order.

Acknowledgments

​​