Skip to main content
SimilarExport ZIP
100%

Wine/Happy Combined

✓ Published0🌍 Public
Kkaijavanzante@gmail.com
Last edited May 12, 2024
Created on May 10, 2024
Forked from viz to critique

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.

AI-generated description
MIT Licensed

Similar vizzes

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
87% 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
84% 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
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
77% 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
77% 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
77% 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
76% match
Loading thumbnail…

Wine Line Chart

The visualization displays the relationship between wine density and quality using a line chart drawn as an SVG path. It plots the two variables from a remote CSV dataset onto linear scales, with axis tick marks and labels styled in muted tones. The chart is built with React components and D3.js v5, using `scaleLinear` for the axes and the `line` API with `curveNatural` to create a smooth interpolated line through the data points.

Ggujjapooja7@gmail.com
75% match