Skip to main content
SimilarExport ZIP
100%

Production Map and Line Chart

✓ Published4🌍 Public
LLouisa Penrice
Last edited May 13, 2024
Created on May 6, 2024
Forked from Selection

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.

AI-generated description

This visualization is part of the wine/happiness project. This visualiztion focuses solely on wine, while other will focus on solely happiness and the two datasets combined.

Task: Which areas of the globe produce the most red wine? How have the top wine producing countries changed/emerged over time?

Features working: Can mouse over countries on the map to see the amount of wine they produced for the most recent year with recorded data (either 2022 or 2023).

TODO: 1. Filter out the most "relevant" countries to display in the line chart (complete line chart can be seen at https://vizhub.com/lpenrice/18fd25a1152f40f0945bb58612cac57d?file=index.js). 2. Link the map and line chart so that a particular country's line becomes highlited and its production over time can be easily observed. 3. Fix axis labels (Year is displayed on the X).

Ben's resources because this is a fork of his work: A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
93% 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
92% match
Loading thumbnail…

Fork of Production Map and Line Chart

This visualization combines a choropleth map with a line chart to explore global red wine production from 1995 to 2023. The map uses `d3.geoPath` and a threshold color scale to shade countries by their most recent production quantity, while the line chart plots each country's production over time. Tooltips appear on map hover, and the line chart is filtered to show only countries that produced over 5,000 units. The project uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.axisBottom` to construct the chart, with SVG for rendering and React as the framework.

LLouisa Penrice
92% 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
91% 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
89% 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
87% match
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
86% 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
86% match