Baltic Container Traffic

100%

Baltic Container Traffic

✓ Published0🌍 Public

Last edited Mar 29, 2015

Created on Mar 28, 2015

The visualization shows container traffic volumes across nine Baltic countries from 1997 to 2013, using a static logo-style SVG banner rather than an interactive chart. The page loads a CSV file containing yearly throughput figures per country and logs the parsed data to the browser console for verification. The rendering relies on hand-coded SVG polygons and text elements inside a fixed viewBox, while D3 v3’s `d3.csv` method handles the data ingestion. No dynamic scales, axes, or transitions are implemented; the example focuses on demonstrating basic data loading and static visual framing rather than encoding the dataset graphically.

AI-generated description

Similar vizzes

Loading thumbnail…

Baltic Container Traffic

The visualization displays 2013 container traffic volumes for Baltic Sea countries, sorted in descending order using horizontal bar lengths scaled proportionally to TEU values. Hovering over each bar reveals the country’s exact traffic figure via a title tooltip. The page uses D3 v3 to load CSV data, sort entries, and append SVG rectangles, while the static header and legend are hand-coded SVG polygons and text elements. Data comes from the provided `balticcontainers2.csv` file, with the bar width formula dividing each value by 100,000 and multiplying by 1.33 to fit the chart area.

HHermanniB

93% match

Loading thumbnail…

OECD data on Baltic Sea countries volume of maritime container transport in TEU from 1997 to 2013 (downloaded 21 March 2015)

This chart visualizes the annual volume of maritime container transport (in TEUs) for eight Baltic Sea countries from 1997 to 2013, using a line graph with each country’s series. It highlights the dominance of Germany and the rapid growth of Poland and Russia, while also showing the 2009 downturn. The visualization is built with D3.js, using `d3.forceSimulation` for layout and `d3.geoPath` to render map boundaries, with data loaded from a CSV file. The chart updates smoothly via `transition.attrTween` to animate changes over time.

HHermanniB

78% match

Loading thumbnail…

Barchart and table with D3.js

This example displays a horizontal bar chart of population counts for eight European countries, rendered as SVG rectangles inside a 960 by 500 pixel viewport. The data is loaded from a local `data.csv` file and parsed with the `csv` function from D3 v6. The chart’s x-axis scale is computed using `scaleLinear` with a domain from zero to the maximum population value, while the y-axis uses `scaleBand` to position each country’s bar. The React-based starter code integrates D3 selectors and attribute setters to map population values to bar widths and country names to vertical offsets.

Ssayli-lab

65% match

Loading thumbnail…

Loading CSV Data with D3

The visualization demonstrates how to load and inspect CSV data using D3, displaying a decorative SVG pattern of black bars above a text label. It uses `d3.csv` to asynchronously fetch the `Data_InfantMortalityRate.csv` file, which contains infant mortality rates for EU and EFTA countries from 1960 to 2012. The loaded data is parsed into an array of JSON objects and logged to the browser console, while the static SVG shapes serve as a visual placeholder.

CCatLeal

65% match

Loading thumbnail…

JS Bin

A horizontal bar chart displays population figures for ten countries, with bar lengths proportional to each value from `data.csv`. The SVG graphic maps country names to the y-axis and population counts to the x-axis using D3 v6's `scaleLinear` and `scaleBand`. The React-based code loads data via `d3.csv`, multiplies population values by 1000, and appends rectangles to the SVG with the `enter` selection.

KKanish Malviya

64% match

Loading thumbnail…

CSV Data Pt 6 - Graphing

This example presents a horizontal bar chart ranking the ten most populous countries, with bars extending to represent each nation’s 2019 population. The visualization loads CSV data via D3’s `csv` function, processes it in a custom `useData` hook, and renders the chart with React. The code uses `scaleBand` for the categorical country axis, `scaleLinear` for the numeric population axis, and custom React components for the axes and rectangular marks. An SVG rendering approach with D3’s `format` API converts large numbers into abbreviated labels like “1.2B”.

Jjulesgentry

64% match

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the ten most populous countries based on 2019 data, rendered as a horizontal bar chart with steel-blue rectangles. The visualization uses React’s `useState` and `useEffect` hooks to load and filter CSV data via `d3.csv`, then applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis. Tick marks and labels are generated manually with SVG elements, while axes are drawn using the D3 `scale` API without helper functions. The chart updates reactively as data loads, with a loading message displayed initially.

PPujitha14challagulla

64% match

Loading thumbnail…

Project

This interactive dashboard visualizes Taiwanese outbound traveler flows by country and month, using animated bar charts to show passenger volumes for specific airports or seaports. Users filter by year, transport mode (airplane or ship), and individual countries across continents, with a month slider and sorting options for distance or quantity. Built with React and D3.js, the project renders SVG bar charts that update dynamically, pulling data from a CSV file containing annual and monthly travel statistics for destinations across Asia, the Americas, Europe, and Oceania. The interface also provides a slider to scrub through months and a dropdown to sort results, enabling comparative analysis of travel patterns over time.

TTimmyLu

64% match