Skip to main content
SimilarExport ZIP
100%

Selection list with group filter

✓ Published0🌍 Public
Ggjonor
Last edited Feb 16, 2020
Created on Feb 15, 2020

A horizontal bar chart displays the top economies by GDP, filterable by World Bank country classifications through a select dropdown. The selection list, populated from a TSV file using d3.tsv and d3.nest, groups countries by codes like “Arab World” and “Euro area.” React state updates the chart data, and d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom render the SVG bars and axes, with GDP values from World Bank data shown in current U.S. dollars.

AI-generated description

ES6 modules, React Hooks, D3 CSV parse, Making a bar chart

Data found on World Bank https://data.worldbank.org/

Found and added some data about the classifications used:

Video tutorials

MIT Licensed

Similar vizzes

Loading thumbnail…

React D3 CSV BarChart

A React bar chart displays the nominal GDP in US dollars for 31 countries, using the latest available yearly data from the World Bank's World Development Indicators. The chart renders as an SVG with linear and band scales, using D3 v5 functions such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes. Data is loaded from CSV files and parsed with D3's `text` and `csvParse` methods, then filtered and sorted within React hooks.

Ggjonor
76% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
76% match
Loading thumbnail…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
73% match
Loading thumbnail…

Untitled

This example shows GDP per capita for a selection of countries as a bar chart. Bars initially render in the order they appear in the data, with a transition animating their height on load. Users can hover over bars to highlight them in orange, and a checkbox below the chart sorts the bars in descending order by value. The visualization is built with React and D3 v4, using `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering to SVG with mouseover event handlers.

Ppriyankab23
73% match
Loading thumbnail…

GDP Bar Chart

This example presents a static bar chart of GDP data, with each bar’s height representing a country’s economic output. The visualization uses D3.js to bind data to SVG elements, scale the bars with `d3.scaleLinear`, and apply a color scale to differentiate values. The chart is rendered inside a minimal React component, with the view instantiated via a simple `div` container. Bars are drawn using SVG `rect` elements, and the code leverages D3’s selection and data-join pattern to create the visualization.

Aadventuresenglish.info@gmail.com
73% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economies by income group, with a color legend that filters countries by category. The map renders world geography using d3.geoPath with a Natural Earth projection, while a d3.scaleOrdinal with a spectral scheme assigns colors. Clicking a legend entry dims non-matching countries and highlights the selected group, using D3 v5’s zoom behavior for panning. The visualization loads TopoJSON and TSV data from the World Atlas package and draws everything as SVG.

RRenato Francia Castillo
73% match
Loading thumbnail…

Map with Selectable Countries

This map visualizes global countries colored by economic group, with clicking a country highlighting it while dimming others and the map sphere. A color legend allows filtering countries by economic category, and hovering shows country names. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for choropleth coloring. Data comes from World Atlas TopoJSON and TSV files, loaded via d3.json and d3.tsv.

Ssleyus
73% match
Loading thumbnail…

World Countries

This choropleth map of world countries displays two categorical variables—economy and income group—selected via dropdown menus. Users can hover over the color legend to highlight countries matching a specific category, dimming others. Built with d3.v5, the map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering SVG paths, with d3.zoom for panning and zooming. Color scales from d3.schemePastel2 among others are selectable. Data is loaded from the World Atlas TopoJSON and TSV files.

Aala-wahibi
73% match