Production Linking

Fork of Chloropleth

This visualization combines a choropleth map of global birth rates with a scatter plot of fertility rate versus life expectancy, colored by continent with point size encoding population. Hovering highlights a country in red across both views. It uses d3.geoEqualEarth, d3.geoPath, d3.scaleLinear, and d3.scaleOrdinal, with data from a world GeoJSON, a 2023 country statistics CSV, and a country-to-continent JSON. Two SVG elements render the linked map and chart.

Wwillapolman@gmail.com

81% match

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.

81% match

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.

Fork of Chloropleth

This visualization pairs a choropleth map with a scatterplot to explore global demographic data from a 2023 CSV and GeoJSON world map. The map uses `d3.geoEqualEarth` and `d3.geoPath` to color countries by birth rate, while a `d3.scaleLinear` maps fertility rate and life expectancy onto the scatterplot axes, with point size encoding population. Both SVGs support synchronized mouseover highlighting that turns matching countries or points red, using `d3.selectAll` with shared ids.

Wwillapolman@gmail.com

Testing around with Chloropleth

This visualization combines a choropleth map with a scatter plot to explore global demographic data. A world map displays countries colored by birth rate, while the adjacent scatter plot shows fertility rate against life expectancy, with population mapped to circle size. The map and scatter plot are linked: hovering over a country in either view highlights the corresponding element in the other. Built with React and D3 v6, the map uses `d3.geoEqualEarth` projection with `d3.geoPath`, while both views rely on `d3.scaleLinear` and `d3.scaleOrdinal` for color and size encoding.

FFremont

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.

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.

79% match

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.