dropdown test

100%

✓ Published2🌍 Public

Last edited May 14, 2024

Created on May 9, 2024

Forked from Extinct Languages ScatterMap

This interactive visualization combines a world map with a scatter plot to explore language endangerment and speaker numbers. A dropdown menu filters the data by country or global view. Map points and scatter plot marks are rendered as SVG circles, colored by endangerment level using a sequential ordinal scale. The scatter plot uses a logarithmic y-axis for speaker counts and supports brushing to highlight matches across both views. Built with D3 v6 and React, it uses `d3.geoAugust` for map projection and `d3.scaleBand`/`d3.scaleLog` for axes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of dropdown test

This visualization combines a world map and a scatter plot to explore the geographic distribution and speaker counts of endangered languages. It features a dropdown menu to filter data by country, using d3.geoMercator and d3.geoPath to render the map, while the scatter plot uses a log scale and d3.brush for interactive selection. The code relies on d3.scaleBand, d3.scaleLog, and d3.scaleOrdinal to encode endangerment categories and speaker numbers, with data processed from imported files.

KKiernan Nesslar

92% match

Loading thumbnail…

Fork of dropdown test

This interactive visualization combines a geographic map and a scatter plot to explore endangered languages worldwide. A dropdown menu filters data by country, updating both the map points and the plot simultaneously. The map uses an August projection via `d3.geoAugust()` and `d3.geoPath()`, while the plot displays speaker counts on a log scale against endangerment categories. Brushing on the scatter plot highlights corresponding map marks. Built with React and D3 v6, it renders SVG elements and employs `d3.scaleOrdinal` for color encoding.

Bbepnye@gmail.com

92% match

Loading thumbnail…

menu scatter plot chart

This visualization demonstrates a dropdown menu that allows users to switch between different options, displaying the selected feature in the console. Built with React and D3, the interface includes a world map rendered using geoNaturalEarth1 projection and geoPath, with land masses and graticule lines shown. The project uses useState for managing the selected dropdown value and imports from d3-geo-projection for the map projection. The dropdown component is reusable, accepting options and an onSelectedValueChange callback. The map data comes from world-atlas TopoJSON, processed with topojson feature and mesh functions.

GGuitong Li

80% match

Loading thumbnail…

Testing React Dropdown

This interactive scatter plot displays the Iris dataset, allowing users to select which floral measurements appear on the X and Y axes via dropdown menus. The visualization uses D3 scales for positioning and color encoding, rendered as SVG circles through React components. A color legend highlights individual species on hover by fading other data points, filtering the underlying display. The example demonstrates combining a React interface with D3's `scaleLinear` and `scaleOrdinal` for interactive exploration.

AAndrea Picciau

77% match

Loading thumbnail…

test changes Gapminder Data in React and D3 - interactive regions

Gapminder country data from 1950 to 2015 is plotted as an interactive scatterplot, with a year slider when time is on the x-axis, and dropdowns to select different economic and demographic attributes. A world map background, rendered with `d3.geoNaturalEarth1` and `d3.geoPath`, colors countries by World Bank region, with click-to-select and hover highlighting that filters the plotted circles. Built with React and D3 v5, using `scaleLinear`, `scaleOrdinal`, and `scaleSqrt` for scales, and SVG elements for axes, legend, and marks.

Llakalia@wpi.edu

77% match

Loading thumbnail…

Extinct Languages ScatterMap

Two linked D3.js v6 visualizations explore the global distribution and endangerment status of languages. A world map uses `d3.geoPath` with an equal-earth projection to plot each language as a point, colored by its degree of endangerment. A connected scatterplot uses a log scale for speaker counts, with a `d3.brush` selection that highlights matching language points on both charts simultaneously. The data comes from a CSV of language statistics joined with a GeoJSON world map.

KKiernan Nesslar

77% match

Loading thumbnail…

Gapminder Data in React and D3 - colored world map rebuilt with interactions

This interactive Gapminder visualization combines a world map with an animated scatterplot to explore country-level data from 1950 onward. Users select a y-axis attribute (income, population, life expectancy, or fertility) via a dropdown, while the map colors countries by World Bank region using a d3.scaleOrdinal. Hovering over the color legend filters both the map and scatterplot to highlight matching countries. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleLinear for axes, and React state to manage selections, with data loaded via d3.csv and topojson.

Llakalia@wpi.edu

76% match

Loading thumbnail…

Fork of HTML Starter

This example visualizes endangered languages of the world as a scattermapbox plot, with points colored by endangerment level (vulnerable through extinct) and tooltips showing language names and speaker counts. It loads data from a remote CSV using d3.csv, then constructs a Plotly chart with the `scattermapbox` trace type and a `groupby` transform for categorical styling. The layout uses a dark Carto map style, zoom controls, and custom background colors, all rendered through Plotly's `newPlot` API.

KKiernan Nesslar

76% match