Skip to main content
SimilarExport ZIP
100%

Wine Map

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

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.

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 and Scatter

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.

LLouisa Penrice
91% 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
86% 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
86% match
Loading thumbnail…

Fork of getting there

This visualization pairs a choropleth world map with a multi-line chart to explore global red wine production over time. The map colors countries by production quantity for a selected year, while the line chart displays production trends for the top-producing countries, with a slider to change the active year. Built with D3 v6, it uses `d3.geoEqualEarth` and `d3.geoPath` for the map, `d3.scaleThreshold` for coloring, and SVG paths with a `d3.line` generator for the chart. Hovering highlights a country's output on the map and shows a tooltip with its latest recorded value.

Bbepnye@gmail.com
84% match
Loading thumbnail…

getting there

This visualization shows global red wine production by country from 1995 to 2023, combining a choropleth map of recent production levels with a line chart tracking top producers over time. The map colors countries by quantity produced in the selected year, while the line chart displays production trends for countries that have exceeded 5,000 units. Users can hover over countries to view their latest recorded production and use a slider to change the year displayed on the map. The code uses d3.geoEqualEarth with d3.geoPath for map rendering, d3.scaleThreshold for color coding, and d3.line for the time series.

LLouisa Penrice
83% match
Loading thumbnail…

Fork of Production Map and Line Chart

This interactive visualization combines a choropleth map and a multi-series line chart to explore global red wine production from 1995 to 2023. The map uses d3.geoEqualEarth projection and d3.geoPath to shade countries by their most recent recorded production quantity, while the line chart displays yearly trends for major producing nations. Hovering over a country reveals its latest production figure via a tooltip. The visualization employs d3.scaleThreshold and d3.scaleOrdinal for color encoding, with a slider to select specific years, rendered as SVG with d3 transitions.

LLouisa Penrice
83% match
Loading thumbnail…

Top 10 Production Bar/Map

This example combines a choropleth map and a bubble chart to compare top wine-producing countries. The map colors each country by production volume using a white-to-blue scale, while the scatter plot positions countries by fertility rate and life expectancy, with bubble size reflecting wine quantity. Hovering over a country on either view highlights its data in both. The visualization uses d3.geoPath with a geoEqualEarth projection for the map, d3.scaleLinear for color and size encodings, and d3.csv to load the production data.

LLouisa Penrice
82% match
Loading thumbnail…

Fork of Production Map and Line Chart

This visualization combines a choropleth map and a line chart to explore global red wine production from 1995 to 2023. The map, rendered using `d3.geoPath` with an equal-earth projection, shades countries by production quantity for the most recent year, with mouseovers revealing exact figures. The accompanying line chart, built with `d3.line`, plots production trends over time for countries exceeding 5,000 units, using `d3.scaleOrdinal` for color encoding by country. The interface comprises two separate SVG elements within a React framework, employing `d3.axisBottom` and `d3.axisLeft` for chart axes and animated transitions for interactivity.

Bbepnye@gmail.com
82% match