Log Scale Example

100%

Log Scale Example

✓ Published2🌍 Public

Last edited Sep 24, 2019

Created on Sep 20, 2019

This example visualizes worldwide export data from the World Trade Organization for seven countries from 2000 to 2016. The scatter plot uses dropdown menus to select which countries to compare on the x and y axes, with a log scale on both. Hovering over a point reveals a tooltip with detailed information, while clicking a legend entry highlights that category. Color-coded by region, the visualization is built with D3 v5, using SVG rendering, animated transitions via `transition().duration()`, and custom implementations for the dropdown menu and color legend.

AI-generated description

Remark: Hover on the points, Click on the legent

This data is about the exports to China, United States, Brazil, India, Japan, Mexico and Russian Federation between 2000 and 2016, reporters are Africa, Asia excluding Hong Kong re-exports, Australia and New Zealand, Commonwealth of Independent States (CIS), including associate and former member States, Europe, European Union (28), Four East Asian traders, Middle East, North America, South and Central America and the Caribbean, Brazil, Japan, Mexico, Russian Federation.

All data comes from World Trade Organization: Network of world merchandise trade.

MIT Licensed

Similar vizzes

Loading thumbnail…

Log Scale Example

This example visualizes worldwide merchandise trade exports between 2000 and 2016, plotting two selectable country markets against each other on logarithmic scales. Users can hover over points for detailed tooltips and click legend items to filter and highlight specific exporter groups. The visualization uses D3 v5 with d3.scaleLog for axes, d3.scaleOrdinal for color encoding, and animated circle transitions via transition.attr. Data comes from the World Trade Organization, rendered as an SVG with interactive dropdown menus for axis selection.

CCurran Kelleher

92% match

Loading thumbnail…

Imports from 2000 to 2016

This interactive scatterplot visualizes worldwide export flows to seven major economies from 2000 to 2016, using data from the World Trade Organization. Users select which countries to compare via dropdown menus, while a color legend filters data by reporter region. The visualization uses d3.v5 with log scales for both axes, SVG circles scaled by year, and animated transitions. Hovering reveals country-specific details via a tooltip, with the color legend and scatter plot implemented through modular JavaScript functions.

Vveagy

84% match

Loading thumbnail…

Imports with Menus

This interactive scatterplot visualizes worldwide export data between 2000 and 2016, sourced from the World Trade Organization. Users select different countries from dropdown menus to compare their export values against one another, with each dot representing a country and colored by its economic indicator. Built with D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for categorical coloring, and animated `transition()` calls to move circles smoothly when the selected dimensions change. A color legend with clickable entries filters the displayed points.

Vveagy

83% match

Loading thumbnail…

Imports with Menus

This interactive scatter plot visualizes worldwide export data from 2000 to 2016, sourced from the World Trade Organization, comparing trade values between various countries. Two dropdown menus let users select which countries to plot on the x- and y-axes, while a color-coded legend filters the data by product indicator. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with circles animated via `transition().duration()`. A `scaleOrdinal` with `schemeCategory10` maps indicators to colors, and click events on the legend toggle data highlighting.

Vveagy

83% match

Loading thumbnail…

Imports with Menus

This interactive scatterplot visualizes worldwide export data from 2000 to 2016, sourced from the World Trade Organization. Users can select which country’s export values appear on the x- and y-axes via two drop-down menus, and clicking a country in the color legend highlights only those points. The plot uses d3.scaleLinear for axes and d3.scaleOrdinal for coloring, with transitions animating circle positions over two seconds. SVG rendering and the dropDownMenu and colorLegend modules drive the interactivity.

Vveagy

83% match

Loading thumbnail…

Imports with Menus

This interactive scatter plot displays worldwide export values to major trading partners between 2000 and 2016, using data from the World Trade Organization. Two dropdown menus let viewers select which countries to compare on the x- and y-axes, while a color legend allows filtering by commodity category. Circles animate into position with a staggered transition delay. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for coloring, and custom d3 modules for the dropdown menu, color legend, and scatter plot rendering in SVG.

Vveagy

82% match

Loading thumbnail…

Imports from 2000 to 2016

This interactive scatterplot maps worldwide export values between 2000 and 2016, comparing pairs of importing countries selected from drop-down menus. Each dot represents a reporting region, colored by exporter group using `d3.scaleOrdinal` with `schemeCategory10`, and clicking the color legend highlights or filters points. The visualization uses d3.v5 with SVG rendering and animated transitions, scaling axes with `scaleLinear` and `scaleLog` while formatting ticks via `d3.format`. Data comes from the World Trade Organization’s network of world merchandise trade statistics.

Vveagy

82% match

Loading thumbnail…

Imports from 2000 to 2016

An interactive scatterplot explores worldwide export flows to seven major economies from 2000 to 2016, with each point colored by reporting region. Two dropdown menus allow selection of x- and y-axis variables, while clicking a legend entry highlights that region while dimming others. Built with d3.v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, and `transition().delay()` to animate points into place on load. Data on reporter and partner trade comes from the World Trade Organization.

Vveagy

81% match