100%

Apple Quality First Viz

✓ Published1🌍 Public

Last edited Jan 31, 2024

Created on Jan 30, 2024

This example creates a scatter plot to visualize the Apple Quality Dataset, plotting each apple's weight on the x-axis and its size on the y-axis. The code uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` functions to construct the chart, with points rendered as semi-transparent circles. The data is sourced from the `@lukesavoie/applequalitydata` library, and the visualization is built dynamically to fit the container's dimensions. The chart is designed to be easily forked and modified for other datasets.

AI-generated description

A simple scatter plot with D3 showing the Apple Quality Dataset.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

Apple Quality Second Viz

This scatter plot visualizes the Apple Quality Dataset, mapping Juiciness on the x-axis and Crunchiness on the y-axis. Each circle represents an apple sample, with its position determined by those two attributes. The visualization uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the `viz` function from the custom module handles rendering circles with configurable radius and opacity. Data is loaded via the `@lukesavoie/applequalitydata` package, and the chart includes axis labels courtesy of the `@curran/axis-labels` library.

Llrsavoie@wpi.edu

89% match

Loading thumbnail…

Apple Quality Dataset

This visualization displays the first row of the Apple Quality dataset, which contains seven numerical attributes—Size, Weight, Sweetness, Crunchiness, Juiciness, Ripeness, and Acidity—along with a quality label of either "good" or "bad." The code loads the data from a CSV file, converts each attribute to a number, and renders the first data point as a JSON object in a large monospaced font. The example uses the standard JavaScript `JSON.stringify` method within a container element to present the raw data structure.

Llrsavoie@wpi.edu

82% match

Loading thumbnail…

Week 6 New Technique

This scatter plot explores the relationship between sweetness and ripeness scores in a subset of the Apple Quality dataset, coloring each point green or red based on whether the apple is rated good or bad. The visualization uses d3.scaleLinear for both axes and d3.selectAll to render the circles, with a custom legend object passed into the viz function to display colored squares and labels for each quality category in the lower-left corner. The example demonstrates a reusable viz function that accepts configurable options for margins, axis labels, and legend data.

IIan Coolidge

80% match

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes Apple product data, mapping original price, discounted price, and ratings along the x, y, and z axes. The plotly.js library renders the interactive 3D scene, while the d3.csv method loads the data from a remote CSV file hosted on GitHub. Each marker’s size is fixed, with a semi-transparent fill and gray outline, and axis titles are colored distinctly to aid legibility. The layout’s margins are minimized to maximize the plot area within the page.

BBhanuMotupalli

74% match

Loading thumbnail…

Apple project

This example demonstrates dynamic updates to a D3.js visualization using data joins. A row of five red apples is initially rendered as SVG circles, then the data array is modified over time: one fruit is removed, one apple changes to a lemon (gray and smaller), and another apple is deleted. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle these changes, with `scaleOrdinal` mapping fruit types to colors and radii. The visualization is rendered as SVG and driven by `setTimeout` callbacks.

Ss-janibekova

70% match

Loading thumbnail…

The ratio of

This donut chart visualizes the proportion of five apple values from a static dataset. The chart uses a blue-to-red color scale and places value labels outside the donut’s outer radius, with thin pointer lines and circular markers connecting each label to its corresponding arc segment. Built with D3 v6, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering labels and markers as SVG text and path elements, with label positioning calculated from arc start and end angles.

RRochelle

70% match

Loading thumbnail…

D3 Data Visualization

This example shows a stacked bar chart of fruit production (Red Delicious apples, McIntosh apples, oranges, and pears) across years from 2006 to 2016. The data is hardcoded in the source, rather than loaded from an external file. The visualization uses D3 v5 with the `d3.layout.stack` function to create stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.svg.axis` for drawing ticks. Tooltips display the value of each segment on mouseover. Renders to SVG.

Kkingkwabs

70% match

Loading thumbnail…

Simple scatterplot with d3.js

This visualization combines a line graph and scatterplot to show Apple’s stock closing price over time, with data from a CSV file. The blue line connects daily price points, while small circles mark each individual observation along the series. Built with D3.js (version 3.5), it uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path, axes, and date-based x-scale. The scatterplot circles are appended via `selectAll("dot")` with explicit radius and coordinate attributes. Data parsing relies on `d3.time.format` for date conversion and linear scaling for y-values.

Dd3noob

69% match