Skip to main content
SimilarExport ZIP
100%

Wine/Happy Graph Take 2

✓ Published2🌍 Public
Kkaijavanzante@gmail.com
Last edited May 13, 2024
Created on May 1, 2024

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Wine/Happy Combined

This visualization compares wine consumption and national happiness by combining a scatter plot with a dynamic line chart. The left panel displays points representing quantities of wine consumed per country against healthy life expectancy, with the ability to select a data point, which updates a temporal line graph on the right showing temperature and "rtb" values for that specific day. The interactive tooltip, built with D3 v6, enables this cross-filtering. The visualization uses SVG rendering and transitions to highlight selected data points, with data parsed from external CSV files.

Kkaijavanzante@gmail.com
87% match
Loading thumbnail…

Fork of Wine/Happy Graph Take 2

This visualization presents two scatter plots side-by-side: one showing production quantity against itself from a wine dataset, and another plotting annual income against spending score from a mall customer dataset, with circle radius encoding age in both. Built with D3 v6 and React, the code uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct axes, while `d3.select` appends SVG elements and `d3.csv` loads data from remote GitHub sources. Interactive tooltips appear on mouseenter and fade out on mouseleave, with circle positioning mapped via `x` and `y` scales.

Bbepnye@gmail.com
87% match
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
81% match
Loading thumbnail…

Wine quality

This interactive scatter plot explores the chemical attributes of white wine samples from a dataset of wine quality. Users select any two attributes via dropdown menus to visualize their relationship, with axis labels updating dynamically and points rendered as circles. The visualization uses D3.js for scales and CSV parsing, React for state management and UI components, and SVG for rendering. The data comes from a GitHub-hosted CSV file of wine quality measurements.

Ssb15jr@student.aau.dk
80% 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
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
78% match
Loading thumbnail…

Wine Equality

This interactive visualization explores relationships among chemical attributes of red wine samples from a CSV dataset. Users select numeric attributes and a categorical color mapping, with an adjustable opacity slider. The chart renders as an animated, draggable parallel coordinates plot using D3.js v5, where axis anchor points can be repositioned. Dynamic selection updates the visualization through D3's data joins and event handlers.

Aarths-glitch
77% match