Skip to main content
SimilarExport ZIP
100%

Fork of dropdown test

✓ Published0🌍 Public
KKiernan Nesslar
Last edited May 14, 2024
Created on May 14, 2024
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
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
83% 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
78% 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…

Fork of world map

This fork of a world map visualizes the top 25 most spoken languages of 2024, shading each country according to a dominant language family. It presents a choropleth map with a legend and tooltips that appear on hover to show the country’s primary language and speaker count. D3.js v7 renders the map as an SVG, using `d3.select` to build the visualization and TopoJSON client for geographic data. The dataset is embedded in the code, mapping specific countries to their respective languages and speaker populations.

Ssravya7136@gmail.com
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
77% 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