Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Menu

✓ Published0🌍 Public
CCurran Kelleher
Last edited Oct 9, 2018
Created on Oct 8, 2018

This example visualizes worldwide export data to the US and China, plotting each country as a circular point on a scatter plot with color-coded categories. The visualization includes a dropdown menu with options A, B, and C, though it does not currently affect the display. The code uses d3.csv to load the dataset, d3.scaleLinear for positioning, d3.scaleOrdinal with schemeCategory10 for colors, and renders axes and legends using d3.axisLeft, d3.axisBottom, and SVG elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export values to the United States and China, with each circle colored by its indicator category. A legend identifies the categories. The visualization uses d3.csv to load the dataset and d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with schemeCategory10 for encoding. The SVG rendering includes axis labels, a title, and grid lines via tickSize, with legends positioned using SVG groups and rectangles.

Vveagy
92% match
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export values to the United States and China from 2000–2016, with each circle’s color encoding the export indicator category. A legend identifies the categories, and axis labels clarify the compared countries. Built with d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, the SVG renders points with a categorical color scheme. Data is loaded from a hosted CSV file, and circles use fixed opacity for overlapping points.

Vveagy
92% match
Loading thumbnail…

Scatter Plot with Menu

This example displays a scatter plot of worldwide export values, comparing exports from the United States and Mexico, with each circle colored according to its indicator category and a legend identifying those categories. A dropdown menu, built with a custom `dropDownMenu` function, presents options A, B, and C, though no interaction logic is bound to it in the shown code. The visualization uses D3 v5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` for coloring, rendering SVG circles with semi-transparent red fills as defined in the stylesheet. Data is loaded as CSV from a VizHub-hosted dataset.

Vveagy
91% match
Loading thumbnail…

Scatter Plot with Menu

A scatter plot displays global export values, with the United States on the x-axis and Japan on the y-axis, colored by indicator type. A dropdown menu offers options A, B, and C, though its selection does not alter the visualization. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to render SVG circles from CSV data. The chart includes gridlines, a legend, and axis labels, with data parsed numerically for seven countries.

Vveagy
91% match
Loading thumbnail…

Scatter Plot with Menu

A scatter plot displays global export values, with the United States on the x-axis and Japan on the y-axis, colored by indicator type. A dropdown menu offers options A, B, and C, though its selection does not alter the visualization. The D3 v5 code uses `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to render SVG circles from CSV data. The chart includes gridlines, a legend, and axis labels, with data parsed numerically for seven countries.

Vveagy
91% match
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export data from 2000 to 2016, with each circle representing a country-year observation. Users select the x and y axes from dropdown menus to compare different economic indicators across countries, while a color legend toggles which country category is highlighted in the plot, dimming non-selected points. Built with D3 v5, the visualization uses an animated transition to grow circles over 2 seconds, scales axes with `d3-scaleLinear`, and renders SVG elements. A hover tooltip displays the reporter description for each point, while the legend and dropdowns filter and control the displayed data.

Vveagy
88% match
Loading thumbnail…

Imports with Menus

Two dropdown menus let the viewer select which countries to compare on the x- and y-axes of a scatter plot, while a color legend filters the points by export category. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.select to update the menus and plot dynamically. Data covers exports to China and the United States from 2000 to 2016, sourced from the World Trade Organization. Circles animate into position with transitions, and filtering fades non-selected points.

Vveagy
87% match
Loading thumbnail…

Scatter Plot with Menus

This scatter plot displays population figures for ten countries using a bar-like layout with circular markers. The visualization includes interactive dropdown menus (labeled A, B, C) and employs D3 v6 APIs such as `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG chart. Data is loaded from a CSV file via `d3.csv`, with population values scaled by 1000. Custom gradient fills are applied to circles and text via SVG `linearGradient` definitions.

SSharvariPhadke
85% match