Skip to main content
SimilarExport ZIP
100%

Wine Map and Scatter

✓ Published0🌍 Public
LLouisa Penrice
Last edited May 3, 2024
Created on May 3, 2024
Forked from Choropleth

This example presents a linked visualization of global wine production and consumption data. A left-side SVG map uses `d3.geoEqualEarth` with `d3.geoPath` to color countries by production quantity, while a right-side SVG scatter plot maps production against consumption, with point size encoding population and color encoding continent. Both views share hover interactions that highlight matching countries and points in red. Data is loaded via `d3.json` and `d3.csv` from external GitHub sources, with country names normalized for cross-referencing.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Wine Map

This example presents a dual-panel visualization of global wine production data. The left panel is a choropleth map using `d3.geoEqualEarth` projection and `d3.geoPath` to color countries by production quantity, while the right panel is a scatter plot using `d3.scaleBand` and `d3.scaleLinear` to plot each country's production with circle size and color encoding. Both panels are interactive, with mouseover events highlighting corresponding elements across the two views. The visualization loads a world GeoJSON file, a CSV of production statistics, and a JSON file mapping countries to continents.

LLouisa Penrice
91% match
Loading thumbnail…

Wine/Happy Graph Take 2

This example presents two side-by-side scatter plots that compare wine production and consumption quantities against a selected variable—such as happiness, GDP, or social support—across countries. A dropdown menu allows viewers to switch the y-axis variable, updating both charts simultaneously for comparison. Built with React and D3.js v6, the visualization uses `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render axes and circles with animated transitions. Hovering over a point triggers a tooltip displaying the exact quantity and selected variable value.

Kkaijavanzante@gmail.com
81% match
Loading thumbnail…

Fork of Wine/Happy Graph Take 2

This visualization displays two side-by-side scatter plots mapping wine production and consumption quantities against selected variables like happiness, GDP, and social support. Users can switch the y-axis variable via a dropdown menu. The code uses D3 v6 with SVG rendering and interactive tooltips on hover, drawing circles with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleLinear` scales.

LLouisa Penrice
80% match
Loading thumbnail…

Production Map and Line Chart

This visualization combines a choropleth map of global wine production with a line chart tracking production over time. The map colors countries by quantity produced, using a threshold color scale, and includes interactive tooltips showing the most recent production value when hovering. The line chart displays production trends for countries that exceed 5,000 units, with each line colored by country using a custom ordinal scale. Both views use D3.js SVG rendering, with the map employing the `geoEqualEarth` projection and `geoPath`, while the line chart uses `d3.line` and `d3.scaleLinear` for axes.

LLouisa Penrice
80% match
Loading thumbnail…

wine_scatterplot_menus

This interactive scatterplot explores chemical properties of red and white wines, allowing users to compare any two numeric variables from the dataset through dropdown menus. The visualization filters wines by type and renders maroon circles for red wines or golden circles for white wines. It uses D3 v5 with SVG and animated transitions, where circles expand from the plot center to their positions over one second. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` for data loading.

SSophia Cofone
80% match
Loading thumbnail…

Scatter Plot with Menus on Wine Recognition Dataset

This scatter plot from the Wine Recognition dataset lets users explore relationships between 13 chemical attributes of three wine varieties. Dropdown menus select which attributes appear on the x- and y-axes, while a fixed color encoding distinguishes the wine classes. Built with React and D3 v5, the SVG visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders circles with tooltips that display the wine type and coordinate values. The data is loaded as CSV via `d3.csv`.

Llintonylin
79% match
Loading thumbnail…

Production Linking

This visualization links a choropleth map of global birth rates with a scatter plot of beverage production quantities over time, using two side-by-side SVG panels. The map employs `d3.geoEqualEarth` and `d3.geoPath` to draw countries colored by birth rate, while the scatter plot uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for continent colors. Both panels synchronize hover interactions via shared country IDs, highlighting matching elements in red. Data comes from a GeoJSON world map and CSV production statistics, rendered with D3 v6 in a React framework.

LLouisa Penrice
79% match
Loading thumbnail…

Final Wine Production

This interactive visualization presents global wine production from 1995 to 2023, combining a choropleth map showing annual production quantities with a time-series line chart of production trends for countries producing over 5,000 units. A year slider animates the data, updating both the map’s color-coded quantities and the line chart’s vertical marker. The map uses `d3.geoEqualEarth` projection with `d3.geoPath` for country boundaries, while the chart employs `d3.scaleLinear` for axes and `d3.scaleOrdinal` for continent-based line colors. Hovering over a country or line reveals a tooltip with production details.

LLouisa Penrice
79% match