Skip to main content
SimilarExport ZIP
100%

Fork of Wine/Happy Graph Take 2

✓ Published0🌍 Public
LLouisa Penrice
Last edited May 13, 2024
Created on May 13, 2024

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.

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

Fork of Circles with D3

This example maps the Wine Quality dataset, plotting pH against alcohol content for individual wine samples. It uses D3's `csv` loader to fetch the data, `scaleLinear` to map the data domain to the screen, and `axisLeft`/`axisBottom` to render labeled axes. The visualization is an SVG scatter plot where each circle represents a wine, with axis labels for pH and Alcohol added via SVG text elements.

RRohithNaiduDevareddy@my.unt.edu
80% match
Loading thumbnail…

Fork of Fork of Fork of WINE

This example visualizes the coefficients of a wine quality regression model, showing how each chemical attribute contributes to the target variable. Using D3 v4 loaded via UNPKG, it renders an animated SVG scatterplot where circles represent attributes plotted against their coefficients on a scale from -1 to 1. The code uses `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.csv` loading data from a local file. Interactive tooltips appear on mouseover, displaying the coefficient value, while each point is styled with a purple fill and white stroke.

LLouisa Penrice
80% match
Loading thumbnail…

Fork of Fork of WINE

This bar chart displays the coefficients of wine attributes, such as alcohol, sulphates, and volatile acidity, against a fixed scale from -1 to 1. The visualization uses D3.js v6, with data loaded via `d3.csv()` to parse the CSV file. The chart is rendered as an SVG, using `d3.scaleBand()` for the categorical x-axis and `d3.scaleLinear()` for the continuous y-axis. Each attribute is plotted as a point, showing its coefficient value in a simple, direct representation of the dataset's coefficients.

LLouisa Penrice
80% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between two continuous variables across a dataset of wine quality metrics, plotting each sample as a circle. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` and `d3.axisLeft` to render labeled axes. The SVG output includes interactive-friendly features like configurable margins, point radius, and opacity, with a chainable API for setting the x and y accessor functions and axis labels.

Bbassansackey@gmail.com
80% match