Fork of dropdown test

100%

Fork of dropdown test

✓ Published0🌍 Public

Last edited May 14, 2024

Created on May 14, 2024

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.

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

96% match

Loading thumbnail…

dropdown test

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.

KKiernan Nesslar

92% 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

81% match

Loading thumbnail…

Fork of countries

This scatterplot of countries uses urban population as the x-axis and country names as the y-axis, with circles colored by each nation’s official language. Hovering over the color legend filters the displayed points to only those matching that language, dimming non-matching data. The visualization is built with React, D3 v5’s `scaleLinear`, `scaleOrdinal`, and `extent` for scales, and custom React components for axes, marks, and the interactive legend. Data loads from a CSV via `d3.csv`, and all elements render as SVG inside a single `<svg>` canvas.

Rrushithareddyy

77% match

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with a dropdown to switch between years of immigration data. The bars update based on the selected year, and tooltips show exact values. Built with React and D3 v5, it uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and SVG `<rect>` elements for marks. Data comes from the United Nations World Population Prospects 2019, loaded via `csv` from a gist URL.

Jjjacobatandover

76% match

Loading thumbnail…

Fork of Fork of Adding Dropdowns Almost there fork of working...Fork 999 of Stylized Bar Chart

This interactive bar chart shows immigration numbers for the top 10 most populous countries across selectable years from 2008 to 2019. A React dropdown menu lets users switch between annual data points, updating the bar heights accordingly. The visualization uses d3.scaleBand and d3.scaleLinear for positioning, with SVG rectangles rendered via React components. Data comes from the United Nations World Population Prospects 2019, loaded through d3.csv. Gridlines and axis labels are generated using d3 scale tick methods, while tooltips display formatted values on hover.

Jjjacobatandover

76% 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

76% match

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This bar chart displays the 10 most populous countries with selectable yearly population data. A dropdown menu lets viewers switch between years from 2008 to 2019, updating the bar heights accordingly. The chart renders SVG elements using React components, with D3 v5 utilities like `scaleBand` and `scaleLinear` handling the axes and scales. Data comes from the UN World Population Prospects 2019 dataset, loaded via `d3.csv`, with tooltips showing formatted population values.

88Tigers2020

76% match