jstet / basel-viz

Visualizing global trade flows of hazardous waste reported under the Basel Convention

Basel Viz

This repo is the result of a group project undertaken during a seminar held at the University of Konstanz by the Data Analysis and Visualization group. Our goal was to visualize global trade flows of hazardous waste that are reported yearly by members of the Basel Convention. Find a live version here.

Data Sources

Find the code for data retrieval(scraping) and processing in this repo.

Development

The components contain their own READMEs with additional instructions regarding development

basel-viz's Issues

Export list of locations that are importing but not exporting to Map (dynamically)

Add level: entwicklungsland

Chord diaram

list with donuts that are never origin but destination sometimes

to avoid lines to nothing

Add Population and amount metric info to sidebar

SQL query for subset of countries selected

Fix zoom für donuts

Why does time range selection work on jonas pc but not on xenias

Add cluster hierarchy selector in Frontend and connect it to the backend

let api return json for point/donut in specified format

[
            {"country_code":"ad",
                "un_classes": [
                    { label: "UN1", value: 20 },
                    { label: "UN2", value: 5 },
                    { label: "UN3", value: 12 },
                    { label: "UN4", value: 0 },
                    { label: "UN5", value: 7 },
                    { label: "UN6", value: 9 },
                ]},
            {"country_code":"fr",
                "un_classes": [
                    { label: "UN1", value: 20 },
                    { label: "UN2", value: 30 },
                    { label: "UN3", value: 0},
                    { label: "UN4", value: 0},
                    { label: "UN5", value: 45 },
                    { label: "UN6", value: 0}
                ]},
            {"country_code":"br",
                "un_classes": [
                    { label: "UN1", value: 20 },
                    { label: "UN2", value: 16 },
                    { label: "UN3", value: 0},
                    { label: "UN4", value: 70 },
                    { label: "UN5", value: 12 },
                    { label: "UN6", value: 4 }
                ]},
            {"country_code":"de",
                "un_classes": [
                    { label: "UN1", value: 120 },
                    { label: "UN2", value: 4 },
                    { label: "UN3", value: 0},
                    { label: "UN4", value: 70 },
                    { label: "UN5", value: 12 },
                    { label: "UN6", value: 4 }
                ]}
        ]

• so viele label wie UN Classes, auch, wenn die values 0 sind (hier nur mit 6 exemplarisch, irl haben wir mehr classes)

remove flow with amount 0

Reactiveness of filter

API Parameter to normalize amounts by population

Fix tajikistan, south sudan

Selecting it breaks app

Donuts auf Linien mit Mouseover

Change Font

Write texts

• Title and teaser always visible in upper left corner
• Modal content with description of how we processed the data etc.

Make lines go to the left and right locations, not only central

Find appropriate relation to describe the country exports. Logarithmic? which base? Lognormal?

Legend: Colour Category UN Label

let api return json for flows in specified form

[
            {
                "origin_code": "ad",
                "dest_code": "de",
                "un_classes": [
                    { label: "UN1", value: 10 },
                    { label: "UN2", value: 22 },
                    { label: "UN3", value: 30 },
                    { label: "UN4", value: 0},
                    { label: "UN5", value: 50 },
                    { label: "UN6", value: 0},
                ]
            },
            {
                "origin_code": "fr",
                "dest_code": "de",
                "un_classes": [
                    { label: "UN1", value: 10 },
                    { label: "UN2", value: 20 },
                    { label: "UN3", value: 3 },
                    { label: "UN4", value: 25 },
                    { label: "UN5", value: 0},
                    { label: "UN5", value: 50 },
                ]
            },
            {
                "origin_code": "br",
                "dest_code": "fr",
                "un_classes": [
                    { label: "UN1", value: 10 },
                    { label: "UN2", value: 0},
                    { label: "UN3", value: 30 },
                    { label: "UN4", value: 0},
                    { label: "UN5", value: 12},
                    { label: "UN6", value: 50 },
                ]
            },
        ]

• include all labels even when amount is zero
• aggregate for selected years

Togo hat kein Donut

Deal with the case that selected country doesnt export anything

• Draw empty donut by default in frontend?
• Include in no_exports query?

Sort dropdown alphabetically

add more lines for multiple / single country selection

Highlight countries in some way

Its not that obvious to whoch country a donut belongs so maybe we should highlight the borders of a country or color the country based on smth

Overplotting: Aggregationen der Countries zu größeren Verbänden?

animate d3 zoom

https://stackoverflow.com/questions/21216347/achieving-animated-zoom-with-d3-and-leaflet

Connect time range slider to url parameter

when url changes, let slider and dropdown change as well

optimize for smaller and bigger screens (laptop/powerwall)

Disregard mobile

Donuts an API anbinden (mit default aller Daten)

Include imports

Time Range in Frontend and backend

Adjust region and subregion centroids

• use combined bounding box of countries
• use centroids but weight by country size

make links go halfway

Visualisierung umdrehen auf Knopfdruck: Export nah / fern dazeigen

Cluster names for hover over donut

countries have names, clusters don't

Add checkboxes to dropdown selection

Soll der Radius der Donuts etwas encodieren? Amount maybe

Also return real amount when amoutn is normalized

Line: width = amount color = largest class

Visualize locations that are importing but not exporting as empty circles

Some countries point to wrong location

E.g. Norway -> North Korea, Suriname to Serbia

Optimize SQL query

somehow one query instead of two to return bi and unidirectional flows

Include all Countries in Dropdown

Sum up flows by amount

• Treat multiple trues as new category: "multiple"
• treat all null as unknown

API parameter to allow for filtering by time range

Origin and Destination are the same somtimes: Preprocessing error?

One truth for data (API) to avoid inconsistencies

Make dropdown cluster / country selection depend on cluster / hierarchy selected