Skip to main content
SimilarExport ZIP
100%

Wine Sales.js!

✓ Published0🌍 Public
Kkkeebaugh
Last edited Mar 8, 2022
Created on Mar 8, 2022

This example uses a bar chart to display the average income associated with seven different wine varieties. The chart, rendered as an SVG, loads data from a CSV file containing wine names and income values, converting the income strings to numbers. The visualization is built with D3.js v5, leveraging `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position and draw the bars with a steelblue fill. The bars are appended to the SVG element, with their widths proportional to income and their vertical positions determined by wine type.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

wine_bar_scatter_menu

This interactive bar chart visualizes wine quality scores across two wine types, with a dropdown menu to switch between red and white wines and another to select which chemical attribute (such as alcohol, pH, or sulphates) is plotted as the bar height. The bars are sorted by quality and animate smoothly when the selections change. The visualization uses D3 v5 with SVG rendering, including `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and transitions on the bar rectangles. Data comes from the embedded CSV file containing wine physicochemical properties.

SSophia Cofone
79% 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
Loading thumbnail…

Test 1

This example shows an area chart of alcohol content in red wine samples, drawn using D3.js v7. The visualization plots alcohol values along both axes, with the area filled in semi-transparent steelblue beneath the line. It loads data from the UCI Wine Quality dataset via `d3.csv`, scales the domain using `d3.scaleLinear` and `d3.extent`, and renders the SVG path with the `d3.area` generator along with `d3.axisBottom` and `d3.axisLeft`.

Vveeramallivaishnavi3@gmail.com
78% match
Loading thumbnail…

wine_histogram

This interactive histogram displays the distribution of wine quality ratings, with a dropdown menu allowing viewers to switch between different chemical attributes. The chart animates bar transitions when the selected variable changes. Built with D3 version 7, it uses `d3.histogram()`, `scaleLinear`, and `axisBottom` to render the SVG visualization. The data comes from a semicolon-delimited CSV file containing wine properties, and the code includes a custom `dropdownMenu` module for user interaction.

SSophia Cofone
78% 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
77% match
Loading thumbnail…

wine_bar_chart_menu_2data

This interactive bar chart visualizes the quality ratings of red and white wines, showing how various chemical attributes like acidity, alcohol, and pH compare across quality scores. A dropdown menu, built with the `dropdown_menu` module, lets users switch between white and red wine datasets and select which chemical attribute to display on the y-axis. The chart, rendered as SVG using D3 v5, animates bar transitions with `transition().duration(1000)` when selections change, sorting bars by quality and updating axes, labels, and the title dynamically. Data originates from a CSV file of wine properties.

SSophia Cofone
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…

A6_Q3

This scatter plot shows the relationship between alcohol content and quality ratings for red and white wines, with each point colored by wine type. The visualization uses D3 v7 to parse inline CSV data and render an interactive SVG chart with labeled axes. Hovering over a point enlarges it and displays a tooltip showing the wine type and quality score. The chart employs d3.scaleLinear for coordinate mapping, d3.axisBottom and d3.axisLeft for tick marks, and d3.scaleOrdinal to assign red and yellow colors to the respective wine categories.

SShashankkodishala@my.unt.edu
76% match