Scatter Plot with Menu

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.

97% match

Scatter Plot with Menu

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.

CCurran Kelleher

92% match

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.

Scatter Plot with Menu

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.

Imports with Menus

This interactive scatterplot visualizes worldwide export data from 2000 to 2016, comparing trade values between China, the United States, and other nations. Users select which two variables to plot on the x- and y-axes via dropdown menus, with each point colored by commodity type. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, with animated transitions for the circles. Data originates from the World Trade Organization’s network of merchandise trade statistics. SVG rendering and dropDownMenu and colorLegend custom modules handle the interface.

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.

Try one

A scatterplot compares export values to the United States versus China using a CSV dataset of worldwide exports from 2000–2016. Each circle’s color encodes an indicator description via d3.scaleOrdinal with schemeCategory10, with a legend and linear axes formatted using d3.format. The visualization is rendered as an SVG using d3.select, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, with a title and labeled axes.