Animated Paths in a Flow Map
This flow map shows animated trade routes originating from Victoria, Canada, with line darkness representing trade volume. Users can click buttons to switch between three commodities (coal, lumber, and stone), triggering a smooth transition where existing routes animate out and new routes draw in. The animation uses stroke-dashoffset transitions to simulate paths flowing from the source port to their destinations. Point markers and labels for destination ports appear sequentially as each route is drawn. Routes are curved using d3.curveBasis and rendered as SVG paths over a land-only base map with a Kavrayskiy7 projection. The map is layered with a green landmass, blue ocean background, a highlighted source port in orange, and destination ports in purple. The flow map uses stroke opacity to encode the volume of trade for each route, normalized against the maximum. Interactive buttons allow users to switch between commodities (coal, lumber, stone). The visualization relies on a custom ports object (not shown) for port coordinates.Here is a concise description for the visualization gallery:
---
**Animated Paths in a Flow Map** by Andrew Reid
This animated flow map visualizes trade routes from Victoria, Canada, to ports around the world, with line darkness representing the volume of trade for a selected commodity. Users can switch between coal, lumber, and stone datasets via circular buttons.
The map uses a Kavrayskiy VII projection to display global geography. When a commodity is selected, routes animate in from the source port at Victoria, drawing themselves along curved paths to their destinations. Each route's stroke opacity encodes the volume of trade relative to the maximum, with heavier flows appearing darker. As routes animate, destination ports and labels fade in progressively.
Built with D3 v4, the visualization uses SVG paths for animated routes, circles for ports, and includes interactive buttons to switch between commodity datasets. The animation creates a sense of flow and movement across the map.
- **Visualization Type**: Flow Map
- **Data**: Trade volumes from Victoria, Canada to various global ports for lumber, coal, and stone
- **Visual Channels**: Path stroke width and opacity encode trade volume; animated stroke-dashoffset creates flowing effect; color distinguishes land, ocean, source, and destination ports
- **Interactions**: Click commodity buttons to switch between different commodity datasets
- **Animation**: Routes are drawn incrementally using stroke-dashoffset transitions, with destination ports appearing as paths animate in.
## Data Provenance
* Source: [GitHub Gist](https://gist.github.com/andrewharvey/31d4a8ffb397ac0e5c06) by [andrew-reid](https://gist.github.com/andrew-reid)
* D3 v4
## Instructions
To run this example, you'll need to place `world.json` in the same directory as `index.html` and serve the files over HTTP (some browsers restrict loading local JSON). The map shows trade routes from Victoria, BC to various world ports for three commodities (coal, lumber, stone) with animated paths. The animation is achieved by transitioning stroke-dashoffset to simulate a "drawing" effect along each route.
## Files
- `index.html` - main application
- `coal.csv` - coal shipping data
- `lumber.csv` - lumber shipping data
## Data
### coal.csv
- dept: Victoria
- via: via points offshore of Victoria
- arr: arrival port
- vol: volume
### lumber.csv
- dept: Victoria
- via: via points offshore of Victoria
- arr: arrival port
- vol: volume
### stone.csv
There is no stone.csv in this gist. As a result the `replaceCommodity` function will produce an error if a user selects "stone".
### world.json
Absent from this gist, expected in the directory. I didn't make this, I think it is a standard "world-110m" or "world-50m" TopoJSON file. You might be able to get it from this gist: world-110m (https://gist.github.com/jasondavies/4183702)
## Known bug
When the routes are replaced, the start/end points and port labels are not cleared if they are on the same route. And the old start point remains if you change from one commodity to another (though it isn't visible once the routes re-animate).
## Redundant code
* (dept, via) never change, so can derive from arr
* functions can be refactored
## Explanations
The via columns reference offshore "ports" that provide a midpoint for the cubic bezier curves.
The vol column is in thousands of tons of commodity shipped in the year 1876. This data from a real ledger of shipping records from Victoria BC. This viz is inspired by a "Huffington Post" graphic.
This is made for D3 v4 in 2016
The files are excerpted.
Given this source code, what concise description could be written that
describes this data visualization? Try to address: What is shown? How?
Are there data-driven or interactive elements? What might be notable or interesting about it?
Try to write in complete sentences, but keep it under 70 words. Do not use semicolons. Write in
plain HTML paragraphs. Avoid meaningless adjectives. Do not start with "This is".
Animated flow map shows trade routes radiating from Victoria, Canada to ports worldwide. Lines animate along curved paths, with stroke darkness proportional to trade volume and opacity scaled by cargo amount. Three selectable commodities — lumber, coal, and stone — are available via round buttons. Clicking a button transitions the map to display that commodity's routes and destination ports. The map uses a Kavrayskiy VII projection and D3 v4 with SVG.
The source of the data: coal.csv, lumber.csv, stone.csv.An animated flow map traces trade routes from Victoria, Canada, to ports across the Pacific. Curved lines are drawn sequentially along each route, with stroke opacity scaled to the volume of goods shipped. Three commodity buttons—coal, lumber, and stone—let viewers switch datasets; clicking one retires the old routes and animates in the new set. The map uses a Kavrayskiy VII projection over a green landmass on blue water, with the source port highlighted in orange and destination ports appearing as purple dots as their routes draw.
Data for each commodity is stored in a separate CSV file (e.g., coal.csv) with fields for the origin port, a via/intermediate point, destination port, and volume. Port coordinates are looked up from a dictionary of port locations, while the `via` values reference intermediate offshore points used to create the curved routes.
**Technically:** D3 v4 with SVG; the routes are drawn using `d3.line` with a basis curve, projected with the Kavrayskiy7 projection from d3-geo-projection. Animation is achieved via stroke-dasharray and stroke-dashoffset transitions, making each path draw itself. The port markers fade in when each route is drawn. Users can click buttons to switch between commodities (coal, lumber, stone), triggering animated removal of old routes and drawing of new ones. Line opacity encodes trade volume. Style choices include a green landmass, blue ocean, purple destination ports, and an orange source port.
The map data is loaded from world.json and port coordinates are defined in a ports object within the script (not shown).
Which of the following is the most accurate description of this example?
A) This animated flow map shows commodity flows (coal, lumber, stone) from Vancouver, Canada to ports in the Pacific Rim. The volume of the flow is represented by the stroke width. In the animation, paths are drawn progressively, then removed and replaced when selecting another commodity.
B) The map depicts an animated flow map of trade routes of three commodities from a single origin, Victoria, to ports in the Americas and Asia. The map renders with the D3.js library, using an SVG representation. Line darkness corresponds to trade volume. Users can click a commodity button to trigger a transition that draws new routes as the old ones are removed.
C) This is a flow map of trade from Victoria, Canada, with buttons for coal, lumber and stone. D3 draws SVG paths over a graticule, with dark lines for higher volume and lighter for lower. The map supports pan and zoom.
D) Animated Flow Map displays animated trade flows between global ports. It allows a user to click on a map of the world to change the selected commodity (coal, lumber, or stone). The view is implemented with d3 v4, using a Krovskiy (or Kavrayskiy) projection. Lines representing routes animate in. Data: from real 1860-1861 trade statistics.
Which description is best?
A) A flow map showing the paths of commodity exports from Victoria, Canada to global ports. The animation reveals the routes and draws the volume of trade as line thickness and opacity. Colored buttons allow the user to switch between three commodities (coal, lumber, and stone).
B) A map showing animated routes from Victoria, Canada to ports in North America, South America, Asia and Australia. Colors represent volume of trade. The code is based on the example by andrew-reid and makes use of the d3.js library v4 and the geoKavrayskiy7 projection, rendering using SVG. The code uses d3.csv to load commodity data and d3.transition to animate the paths.
C) This is an interactive visualization of a flow map that uses animation to convey the movement of goods from Victoria to global ports, with route darkness representing volume, and buttons to switch between three commodities. The world map is rendered with the Kavrayskiy 7 projection, and routes are displayed as animated SVG paths.
D) This visualization is a flow map showing trade routes from Victoria to other ports. It uses d3.v4, svg, and animation. Users can click on commodity labels to swap the displayed routes. Lines are drawn with d3.line, dashed lines move to create animation. Thicker lines and darker lines represent more volume.
E) None of the above.
Choose one option. Reply with the letter only (A, B, C, D, or E). Do not include any other text.
Your response must use just the single desired letter. No surrounding quotes or punctuation. No formatting. No whitespace.D