Guide to the code

Trademapper is a pure client side web app - the browser downloads the HTML, CSS and javascript files and runs them all in the browser. If you load a CSV file into trademapper then it is processed, filtered, aggregated and displayed by javascript in the browser and the data never leaves the browser.

The Javascript App

Overview

The javascript is loaded using RequireJS - the index.html file loads require.js and tells it to use main.js which then requires/loads the other files.

The app heavily uses d3.js and those files are in trademapper/js/d3/

The core of trademapper is in the trademapper.*.js files - this is where we draw the map, import and process the CSV data, produce the form to filter the data, filter the data, and draw the filtered data on the map.

The trademapper.*.js files

trademapper.js

trademapper.js is the main file - it loads and configures the other trademapper files, including setting callbacks. It is set up by calling the init() function which takes the following arguments:

• mapId - the id of the HTML element where the map should be inserted
• fileFormElementId - the id of the HTML element where the file form should be inserted. (The file form is the form where you specify the file to use).
• filterFormElementId - the id of the HTML element where the filter form should be inserted. (The filter form allows you to filter the data once it is loaded, so only a subset of the data is displayed on the map).
• config - an object with various other config elements. An empty object is fine.

The config has default values which can be seen in the defaultConfig object in trademapper.js.

The init function also checks the URL parameters, as detailed in How to use Trademapper.

trademapper.arrows.js

trademapper.csv.js

trademapper.filterform.js

trademapper.mapper.js

trademapper.route.js

spiralTree.js

map js files

The following js files basically just contain map-related data as JSON

Data

See the page about using TradeMapper.

Other code

Pre Processing Map Data

Reusing the code

TradeMapper is designed so it can be included in other sites. With your own HTML file, CSS and a main.js file, you can pull in the rest of TradeMapper and have it embedded in your own site.

TODO: How to reuse

Terms of reuse

Code originally written for TradeMapper is licensed under the GPLv3.

To find the origin and licenses of code not originally written for trademapper, see the project COPYING file - this file also records which files are redistributed by trademapper and which are written for TradeMapper.