Mapping Changes in Film History

Mapping Changes in Film History

By location setting
By Medium

Which place was recorded, with what medium?

Live Demo: https://jotnajoa.github.io/filmarchiveproject/index.html
(Mobile device is not supported)

Project Description

Project Goal

Tracing the Major Geographic Setting of Visual Contents Over Time
Since the emergence of filming technology, the geographic settings of visual contents has been shifting. The project seeks to retrace which regions had been the focal point of global filming (visual content) industry over time.
Understanding Changes of Medium
As technology advances, the medium chosen for filming (visual recording) changes accordingly. The project determines what medium was the most dominant in different time period and how many film archives were made using the medium.

Data

The Smithsonian Open Access API
Open Access API from the Smithsonian Museum provides in depth data. Human History Film Archive is one of the digital archives that allows public to access details.

Analysis Approach

Counting Number of visual contents produced by geographical setting
In order to find out where was the main location setting that visual contents are about, the number of contents in each region is analyzed by era.

Comparing number of contents by medium
the number of visual content produced by each medium were compared.

Design Components

Visual Language

Inspired by the flow of filming history over time, free flowing non-rigid visual language is chosen for the overall design concept for the project. User interface is designed to provide easy-flowing sequence according to time flows.

Elements on map

Since the information is based on geographic setting of visual contents, the visualizations adapts an approaching plotting the information on the map. It helps users to associate the information with its regions seemlessly.

Narratives

The project shows location changes of visual contents as time flows and medium changes by time. Instead of taking complex interaction, this project uses one-directional information flow with minimum user interaction.

Visualization Approach

Amorphism

In order to create flow of information and convey the idea of "transformation". The whole is composed of series of elements and it is affected by the collective changes the elements.

Attention to Motion

Elements which have critical information is visualized with motion to draw attention. Dynamic elements delivers convey contents that user need to focus on.

Data Processing

Data Collection

The complete data set is comprised of two elements, which are film’s information and geo-location information. The two information comes from the Smithsonian archive and TomTom Geocode, respectively.

Fixing Invalid Data

The API response includes invalid or inaccurate categorizations. To fix the errors, possible scenarios were set and re-processed the data. If a data set has ‘null’ return for either medium type or location information, the data set was removed.

Methodology

Geo-coding

Based on the location data accompanied with each archival material,
reverse geo-coding was done using “TOMTOM” API.

Storing the location data from Smithsonian API response
Sending looped request to “TOMTOM” API to get coordinates

Tools: Node.js + Axios

Visualization of Map

SVG layering was made using leaflet+d3. The number of data node to render is
relatively small size that DOM can handle it through SVG.

Translate coordinates to SVG path
Render the path data on the additional SVG layer on the map

Tools: d3.js + Leaflet

Custom Shape

For the visualization having unique shapes, SVG path manipulation was used with gsap timeline control.

Set the path for basic shape
The height of the shape is set as variables proportional to value

Tools: HTML SVG + gsap

Data Visualizations

Filming history composed of series of film works