trademapper / trademapper-js Goto Github PK

Hi, how can I make TradeMapper start with a preselected CSV file?
Thanks 👍

Be nice to have the definitions as one json file per definition - maybe even pull in based on URL parameter.

Down the road you could save a definition after you've done the custom settings, and then reuse the saved definition from your local machine.

when map loads you can zoom but panning causes the map to vanish. It returns if you change filter options

It would be good if the circles in the legend stayed the same size when I zoomed in or out. Currently they get very small when I zoom right in (see image).

I want to be able to make use of existing libraries of infographics (e.g. little rhino graphics, little elephant graphics) to symbolise different points on the map. This will help me customize my map to species-specific trade.

Currently TradeMapper only displays the two-letter ISO country code as found in the .csv file. However, it would be much more user friendly if this mapped to full country names e.g. DE -> Germany, CH -> Switzerland.

Currently there are nice hover boxes which appear when I hover over an arrow. I also want to be able to hover my mouse over a country and see a pop up box appear containing detailed information on that specific country(country name, aggregate total of imports/exports/transit). It would be useful if the country also became highlighted at the same time.

Use the drop downs to help with analysing the data by surfacing more information - eg how much trade of each taxon is reported in the data (to avoid zero results and no change on adjustment of drop downs).

The play button doesn't active at the timeslider

The current basemap does not have very detailed country borders which is not very useful when zoomed in. It would be good to have a more fine-scale country outline map, maybe with the option of selecting one or the other depending on the type of map the user is making.

Currently there is no way to export the map as an image file (except screenshotting it). It would be great to have a button to click to export to jpeg/png etc, ideally with advanced options (Use type (web/report) resolution, format).

A user may want to be able to see all trade routes that go through a single country, regardless of whether that country is an exporter, importer or transit point. This helps them get a complete picture of the trade going through one country (e.g. what role does China play in the ivory trade?")

Currently you can only filter countries (locations) by their role. It would be great if there was the option replace the multiple location dropdowns with a single location dropdown.

It would be great to improve the look of both the plain and merged arrows so that the direction of trade clear.

Hi, is it possibly to color the country shapes? In this way, it would be possibly to display another variable on the map. Thanks :)

I noticed today that corsproxy.com seems to have gone away.
It'd be nice to be able to configure the cors proxy url as @paulmr suggests in #43, but in the meantime, at least for the aptivate hosted instance, maybe we should change the hard-coded url to use https://crossorigin.me/ ?

This means islands in the Pacific are not included on the map. This is fine when making static maps as the user can zoom out, but when using the time slider it reverts to the default zoom so the user cannot see which islands trade is going to. Links to Issue #47

It would be great to give the user the opportunity to customise their map by selecting certain advanced options. This might include;

• Whether to use plain arrows or merged arrows
• The maximum path width
• Change over time

Loading a new file takes a while. It would be good to make it faster, and also to give some indication that data is loading (so it doesn't just look like the page has frozen).

A likely way to improve performance is to remove the SVG from the DOM at the start of loading, do all the work to add the paths, gradients etc to the map, and then put it back in the DOM. This saves the browser starting to render and re-render after every change. It would also mean we then have space to put a loading GIF up instead, until the page has reloaded.

The getting started page contains blank text in my browser Iceweasel 38.3.

See screenshot:

Should we map all names to lib/ - or just those with extensions?

Should we use lib/ or vendor/ for 3rd party libs?

Should we get grunt to do r.js compile - so we don't need the minified libraries in the original

Similary we should integrate bootstrap CSS into grunt?

There are missing countries in the map
how can i display them?
Such as Bahrain, Singapore, and Hong kong

When you zoom in, you can grab the map with the mouse and drag to pan.
When you zoom in a lot, however, the map doesn't move as far as your mouse when you drag.
If you are zoomed in 2x, it appears the maps pans half the distance that the mouse moves, 3x is a third, etc

Ideally the map should move as far as the mouse does.

I tried running the QUnit tests (via the HTML test runner) and found the following broken ones:

1. tests/js/test-customcsv.js, line 262: this tests that if columnSpec.multiSelect and columnSpec.isUnit are both set in a filter spec, an error is returned by validateFilterSpecColumns() (trademapper.customcsv.js). However, the lines which would make this test pass (579-ish) are commented out, and the test fails.

   The fix for this would be to either reinstate the lines in trademapper.customcsv.js, or remove the test. The UI prevents a multiselect having units, but if the filter spec came from somewhere else (e.g. loaded from a file), this couldn't be guaranteed.

2. tests/js/test-mapper.js, line 19: the initialisation code only passes 4 arguments, rather than 5 (the final svg argument is missing). This causes an error as the mapper init function (trademapper/js/trademapper.mapper.js, line 27) calls setupZoom() on the svg member variable, which is set by this 5th argument.

   This can be fixed by passing newsvg as the 5th argument in test-mapper.js, i.e.

   mapper.init(zoomg, controlg, svgdefs, config, newsvg);
   

A suggestion from Duncan at FoE is to look at the Green Party meme generator, which does a nice job of helping you create images with text for use online:

http://greenpartymemebuilder.herokuapp.com/

A combo of that and TradeMapper might make for a neat TradeMapper image generator.

Use another method to include the guidance note in the tool, rather than an iframe.

I want to be able to create a map which displays trade arrows for year x then changes to display arrows for year y then changes to year z, so that I can see the change in trade over time.

A slider like this would be great http://www.wateraid.org/what-we-do/the-crisis/africa-wash-map#interactive-map but with the ability to press play and see it automatically scroll through time.

Users may want to be able to display data which comes in different schemas by being able to map the columns headings in their .csv to the relevant role (e.g. 'importer', 'exporter', volume of trade') when they import the data into TradeMapper. This would be really useful as data comes in so many different schemas. Currently TradeMapper works with three different schemas (CITES, ETIS, Seizures) with column headings which are not relevant to data coming from other sources e.g. Customs data.

Currently the Trademapper logo and header colours are clashing. This is due to a later change to the header and body colour which were originally dark gray. The teal is particularly clashing with the orange from the logo. It would be great to give a revision to the colours and branding in general to see if something more appropriate could replace it.

Map zoom works at the moment with the mouse whee.
The original design included +/- buttons in the top right corner to

• control the zoom
• communicate to new users that the map is zoomable
  

If I enable sprial-tree arrows via the url parameter http://trademapper.aptivate.org/?arrowtype=spiral-tree now that the arrows have full opacity I realise that the coloured circles/icons for exporter, importer, etc are hidden by the arrows.

The links at the bottom are inside an iframe (eurgh) and so they open in an iframe - there are two ways around this, a) create an intermediate forwarding url that breaks out of the iframe; b) find a better way to manage the content at the bottom of that page.

Currently the spiral tree arrow type code causes ugly elbows at intersections where the lines come out from exactly the same point. Ideally it would be nice to move the end points of the thinner line so that the edges of the fatter merged line are contiguous with the edges of the split.

Currently you can only select a single option in each filter - it would be nice to be able to select multiple options

Currently the design of the tool is great for a user analysing their data, but more work could be done on the design to give it the 'wow' factor.

Examples such as http://armsglobe.chromeexperiments.com/ and http://earth.nullschool.net/#current/wind/surface/level/orthographic=-4.15,7.02,360 seem to prioritise appearance over analytical functionally but but certainly have the wow factor. Can we get a mixture of both?

This would encourage users to share their visualisations much more, and potentially have a greater impact for awareness-raising, fundraising etc.

In a time series map, if there's an arrow that goes behind the map legend, it doesn't update through the time series. An example here: http://bit.ly/1GdT8QN

Check the arrow from China to Russia - it stays the same for each year, but should be increasing significantly.

Create a website for the TradeMapper project. @paulmr has some good ideas about what its content ought to be like.

Setting up a static site to host on github.io using something like Nikola or Jekyll and doing the branding/design could be a good hack-day project.

If you hover over a route, the hover box pops up showing details.
You can drag this about.
If you drag it to the edge of the map, the inner area is constrained, but the borders can be obscured by the edges.

We should fix this so the border of the hover box remains inside the map box.

Currently you cannot use trademapper in any other langauges. It will not translate via a machine translation tool like Google translate partly because the language strings are uploaded after the website is loaded from the CSV. Trademapper looks for the terms it needs to populate the map with data in the CSV file, but these terms must first be written in English.

So one problem is that if a CSV file is not in English then Trademapper does not recognise the descriptors in the data (for example 'family' so if it was in French 'famille' it would not upload the CSV)

Another problem is that the country codes will be replaced with country names which will also need to be translated.

Translation could take place at 3 different points:

1. The HTML of the website at the point when it is loaded
2. The CSV file before it is loaded
3. The end product of the data preloaded into Trademapper

One solution to this could be to make a bundle with alternate translations of terms. Using this:
http://requirejs.org/docs/api.html#i18n

Another possible other solution would be to have customisable colum mapping so that Trademapper could accept any terms from the CSV, but these would have to be defined when the CSV is uploaded.

When you hover over a route, the hover box pops up to show details.
Normally this is near where the mouse is, but when the map is zoomed in, it always appears at the bottom right of the map area. It should always appear near the mouse.

The legend should be positioned in the top left of the map area, and should remain there if I resize the map area or the browser window.

When I open the tool full screen the legend is its slightly low. But the size of the box is linked to my browser window size. If I shrink the window, the legend box shrinks!

With a full screen browser (1680x1050) if I shrink the map area, by draggin the bottom right corner, the legend moves up until its top is cut off by the map area like in the image below.

Have a URL parameter that causes the title box to be filled in - then when you share a link that title is pre-filled.

Relates to existing issue [Mapping country codes to verbose names #8]

Some countries do not display the full verbose name in the drop down filters (such as BB (Barbados), BH (Bahrain), HK (Hong Kong). It still draws the arrow on the map for these countries, but for some reason it does not give the full name. Some countries which no longer exist (e.g. East Germany) will not draw and that is fine.

Currently when I press the play button the map zooms to the default extent.On occasion users might only be interested in regional trade and zoom in to Asia, so it would be better if the map did not revert to default when they click play.

When loading a dataset of trade routes using latitude/longitude coordinates, the arrow head appears slightly off of the arrow line and at the incorrect angle.

@willowo tried to share a URL using a CSV she'd put in dropbox. The URL of the CSV looked like https://www.dropbox.com/s/<randomstring>/comptab_2014-11-05%2017-23_comma_separated.csv - the important part being the https at the start of the URL. I found the link above gave me a download page, but if you add ?dl=1 to the end of the URL you get the actual file.

However corsproxy doesn't really do https in a way that works for us. https://www.corsproxy.com/ is available, but the certificate is not valid, so you need to add the certificate to your browser. And then I could get another CSV working over https, but not from dropbox.

We could host our own corsproxy service I guess - there are some open source ones around - but that needs a little more work.

@paulmr - do you have any time to look at this. Maybe there's something I've missed.