Skip to main content
SimilarExport ZIP
100%

Fork of Wine/Happy Graph Take 2

✓ Published0🌍 Public
Bbepnye@gmail.com
Last edited May 13, 2024
Created on May 13, 2024

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.

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

Fork of Fork of Reusable Scatter Plot

This scatter plot visualizes the relationship between fixed acidity and volatile acidity in wine samples. The D3.js v6 code loads CSV data and renders circles on an SVG canvas using `d3.scaleLinear` for axes and `d3.extent` to determine the domain. The x-axis uses `d3.axisBottom` and the y-axis `d3.axisLeft`, with points colored steelblue.

Bbhargavinalamothu@gmail.com
80% match
Loading thumbnail…

Fork of Activity 6

This scatter plot visualizes the Wine dataset, mapping color intensity on the x-axis and alcohol content on the y-axis. It displays 178 data points as steel-blue circles within an SVG canvas. Built with D3 v6, the code uses `csv` to load remote data, `scaleLinear` for both axes, and the `axisLeft` and `axisBottom` functions to render tick marks and labels. The plot’s scales are computed from the data’s extent, and axis titles appear in green text.

Nnumitha
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
79% match